Images and hover

liunx · Jan 9, 2008

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: 
 
<a class="postlink" href="http://www27.brinkster.com/minulescu/project">http://www27.brinkster.com/minulescu/project</a>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=http://www.webdeveloper.com/forum/archive/index.php/""><img 1> The name of page1</a> 
<a href=http://www.webdeveloper.com/forum/archive/index.php/""><img 2> The name of page2</a> 
<a href=http://www.webdeveloper.com/forum/archive/index.php/""><img 3> The name of page3</a> 
<a href=http://www.webdeveloper.com/forum/archive/index.php/""><img 4> The name of page4</a> 
<a href=http://www.webdeveloper.com/forum/archive/index.php/""><img 5> The name of page5</a> 
</div> 
 
</body> 
</html>Your example did not work for me in IE 5.5/Windows '98.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)You can also do: 
 
<a href=http://www.webdeveloper.com/forum/archive/index.php/"page.html"><img src="imge.gif" onMouseOver="document.linkdescrip.style.display ='block';" onMouseOut="document.linkdescrip.style.display = 'none';"></a> 
 
 
This link is about... 
 
 
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.It would refer to the name, you use document.getElementById for IDs.thanks guys, it works perfect.

Images and hover

liunx

Guest