Pop-up image when hovering html text/link

[Fromethius]

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.

 

[angelwatt]

You could actually achieve this with CSS alone.

HTML:

<p class="fancy">Some text with a link. <img src="image.jpg" alt="wow"></p>

CSS:

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.

 

[Me1000]

CSS would be the simplest way, on the other hand like angelwatt said IE hates you...


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

Head tag:

<script type="text/javascript">
function showImage(imageVar)
{
document.getElementById(imageVar).style.display="block"
}
</script>

then in the body

<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...

 

[Fromethius]

CSS would be the simplest way, on the other hand like angelwatt said IE hates you...


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

Head tag:

<script type="text/javascript">
function showImage(imageVar)
{
document.getElementById(imageVar).style.display="block"
}
</script>

then in the body

<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...

Do you think you could provide that for me? It would be much obliged. I am not all too familiar with javascript.

 

[Fromethius]

You could actually achieve this with CSS alone.

HTML:

<p class="fancy">Some text with a link. <img src="image.jpg" alt="wow"></p>

CSS:

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.

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.

CSS would be the simplest way, on the other hand like angelwatt said IE hates you...


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

Head tag:

<script type="text/javascript">
function showImage(imageVar)
{
document.getElementById(imageVar).style.display="block"
}
</script>

then in the body

<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...

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

 

[angelwatt]

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.

 

[Fromethius]

I found something perfect to suit my needs:

http://www.digitalia.be/software/slimbox