Results 1 to 6 of 6

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,546
    Thanks
    43
    Thanked 94 Times in 93 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,546
    Thanks
    43
    Thanked 94 Times in 93 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.

  5. #5
    Join Date
    Apr 2015
    Posts
    1
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Hello, I have used the code to setup image popup and it workes fine, thank you, but I cannot get it to work on a second link, tries to open the first link up. Many thanks

  6. #6
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    2,419
    Thanks
    16
    Thanked 414 Times in 412 Posts
    Blog Entries
    19

    Default

    Firstly, the reason why the sample script only works on one image is that the function is specifically referencing one image by its unique id in the first line. That's easily changed, however, there are other problems or points to consider/clarify before proceeding.

    1 - This thread is from 3 years ago so if you're copying this setup, you will now run in to problems in touch devices that do not support the onmouseover and onmouseout events. I expect the script will fail on keyboard navigation too. A more modern and future-friendly approach is now necessary to ensure that your content is accessible to your visitors.

    2 - You say that you're using this script on links (anchor tags)? Does that mean that you're doubling-up on actions? i.e - you're using the mouse/hover to reveal an image but then a click takes the user to another page Or performs another action? Again, this combo won't work on touch devices and probably not for keyboard users either - they'll bypass any image and go straight to their destination. If this is the case, be sure that the image isn't critical to the action the link performs (such as checking a product before committing to buy) to avoid a user-UNfriendly experience.

    3 - You say you've used this code to create a popup which, contrary to question 2, could mean that the only action of the link tag is to reveal the image. If this is the case, I would recommend looking at other possibilities/methods of revealing your image, such as a dedicated modal popup or light box. Creating an intuitive and usable web interface is easier when you work *with* user expectations -- using patterns or behaviours that have been learned from their experiences elsewhere on the web -- and click/tap activated modal popups are widely used so they do a fab job of that, AND of encouraging user focus on to the image in the foreground. Conversely, popping up/revealing an image *within* the web page body can be difficult for users to notice on mobile devices because the context of their actions is confined to such a small area. It depends what you're doing but the old script above probably isn't great in modern contexts.

    If what you're wanting is a simple modal popup image, maybe you can use this http://fofwebdesign.co.uk/template/_...odal-popup.htm

    If you need any further help, we'll need to see your page, and get more information, so that we can advise the best course of action.
    Last edited by Beverleyh; 04-26-2015 at 08:31 AM.
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  7. The Following User Says Thank You to Beverleyh For This Useful Post:

    graftonmick (04-28-2015)

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
  •