A little help with CSS Popups

[mike_kennedy]

Hi, I've been trying to have a table, with my details in, popup somewhere on the screen when I hover over an image.

Now I'm using this code for the image so that once you hover over it, it changes position {thus changing the picture } :

div.detail { position:absolute; left:50%; top:155px; left:420px; width:89px; height:20px; z-index:2; }
a.details, a:link.details { width:89px; height:20px; display:block;
background-image:url("URL of the image"); background-position:90px;}
a:hover.details {background-position:0px;}


Here's the code for the "popup" :

a:link,
a:visited,
a:active{color: 000000; font-family:arial, verdana, tahoma, sans-serif;font-size:10px;}
a span{display:none;}
a:hover span {display: block;
position: absolute; top: 250px; left: 400px; width:200px;
padding: 3px; margin: 5px; z-index: 5;
color: black; background: white; filter:none;
font-size: 10px;font-family: arial, verdana, tahoma, sans-serif;}

Now whenever I try to use <span>Details</span> it just doesn't seem to want to hide the details box when I'm not hovering the image.

Now I'm no master whizz at CSS, but it's got to be something with the original a.hover.details bit. The only problem is that I don't know of any other way to display 2 different pictures on a hover and also bring up a table.


Any help on this would be greatly appreciated as I'm rather stumped.

[mike_kennedy]

Ok, I can see there's no help for me for what I'm asking.

So what if I used some other type of code to hover over an image?

The only problem I'm thinking would be that the source for the <span> would still not show.

[loui19]

Mike,
Go to http://www.dynamicdrive.com/ and take a look at DHTML ToolTip.

http://www.dynamicdrive.com/dynamici...tmltooltip.htm

I think it will do what you are looking for.

Tony

[mike_kennedy]

Originally Posted by loui19

Mike,
Go to http://www.dynamicdrive.com/ and take a look at DHTML ToolTip.

http://www.dynamicdrive.com/dynamici...tmltooltip.htm

I think it will do what you are looking for.

Tony

Thanks.

I have been to that website before (for the Tab Menu) but it doesn't do what I'm looking for as it's got Javascript in it and I'm looking for just plain HTML / CSS popups.

The code I've posted actually works, just not with me.

[mike_kennedy]

Just wondering... would it work if I simply referred to the Div when using the links?

For example:

a:link.details,
a:visited.details.details,
a:active.details{color: 000000; font-family:arial, verdana, tahoma, sans-serif;font-size:10px;}
a span.details{display:none;}
a:hover span.details {display: block;
position: absolute; top: 250px; left: 400px; width:200px;
padding: 3px; margin: 5px; z-index: 5;
color: black; background: white; filter:none;
font-size: 10px;font-family: arial, verdana, tahoma, sans-serif;}


Y'know aaaaany help (non-javascript) would really be appreciated. But it seems none of you people really want to help me.

[_Aerospace_Eng_]

Lets think about this for a second. You showed us your CSS. Okay thats fine. But one thing you haven't showed us is your html. How do we know that your html is setup properly?

[mike_kennedy]

There's no HTML what so ever, simply because it doesn't need it as it's not a webpage.

All there is is CSS overlays.

[_Aerospace_Eng_]

Umm a link is html, this is html

<a href="#"><span><img src="yourimage.jpg"></span></a>

In your CSS, try a:link span {display:none;} as well. Personally I like this one better http://moneytreesystems.com/css/picpopup.html

[mike_kennedy]

Originally Posted by _Aerospace_Eng_

Personally I like this one better http://moneytreesystems.com/css/picpopup.html

Ok, so I tried the exact source from that website and...... still the same problem. Either not showing up or no hover over

[_Aerospace_Eng_]

Perhaps you should post a link to your site.