Results 1 to 7 of 7

Thread: Opacity on images

  1. #1
    Join Date
    May 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Opacity on images

    Hi there,

    Firts of all, please excuse me as i am not english speaker...


    I've found in this site this script that make change opacity on images:

    http://www.dynamicdrive.com/dynamici...adualfader.htm

    The problem is that i want the opposite action i.e I want that all images are not with the opacity effects but are only with when i mouseover on an image that the rest of the images have the opacity effect.

    Exemple:
    <img 1><img 2><img 3> == with no opacity

    When i mousevoer on img 1, img 2 & 3 have the opacity.
    If i mouseover on img2, the effect appear on imgs 1 &3 etc etc...

    I tried to change the value on the script but in vain.

    Anyone could tell me wich line i have to modify on the script ?

    Here's the script:
    http://www.dynamicdrive.com/dynamici...radualfader.js

    Thanks in advance for any help !

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    That script is only for fading in. Use this one, which goes either way:

    http://www.dynamicdrive.com/forums/s...ad.php?t=22534

    demo:

    http://home.comcast.net/~jscheuer1/s...eset_write.htm
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    May 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Ok thank you but this is the same effect.

    I tried with my own images and they are with the effect of opacity before the 'mouseover' and i just wanna the effect only when i mouseover...

    peace,
    D.

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    In this section:

    Code:
    var faders=[];
    // Preset each image's initial opacity (0 to 100):
    // ex:  faders[x]=['image_id', initial_opacity];
    faders[0]=['mona', 100];
    faders[1]=['arch', 100];
    set the initial opacity. Make it 100 if you want your images to start out 'normal' or 100% opaque.

    Then, use:

    Code:
    <img id="mona" onmouseover="fade(this, 'out', 30);"  onmouseout="fade(this, 'in');" . . .
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    May 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Yes thank you its working... but its not really what i want 'cause i have many images.

    Example:
    <img1><img2><img3> etc == no opacity

    if i mouveover on img1 ---> img 2&3 become "opacity"
    if i mouseover on img2 ---> img 1&3 become "opacity"......

    That 's why the script i mentionned before is perfect but its just the opposite of what i want...

    Nevertheless, thx again, i appreciate ur help !
    Last edited by Dafied; 05-24-2008 at 06:05 PM.

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    You can use the id of the image(s) you want to change:

    Code:
    <img id="some_id" 
    onmouseover="fade('some_id2', 'out', 30);fade('some_id3', 'out', 30);"  
    onmouseout="fade('some_id2', 'in');fade('some_id3', 'in');" . . .
    This assumes that these (or something like them) exist (these could also have events that affect other images):

    HTML Code:
    <img id="some_id2" src="pic2.jpg">
    <img id="some_id3" src="pic3.jpg">
    and are setup here:

    Code:
    var faders=[];
    // Preset each image's initial opacity (0 to 100):
    // ex:  faders[x]=['image_id', initial_opacity];
    faders[0]=['some_id2', 100];
    faders[1]=['some_id3', 100];
    You can setup as many images as you want, and have as many events distributed however you like in your HTML code that change however you like whatever images you have set up.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #7
    Join Date
    May 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thank you very much !!!!

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •