Lee540
August 19, 2011, 3:48pm
1
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
PaulOB
August 19, 2011, 4:12pm
2
Hi, welcome to Sitepoint
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.