Pop-up image when hovering html text/link

Discussion in 'Web Design and Development' started by Fromethius, Aug 1, 2008.

  1. Fromethius macrumors member

    Joined:
    Jun 26, 2008
    Location:
    Pennsylvania
    #1
    Hey all,

    I have a page on my website with many machine names in a list. I thought it'd be nice upon hovering over a machine list item (not necessarily a link), that an image would pop-up showing you the machine.

    I want something like this: https://www.panic.com/fancy/buy.html

    Except, it'd be nice if it was a lot simpler. I don't need the fancy loading icons or the transitional effects. Also, it is a corporate website, and I don't know if they're in to paying 40 dollars for something they may not even use (it looks like the effect for FancyZoom is only for images, anyways).

    The website doesn't necessarily make money, but the company does. Does that exempt us from the fee? The site hardly gets hundreds of viewers, and is just showing the viewer what the company does.

    Can FancyZoom be modified to work on links instead of images?

    I digress.

    If anyone has a code or script (it'd be nice not having to use javascript though) for doing this sort of thing, it would be much appreciated.
     
  2. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    You could actually achieve this with CSS alone.

    HTML:
    HTML:
    <p class="fancy">Some text with a link. <img src="image.jpg" alt="wow"></p>
    CSS:
    Code:
    p.fancy img {
     display: none;
    }
    p.fancy:hover img {
     display: inline; /* or block */
    }
    You can also add some other CSS to position the image a little differently. I've done similar thing before. If this looks like an option you want to do and need further guidance let me know. I can also put up some JavaScript if you want to go that route.

    As a note, the above won't work in IE as t doesn't support the hover portion on anything but links. Though, if links will be present then we can probably tweak the above.
     
  3. Me1000 macrumors 68000

    Me1000

    Joined:
    Jul 15, 2006
    #3
    CSS would be the simplest way, on the other hand like angelwatt said IE hates you... :eek:


    For that reason the code would be something like...

    Head tag:
    HTML:
    <script type="text/javascript">
    function showImage(imageVar)
    {
    document.getElementById(imageVar).style.display="block"
    }
    </script>
    
    then in the body
    Code:
    <img src="image.gif" id="image1" style="display:none;" />
    <a href="#" onMouseOver="showImage('image1')">text rollover</a>
    
    By the way, I totally suck at javascript so that may not work because I didnt test it.

    You would probably also want to add a mouse out function so that when the mouse is no longer hover over the text the image hides...
     
  4. Fromethius thread starter macrumors member

    Joined:
    Jun 26, 2008
    Location:
    Pennsylvania
    #4
    Do you think you could provide that for me? It would be much obliged. I am not all too familiar with javascript.
     
  5. Fromethius thread starter macrumors member

    Joined:
    Jun 26, 2008
    Location:
    Pennsylvania
    #5
    Doesn't work in Internet Explorer and it doesn't pop-up, but rather displays itself on the page, moving the rest of the text. I'd like it in some sort of a pop-up window, if it could be done.

    Also, this does the same thing, moving the rest of the text to make room for the picture thus messing up the formatting.
     
  6. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #6
    To give you a more specific solution we need to see the code that you're working with. Also, need to know the exact behavior you want, like where the image should pop-up in relation to the text. That's why we didn't give complete solutions, we needs the details.
     
  7. Fromethius thread starter macrumors member

    Joined:
    Jun 26, 2008
    Location:
    Pennsylvania

Share This Page