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

<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

**selflearning** · 11-16-2012, 02:39 AM

Originally Posted by traq

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

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.