Question

I am looking to implement a mouseover event on my page for a menu –

I have 3 titles to the left with a respective content div on the right where the related text appears.

Having trauled all the forums for a working js solution, I have settled with:

http://flowplayer.org/tools/demos/tabs/mouseover.html

which uses a very simple js function:

$("#products").tabs("div.description", {event:'mouseover'});

What I am hoping to do however, is to incorporate a fadeIn(), fadeOut effect so that when the user hovers over a title on the left of the page, the existing content showing fades away and the repective content will fade in to view……

The html coding is:

<div id="products" >

<img src="home.png" alt="home" />

<img src="services.png" alt="services" /> 

<img src="contact.png" alt="contact" /> 

</div>

<div class="description" id="home" >
 .. content .. 
</div>

<div class="description" id="services" >
 .. content .. 
</div>

<div class="description" id="contact" >
 .. content .. 
</div>

I have tried to incorporate thread 5404775 on this site but simply cannot get it working!

Any help much appreciated

Answer 1

I’m working off the assumption that you want people hovering over the image buttons here to make the corresponding divs fade in and out. What they are doing on that site will not work because Javascript is needed for the fading effect. JQuery makes this easy.
I recommend trying something like

<script type="text/javascript">
oldSelected = "home"
$(document).ready(function(){
  $("#products img").mouseover(function(){
    $(".description").stop(true, true);
    var newSelected = $(this).attr("alt");
    $("#" + oldSelected).fadeOut('normal',function(){
      $("#" + newSelected).fadeIn();
    });
    oldSelected = newSelected
  });
});
</script>

I have tested this and it works. One thing you will want to make sure of is that the css for the divs has them set to not be visible at the start, unless you want one of them visible in which case the id for that div should be what you set the oldSelected to at the start of the function.

Enjoy!