Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New to the CF scene
    Join Date
    Nov 2005
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    A little help with CSS Popups

    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.

  • #2
    New to the CF scene
    Join Date
    Nov 2005
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #3
    New to the CF scene
    Join Date
    Jul 2002
    Location
    Northeast
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up

    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

  • #4
    New to the CF scene
    Join Date
    Nov 2005
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote 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.

  • #5
    New to the CF scene
    Join Date
    Nov 2005
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Just a little curious...

    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.

  • #6
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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?

  • #7
    New to the CF scene
    Join Date
    Nov 2005
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #8
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Umm a link is html, this is html
    Code:
    <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

  • #9
    New to the CF scene
    Join Date
    Nov 2005
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote 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

  • #10
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Perhaps you should post a link to your site.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •