PDA

Click to See Complete Forum and Search --> : css hover layer

nightster
02-15-2007, 05:22 PM
Hello,

I am using the following script:

http://tutorials.alsacreations.com/affiche/

to make a float over layer when an image is hovered over.

It works great, except that this script always displays the layer in exactly the same place on the screen - a fixed place.

I would like the image to be displayed at the point of the cursor.

I have seen it loads, but can't find an example/tutorial anywhere.

Any ideas? Thanks!
KDLA
02-16-2007, 07:18 AM
You'll need to change to this:

a.float {
text-decoration: none; /* definition for the link that will display the layer */
}
a.float:hover {
background: none; /* correction for an IE bug*/
}
a.float span { /* definition of <span> tag included in <a> */
display: none;
}
a.float{
position:relative; /*this is the key*/
z-index:24;
text-decoration:none}

a.float:hover{z-index:25;}

a.float span{display: none}

a.float:hover span{ /*the span will display just on :hover state*/
display: inline;
position: absolute;
top: 0; /* layer's place and dimension that you can change at will */
left: 20px;
width: 200px;
height: 100px;
text-align: center;}

HTML

<body>
<a href="" class="float">display layer<span>text and images can be placed here</span></a>
</body>
nightster
02-16-2007, 07:46 AM
Thanks, sorted