Results 1 to 4 of 4

Thread: Image shown when mouse over text

  1. #1
    Join Date
    Jan 2012
    Posts
    25
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Image shown when mouse over text

    I need this: when i put the mouse over a text a image gets shown like "pop" and disappears when the mouse is not over the text anymore.
    I already have searched this on the forum and i found some codes but i need a smaller code because i may use it like 100 times on a page and i want to make it simply.
    Thanks.

  2. #2
    Join Date
    Mar 2011
    Location
    N 11 19' 0.0012 E 142 15' 0
    Posts
    1,521
    Thanks
    41
    Thanked 89 Times in 88 Posts
    Blog Entries
    3

    Default

    Code:
    <html>
    <head>
    <script type="text/javascript">
    function toggleMe() {
    var id = document.getElementById('Image1');
    if(id.style.display == "block") {
    id.style.display = "none";
    } else {
    id.style.display = "block";
    }
    }
    </script>
    </head>
    <body>
    <div onmouseover="toggleMe()" onmouseout="toggleMe()">
    Some Text
    </div>
    <img src="IMAGE URL" alt="IMAGE ALT" id="Image1" style="display:none;"/>
    </body>
    </html>
    Last edited by keyboard; 04-12-2012 at 07:42 AM. Reason: Fixed Script

  3. #3
    Join Date
    Jan 2012
    Posts
    25
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Thanks, ill try it later.

  4. #4
    Join Date
    Mar 2011
    Location
    N 11 19' 0.0012 E 142 15' 0
    Posts
    1,521
    Thanks
    41
    Thanked 89 Times in 88 Posts
    Blog Entries
    3

    Default

    Oh and another thought -
    If you want to use this lots of times, put this bit
    Code:
    function toggleMe() {
    var id = document.getElementById('Image1');
    if(id.style.display == "block") {
    id.style.display = "none";
    } else {
    id.style.display = "block";
    }
    }
    in an external javascript file. It'll save you from having to write it out every page.
    Last edited by keyboard; 04-13-2012 at 05:37 AM.

Bookmarks

Posting Permissions

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