[RESOLVED] CSS Layer Popup on mouseover...
say I have something like this for a layer:
Code:
div.image {
position:absolute; visibility:hidden;
width:200px; left:10; top:10; z-index:500;
font-size:12px;
background-color: white;
border: 3px solid;
border-color: black;
z-index:500;
}
how would I make it appear / disappear on mouseover of a link
I dont want anything fancy in the layer (like links etc) just a picture to
appear near the mouse (and make sure its visible ;) )
do I need to use javascript? or can this all be done with CSS?
thanks!
Re: CSS Layer Popup on mouseover...
ok im close... using examples I have found I can get the image to appear/disappear...
great.. but I can figure out how to make it appear near the link? offset a bit or something...
when i start messing with the position: and change it to relative... it makes the link word move.. no good! lol
Code:
<HTML>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=Windows-1252">
<style type="text/css">
<!--
body {position: relative; background: white; margin: 0; padding: 0;}
div#links a { text-align: left; font: bold 1em sans-serif;}
div#links a img {height: 0; width: 0; border-width: 0;}
div#links a:hover img {
position: absolute;
top: 190px;
left: 55px;
height: 40px;
width: 40px;
border-width: 1px;
border-color: red}
div#links a:hover {color: red; border-width: 1px}
-->
</style>
</head>
<body>
<p>this is a test. hover over <div id="links"><a href="">Test<img src="static_snow.gif"></a></p>
</body>
</html>
Re: CSS Layer Popup on mouseover...
ok.. wait.. sorry lol
it just clicked that the image is part of the Link.. therefore u could click the image
forget it.. I need some javascript I guess!
Re: CSS Layer Popup on mouseover...
Make the image a background instead... less markup = good ;)
And where is your closing </div> ? :confused:
Code:
/* CSS: */
#links a
{
padding-right: 42px; /* 40px plus 2px spacing */
background: white;
}
#links a:hover
{
background: white url('static_snow.gif') center right no-repeat;
}
HTML:
HTML Code:
<body>
<p id="links">this is a test. hover over <a href="">Test</a></p>
</body>
Re: CSS Layer Popup on mouseover...
well. that does work .. sort of...
but if u add text after the link.. there is a space where the image is ...
and the image is only the height of the text....
I want the image to appear.. like "Floating" over other stuff....
so I think I have to use JScript.. right?
Re: CSS Layer Popup on mouseover...
yeah, that would be easier
Re: CSS Layer Popup on mouseover...
ok.. found a good script. thanks!
