Pop-Up Link

LuckyCharmz

08-07-2005, 07:36 AM

I have seen a site that allows you to have a little image pop-up when you hover over a link. I was just wondering how you could do this, but with a text link.

I attached an example of what I mean.

chump2877

08-07-2005, 07:41 AM

i looked at that image in Firefox, and it doesn't trigger any pop-up images....

LuckyCharmz

08-07-2005, 07:58 AM

:confused: I'm saying, look in the picture, it's a screenshot, so the mouse pointer is not there, but it shows that when you hover your cursor over the smaller picture, a bigger one will show up. I want to know how to do that with a text link, so that I can have a picture show up when you hover over the link.

To see exactly what I mean, follow this link:
http://www.caedes.net/Zephir.cgi?lib=Caedes%3A%3ANewSearch&query=Germany

harbingerOTV

08-07-2005, 08:14 AM

loks like they did this:

<a href="/Zephir.cgi?lib=Caedes::Infopage&image=eurojer-1123130440.jpg"
><img height=62 width=82 src="/images/thumbs/eurojer-1123130440.jpg" border=0
onMouseOver="popup('eurojer-1123130440.jpg')" onMouseOut="kill()"></a>

for you it would be:

<a href="image(?)"
><img height=? width=? src="/image(?)" border=0
onMouseOver="popup('images(?)')" onMouseOut="kill()"></a>

mrruben5

08-07-2005, 08:27 AM

HTML:<a href="#" class="popupimage">Hover over this link<img src="images/popup.gif" alt="" /></a>CSS:a.popupimage {
position: relative;
}

a.popupimage img {
display:none;
position: absolute;
top:-1em;
right:-1em;
}

a.popupimage:hover img {
display: block;
}No messy javascript.

mark87

08-07-2005, 11:53 AM

Yup looks the same thing as used here -

http://www.stunicholls.myby.co.uk/menu/magnify.html

LuckyCharmz

08-07-2005, 09:19 PM

That's not exactly what I wanted. But thanks anyway.

I don't think I'm being descriptive enough, and that's the problem.

I want to have it so that there's a text link, that leads to a HTML page, not the picture itself. I want it so that when you hover over the link, it'll show the little box thing with a picture, but when you're not hovering over the link, it'll just be the regular text link.

Exactly like the link I posted above (http://www.caedes.net/Zephir.cgi?lib=Caedes%3A%3ANewSearch&query=Germany), except for it's a text link instead of a picture.

Thanks for all the help so far. :thumbsup:

harbingerOTV

08-08-2005, 01:46 AM

Lucky, mrruben5's examlpe does do what you wanted it to do.

mark, nice link. A lot of cool tid bits on there :thumbsup:

LuckyCharmz

08-08-2005, 04:59 AM

mrruben5's code didn't exactly work for me.

This is what showed up on both Internet Explorer and Mozilla Firefox:

http://www.freewebtown.com/biggiemusic/Untitled2.jpg

As you can see, the picture and the link are together, I want the picture to pop up only when the cursor is hovering over the link. Exactly like the link I provided above (http://www.caedes.net/Zephir.cgi?lib=Caedes%3A%3ANewSearch&query=Germany). (Like when you move the cursor, the picture moves with it.)

harbingerOTV

08-08-2005, 05:15 AM

you must be ommiting something.

try this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>title me :D</title>
<style type="text/css">
a.popupimage {
position: relative;
}

a.popupimage img {
display:none;
position: relative;
top:0em;
left:120px;
}

a.popupimage:hover img {
display: block;
}
</style>
</head>
<body>
<a href="#" class="popupimage">mmm...<img src="popup.gif" alt="" /></a>
</body>
</html>

you have to play round with the positioniong of the image to make it fir in what your doing.

the image i used:

_Aerospace_Eng_

08-08-2005, 05:22 AM

Since the above only works in FF, maybe you'll find a use for this one (http://moneytreesystems.com/css/picpopup.html).

LuckyCharmz

08-08-2005, 05:52 AM

Yeah. That works.

Thanks for all the help. :)

mrruben5

08-08-2005, 09:38 AM

I was already wondering why the thing didn't work. I used the suckerfish mehod because the image was nested.

ncoisas

08-08-2005, 06:30 PM

Yeah. That works.
I try this and work

thanks ..........

www.tugabit.com (http://www.tugabit.com)

LuckyCharmz

08-09-2005, 02:44 AM

I was already wondering why the thing didn't work. I used the suckerfish mehod because the image was nested.

Oh, it didn't work because somehow the CSS didn't get into it. I could have sworn I put it in but when I went back to edit the page, it wasn't there. After I put it in it worked fine. Thanks again :thumbsup: