...

View Full Version : A little help with CSS Popups



mike_kennedy
11-25-2005, 12:40 AM
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
11-27-2005, 12:48 PM
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
11-27-2005, 05:17 PM
Mike,
Go to http://www.dynamicdrive.com/ and take a look at DHTML ToolTip.

http://www.dynamicdrive.com/dynamicindex5/dhtmltooltip.htm

I think it will do what you are looking for.

Tony

mike_kennedy
11-27-2005, 07:10 PM
Mike,
Go to http://www.dynamicdrive.com/ and take a look at DHTML ToolTip.

http://www.dynamicdrive.com/dynamicindex5/dhtmltooltip.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
11-28-2005, 01:07 PM
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_
11-28-2005, 02:01 PM
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
11-28-2005, 11:34 PM
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_
11-28-2005, 11:42 PM
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
11-29-2005, 01:10 AM
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 :mad:

_Aerospace_Eng_
11-29-2005, 05:30 AM
Perhaps you should post a link to your site.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum