PDA

View Full Version : Opacity on images



Dafied
05-24-2008, 12:04 PM
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/dynamicindex11/gradualfader.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/dynamicindex11/gradualfader.js

Thanks in advance for any help !

jscheuer1
05-24-2008, 02:51 PM
That script is only for fading in. Use this one, which goes either way:

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

demo:

http://home.comcast.net/~jscheuer1/side/files/fade_advanced_preset_write.htm

Dafied
05-24-2008, 03:40 PM
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.

jscheuer1
05-24-2008, 03:50 PM
In this section:


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:


<img id="mona" onmouseover="fade(this, 'out', 30);" onmouseout="fade(this, 'in');" . . .

Dafied
05-24-2008, 05:56 PM
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 !

jscheuer1
05-25-2008, 04:29 AM
You can use the id of the image(s) you want to change:


<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):


<img id="some_id2" src="pic2.jpg">
<img id="some_id3" src="pic3.jpg">

and are setup here:


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.

Dafied
05-25-2008, 11:09 AM
Thank you very much !!!!