Newbie - Roll over text, image popup in fixed location

Hi all

Newbie, looking for some advice.

I want to be able to rollover text and have images appear in a fixed location on the page, no matter where the text is located.

I have been able to get roll over text, image pop up to work but the image is a set point relative to the mouse.

I hope someone can help, I can provide further information if required.

I am using a javascript and css

Thanks

Lee

Hi, welcome to Sitepoint :slight_smile:

If you want it in a fixed position then you will need to use position:fixed and then it is always placed in relation to the viewport and not its nearest positioned ancestor.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.popup {
	zoom:1.0;
	position:relative;
	text-decoration:none;
	background:#ccc;
	color:#f00;
}
.popup span {
	position:fixed;
	top:20px;
	left:20px;
	width:200px;
	padding:10px;
	background:#fcf;
	font-weight:bold;
	text-align:center;
	border:10px solid #000;
	border-radius:10px;
	left:-999em;
	z-index:990;
}
.popup:hover {visibility:visible}
.popup:hover span {left:20px;}
* html .popup span {position:absolute;}
</style>
</head>
<body>
<p>scrolling content</p>
<p>scrolling content</p>
<p>scrolling content</p>
<p>scrolling content</p>
<p>scrolling content</p>
<p>scrolling content</p>
<p>scrolling content</p>
<p>scrolling content</p>
<p>scrolling content</p>
<p><a class="popup" href="#">..................................test popup <span>This is the message box</span></a> </p>
<p>scrolling content</p>
<p>scrolling content</p>
<p>scrolling content</p>
<p>scrolling content</p>
<p>scrolling content</p>
<p>scrolling content</p>
<p>scrolling content</p>
<p>scrolling content</p>
<p>scrolling content</p>
<p>scrolling content</p>
<p>scrolling content</p>
<p><a class="popup" href="#">..................................test popup <span>This is the second message box showing in the same position</span></a> </p>
<p>scrolling content</p>
<p>scrolling content</p>
<p>scrolling content</p>
<p>scrolling content</p>
<p>scrolling content</p>
<p>scrolling content</p>
<p>scrolling content</p>
</body>
</html>


IE6 doesn’t understand position:fixed and gets position:absolute instead.