...

View Full Version : Show Hide text on image rollover



steve55
09-28-2012, 08:01 PM
Hi


I'm using the following javascript


<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script>
$(document).ready(function() {
$('.nav-toggle').mouseover(function(){
//get collapse content selector
var collapse_content_selector = $(this).attr('href');

//make the collapse content to be shown or hide
var toggle_switch = $(this);
$(collapse_content_selector).toggle(function(){
if($(this).css('display')=='none'){

}
});
});

});
</script>


to expand a div and show some text on the rollover of an image.


<a href="#collapse1" class="nav-toggle"><img src="images/image_name.jpg" width="298" height="59" alt="image">

<div id="collapse1" style="display:none">my text that is revealed is this section.....</div>


It works well, but using the above code the revealed text above stays in place until you mouseover the image again upon which it is hidden.

I would like to change this so that you still mouseover the image to reveal the text, but as soon as you mouseout it is hidden.

eg. you don't have to mouseover it again to close it.


I'm sure all I need is a simple tweak to the code above, so if you can help asap it would be appreciated!

WolfShade
09-28-2012, 08:31 PM
You have the .mouseover function.. make another one for .mouseout and reverse the process.

steve55
09-28-2012, 08:49 PM
Not sure what to code or where to put it though...

WolfShade
09-28-2012, 08:57 PM
Sorry.. I wasn't looking at this closely. It wasn't finished.



$(document).ready(function() {
$('.nav-toggle').mouseover(function(){
//get collapse content selector
var collapse_content_selector = $(this).attr('href');

//make the collapse content to be shown or hide
var toggle_switch = $(this);
$(collapse_content_selector).toggle(function(){
if($(this).css('display')=='none'){
$(this).css('display')='';
}
else{
$(this).css('display')='none';
}
});
});

});

steve55
09-28-2012, 09:58 PM
Thanks - That leaves them all open, but now they don't close at all?

Do you need to add a mouseout command to the code to get them to close....?

WolfShade
09-28-2012, 10:02 PM
Then, yes, what I originally stated should fix it. Sorry. Been a long day.

steve55
09-28-2012, 10:14 PM
Appreciate your help, but I'm still none the wiser...

eg. Not sure what code I need to add in or where to put it?

Can you add it in to the code so I can review and test please.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum