Image Opacity (fade in/out) with text OnMouseOver/Out

[GordonBennett]

Hello all,

Firstly this is my first post, so, hello again! Good to have found a great website building forum. My coding knowledge is pretty basic so please be patient. Very much looking forward to receiving some much needed help.

Now the request...

I'm making a website for a friend with one last detail to finish off the project. It's basically a reworking of the IE error page into a portfolio for a photographer. It incorporates CSS and a bit if Javascript to replace 99 images of equal dimensions into a image holder by rollover of digits 00-98 (see website examples - test page with image preloader (http://carrionwebdesign.com/test/preload.html).

All i need now is to enable the images to fade up/out when the cursor rolls over/out, ie the image's opacity 0-100 when rollover, 100-0 when rollout. If i could control the rate it fades then even better!

I've found an example of the type of fade here (http://home.comcast.net/~jscheuer1/side/files/fade_advanced_preset_write.htm) but just wondered if i could incorporate this into the text rollover?

Any help at all would be most appreciated. Let me know if you need more info.

Gordon

[techietim]

From what I can see, the first parameter in the function fade is the element you wish to have faded. Know all you need to do is call that function when you click the text with reference to the image element.

[GordonBennett]

Thanks for responding techietim

As i said i'm not too hot on the script coding, any idea how i'd call the Fade function?

I'm a little confused whether i need to fade up the image which is being swapped in the image-holder. I've found a great bit of Javascript here (http://www.walterzorn.com/tooltip/tooltip_e.htm) for tooltips, any chance of an example of the script i might need in the head/body and what i need to add to the image rollover coding.

Thanks again

Gordon

[rangana]

Luckily, the page you've shown was done by one of our forum moderators - John (http://www.dynamicdrive.com/forums/member.php?u=2033).

He's got a script too that does what you wanted with text:
http://home.comcast.net/~jscheuer1/side/fade_text/

Hope that keeps you going.

[jscheuer1]

Right you are, sort of, rangana. I decided to play around with this page a bit, and made up this demo:

http://home.comcast.net/~jscheuer1/side/im_text_fade_h.htm

But I figured, why use two scripts when one will do? I had since modified the image fader script to handle a little bit more complex tasks, so am using it here in its modified form to fade a covering division out to reveal each new image and text (if any, I only included text for the first two). This (using a cover) takes care of two potential problems in IE - the loss of anti-aliasing of text that is filtered, and the introduction of white dots into .jpg images sometimes when they are filtered.

[GordonBennett]

Wow what a response!

Thanks rangana, it's always interesting to see variations on javascript, that might just come in handy at another time. Cheers!

John, I can't thank you enough. The reworking of the javascript is PERFECT, just what i'd hoped to achieve. Thanks for including notes, it's always interesting to know what does what, not that i understand it just yet but i've certainly been inspired to keep at it.

A million thanks to all that have helped.

Gordon