Results 1 to 6 of 6

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

  1. #1
    Join Date
    Jul 2008
    Location
    London, England
    Posts
    25
    Thanks
    29
    Thanked 0 Times in 0 Posts

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

    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.

    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 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
    Last edited by GordonBennett; 07-09-2008 at 09:31 AM.

  2. #2
    Join Date
    Jul 2008
    Posts
    199
    Thanks
    6
    Thanked 58 Times in 57 Posts

    Default

    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.

  3. The Following User Says Thank You to techietim For This Useful Post:

    GordonBennett (07-09-2008)

  4. #3
    Join Date
    Jul 2008
    Location
    London, England
    Posts
    25
    Thanks
    29
    Thanked 0 Times in 0 Posts

    Default

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

  5. #4
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    1,160
    Thanks
    17
    Thanked 277 Times in 275 Posts

    Default

    Luckily, the page you've shown was done by one of our forum moderators - John.

    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.
    Learn how to code at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph!

  6. The Following User Says Thank You to rangana For This Useful Post:

    GordonBennett (07-10-2008)

  7. #5
    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

    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/s...ext_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.
    - John
    ________________________

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

  8. The Following User Says Thank You to jscheuer1 For This Useful Post:

    GordonBennett (07-10-2008)

  9. #6
    Join Date
    Jul 2008
    Location
    London, England
    Posts
    25
    Thanks
    29
    Thanked 0 Times in 0 Posts

    Default

    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

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
  •