How can I have an image "float" above another image or other elements with css?

[jollyroger]

I have a page that I want to have a little gif image (40 x 40) float
or hover above the page content in a fixed position, something similar
to those dhtml popups you see on some sites that always get in the
way

I would like to also make it a link to another page within my site.

Can someone please tell me if this is possible using css and cross
browser compatible?

thanks!!

 

[dorayme]

I have a page that I want to have a little gif image (40 x 40) float
or hover above the page content in a fixed position, something similar
to those dhtml popups you see on some sites that always get in the
way

I would like to also make it a link to another page within my site.

Can someone please tell me if this is possible using css and cross
browser compatible?

thanks!!

You could do something like:

<http://members.optushome.com.au/droovies/test/floatingImg.html>

The link bit will be evident with the "hand" icon only for the
part of the image that is clear of the text. This can be changed
and make it always evident by changing the z-index but this then
makes the image block out the text, something you may not want.

 

[Jonathan N. Little]

You could do something like:

<http://members.optushome.com.au/droovies/test/floatingImg.html>

Need to fix:

#floatingImg {

width: 40; /* <- 40px */
height:40; /* <- 40px */
border:0;
}

No red square.

 

[Ben C]

You could do something like:

<http://members.optushome.com.au/droovies/test/floatingImg.html>

The link bit will be evident with the "hand" icon only for the
part of the image that is clear of the text. This can be changed
and make it always evident by changing the z-index but this then
makes the image block out the text, something you may not want.

Unfortunately your example with z-index:-1 hits a Firefox bug. The red
square should go behind the text but Firefox puts it right behind the
body background and you can't see it at all.

Opera and Konqueror draw it in the right place, but don't let you click
on it, I suppose on the grounds that the text is in the way so the red
box isn't directly under the mouse, even the bits of it you can see.

 

[dorayme]

Need to fix:

#floatingImg {

width: 40; /* <- 40px */
height:40; /* <- 40px */
border:0;
}

No red square.

Would I leave out the units? <g>

Anyway, the red square not showing? Why not? The img happened to
be on the server and it is called cope-003.jpg so I just used it.
Shows up in my browsers?


Try

<http://members.optushome.com.au/droovies/test/floatingImg2.html>

with a freshly prepared square and a gif and the right size...

To tell the truth, I have no idea if this is best way of
achieving what OP wants, it was just a thought. Not something I
have ever needed or done. What I would not mind boning up on is
the idea of an image through which one can see stuff behind. that
might come in handy when I have to time to be fancier...

 

[dorayme]

What I would not mind boning up on is
the idea of an image through which one can see stuff behind. that
might come in handy when I have to time to be fancier...

Forget this... A thoughtless wish here - if this z-index thing
worked right, this would be it granted... how can one have been
making stuff for as long as I have and never used z-index? It
sounds so sexy too. I must make a point of using it somewhere.

 

[dorayme]

<http://members.optushome.com.au/droovies/test/floatingImg.html>

and now also

Unfortunately your example with z-index:-1 hits a Firefox bug. The red
square should go behind the text but Firefox puts it right behind the
body background and you can't see it at all.

Opera and Konqueror draw it in the right place, but don't let you click
on it, I suppose on the grounds that the text is in the way so the red
box isn't directly under the mouse, even the bits of it you can see.

So! Yes, you are right, now I test it in FF. I only looked at
Safari to be honest. I notice iCab behaves like Safari, red sq
shows, hand icon and clickable where the image pokes out at top
under many conditions.