PDA

Click to See Complete Forum and Search --> : Images and hover

minulescu
12-08-2002, 03:15 AM
Hi. I'm not sure if HTML is how this can be done, but here's what I'd like to do. I have 5 images. They are all linked to dif pages. I would like on "hover" over a specific image, the name of that link (the name of the page) to be displayed in a box below. How can i do this?
Maybe I'm not to good at explaining, so here's a link:

http://www27.brinkster.com/minulescu/project
Stefan
12-08-2002, 05:12 AM
For starters, are you aware that that link of yours triggers a download in some browsers?

The reason is that the file is sent as mimetype "application/octet-stream".
That is very very wrong...

Please fix it (the easiest is probably to put .html at the end of the filename).

Anyway, the easiest solution is to do this with CSS.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<title></title>
<style title="Default" media="screen" type="text/css">

.imglinks a span {display:none;}
.imglinks a:hover span {display:block; position:absolute; width:200px; top:200px; left:50%; margin:0 0 0 -100px;}

</style>
</head>
<body>

<div class="imglinks">
<a href=""><img 1><span> The name of page1</span></a>
<a href=""><img 2><span> The name of page2</span></a>
<a href=""><img 3><span> The name of page3</span></a>
<a href=""><img 4><span> The name of page4</span></a>
<a href=""><img 5><span> The name of page5</span></a>
</div>

</body>
</html>
gil davis
12-08-2002, 07:49 AM
Your example did not work for me in IE 5.5/Windows '98.
Stefan
12-08-2002, 09:24 AM
Originally posted by gil davis
Your example did not work for me in IE 5.5/Windows '98.

Crap sorry, forgot about that IE bug. Thanks for pointing it out.

The CSS should be like this

.imglinks a span {display:none;}
.imglinks a:hover {border-color:lime} /*IE bugfix*/
.imglinks a:hover span {display:block; position:absolute; width:200px; top:200px; left:50%; margin:0 0 0 -100px;}

If you don't add a border-color to the a:hover the poup fails to appear. And no, you don't actually need a border... just a color..
Very logical isn't it :rolleyes: :D

Anyway, that fixes it in IE 6 (and IE 5.5 IIRC, nag at me it if doesn't, don't feel like rebooting right now to try it out)
Zach Elfers
12-08-2002, 01:38 PM
You can also do:

<a href="page.html"><img src="imge.gif" onMouseOver="document.linkdescrip.style.display = 'block';" onMouseOut="document.linkdescrip.style.display = 'none';"></a>

<span id="linkdescrip" name="linkdescrip" style="display:none;">
This link is about...
</span>

I'm not sure if that will work. I am not sure if the document.linkdescrip.style would refer to an ID or NAME attribute, so I added both.
Rick Bull
12-08-2002, 04:50 PM
It would refer to the name, you use document.getElementById for IDs.
minulescu
12-08-2002, 05:22 PM
thanks guys, it works perfect.