Log in

View Full Version : Toggle image with text.


selflearning
11-14-2012, 04:18 PM
Please help me i am unable to toggle the image to get the text behind that when mouseover on the image..


<html>
<head>

<script src="script1/jquery-1.7.2.js" type="text/javascript"></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'){
}
});
});
$('.nav-toggle').mouseout(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>
</head>
<body>
<a href="sole.html" class="nav-toggle"><img src="images/12.jpg" width="298" height="59" alt="image">

<div id="collapse1" style="display:none">my text that is revealed is this section.....</div>
</body>
</html>
traq
11-14-2012, 05:01 PM
Two things:

1) you didn't close your <a> tag.

2) your anchor's href points to another page, while the script expects it to be a selector for the content you want to show.

working example (http://jsfiddle.net/traq/hN47A/)
selflearning
11-16-2012, 02:39 AM
Two things:

1) you didn't close your <a> tag.

2) your anchor's href points to another page, while the script expects it to be a selector for the content you want to show.

working example (http://jsfiddle.net/traq/hN47A/)

I had done that but it is not directing to another page .
Beverleyh
11-16-2012, 06:19 AM
As traq says, the script is to reveal content. The function isn't needed if you just want to go to another page so just use a standard anchor tag without the nab-toggle class.
traq
11-16-2012, 06:57 AM
right - so, to clarify, what do you want to accomplish?