[RESOLVED] CSS Layer Popup on mouseover...

**Static** · Jan 18th, 2006, 08:25 AM

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!

**Static** · Jan 18th, 2006, 09:17 AM

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>

**Static** · Jan 18th, 2006, 09:21 AM

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!

**penagate** · Jan 18th, 2006, 09:28 AM

Make the image a background instead... less markup = good

And where is your closing </div> ?

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>

**Static** · Jan 18th, 2006, 10:28 AM

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?

**penagate** · Jan 18th, 2006, 10:39 AM

yeah, that would be easier

**Static** · Jan 18th, 2006, 01:56 PM

ok.. found a good script. thanks!

Thread: [RESOLVED] CSS Layer Popup on mouseover...

Thread Tools

Display

[RESOLVED] CSS Layer Popup on mouseover...

Re: CSS Layer Popup on mouseover...

Re: CSS Layer Popup on mouseover...

Re: CSS Layer Popup on mouseover...

Re: CSS Layer Popup on mouseover...

Re: CSS Layer Popup on mouseover...

Re: CSS Layer Popup on mouseover...

Posting Permissions