Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Aug 2002
    Location
    -
    Posts
    33
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Show Hide text on image rollover

    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!

  • #2
    Regular Coder
    Join Date
    Apr 2012
    Location
    St. Louis, MO
    Posts
    985
    Thanks
    7
    Thanked 101 Times in 101 Posts
    You have the .mouseover function.. make another one for .mouseout and reverse the process.
    ^_^

    If anyone knows of a website that can offer ColdFusion help that isn't controlled by neurotic, pedantic jerks* (stackoverflow.com), please PM me with a link.
    *
    The neurotic, pedantic jerks are not the owners; just the people who are in control of the "popularity contest".

  • #3
    New Coder
    Join Date
    Aug 2002
    Location
    -
    Posts
    33
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Not sure what to code or where to put it though...

  • #4
    Regular Coder
    Join Date
    Apr 2012
    Location
    St. Louis, MO
    Posts
    985
    Thanks
    7
    Thanked 101 Times in 101 Posts
    Sorry.. I wasn't looking at this closely. It wasn't finished.

    Code:
    $(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';
            }
         			});
       		  });
     
    		});
    ^_^

    If anyone knows of a website that can offer ColdFusion help that isn't controlled by neurotic, pedantic jerks* (stackoverflow.com), please PM me with a link.
    *
    The neurotic, pedantic jerks are not the owners; just the people who are in control of the "popularity contest".

  • #5
    New Coder
    Join Date
    Aug 2002
    Location
    -
    Posts
    33
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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....?

  • #6
    Regular Coder
    Join Date
    Apr 2012
    Location
    St. Louis, MO
    Posts
    985
    Thanks
    7
    Thanked 101 Times in 101 Posts
    Then, yes, what I originally stated should fix it. Sorry. Been a long day.
    ^_^

    If anyone knows of a website that can offer ColdFusion help that isn't controlled by neurotic, pedantic jerks* (stackoverflow.com), please PM me with a link.
    *
    The neurotic, pedantic jerks are not the owners; just the people who are in control of the "popularity contest".

  • #7
    New Coder
    Join Date
    Aug 2002
    Location
    -
    Posts
    33
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •