...

View Full Version : Pop-Up Link



LuckyCharmz
08-07-2005, 08: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, 08:41 AM
i looked at that image in Firefox, and it doesn't trigger any pop-up images....

LuckyCharmz
08-07-2005, 08: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, 09: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, 09: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, 12:53 PM
Yup looks the same thing as used here -

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

LuckyCharmz
08-07-2005, 10: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, 02: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, 05: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, 06: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, 06: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, 06:52 AM
Yeah. That works.

Thanks for all the help. :)

mrruben5
08-08-2005, 10: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, 07:30 PM
Yeah. That works.
I try this and work

thanks ..........


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

LuckyCharmz
08-09-2005, 03: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:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum