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

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.

Thread: Images and hover

Thread Tools

Display

Images and hover

Cool, but ...

Re: Cool, but ...

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions