www.webdeveloper.com
Results 1 to 3 of 3

Thread: [RESOLVED] Very basic a.hover- pop up - not working

Hybrid View

  1. #1
    Join Date
    Jun 2007
    Location
    USA
    Posts
    30

    resolved [RESOLVED] Very basic a.hover- pop up - not working

    Getting an image to pop up at another location on hover over

    I don't understand what I'm doing wrong, I've followed everything on this sample page from my book with the exception that I'm not using the href to link to an external page. The author's page works fine: Also note the author is not using semi colons at the end of her declarations, but they still work. If you view the source of the sample page at the below link, and then look at my page, it's identical (though I'm using id="leftbar for my div ID rather than id="minis) as the author is using.
    Code:
    http://www.elizabethcastro.com/html6ed/examples/css-effects/popups.html
    I've decided to ditch my external CSS file and also the strict declaration to better match the author's page to eliminate any differences.
    My page is still it's not working.


    My page code is:
    Note: My position:absolute settings are not exact, I'm just trying to get the second image to move anywhere on hover at this point.
    And I realize using java script is better for popups, but I'm just trying to understand why this way of doing it is not working


    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    	<title>Creating Pop-ups</title>
    	<meta http-equiv="content-type" content="text/html;charset=utf8" />
    </head>
    
    <style type="text/css">
    img.thumb {border:none}
    div#leftbar a:hover {background:white}
    div#leftbar img.big {height:0; width:0; border-width:0}
    div#leftbar a:hover img.big {position:absolute; top:100px left:20px; height:100px; width:100px; border:none}
    #frame {position:absolute; background-color: yellow; top:16px; left:118px; height:480px; width:480px; border:2px solid red}
    p {margin-bottom:26px}
    </style>
    
    <body>
    <div id="frame">
    Frame Image
    </div>
    
    <div id="leftbar">
    <p>
    <img class="thumb" src="white-stars.gif" width="100" height="100" alt="sample" />
    <img class="big" src="yellow-stryp-back.jpg" width="100" height="100" alt="sample" />
    </p>
    
    </div>
    Last edited by waveform; 03-30-2013 at 11:50 AM.

  2. #2
    Join Date
    Jun 2007
    Location
    USA
    Posts
    30
    By the way, here is a screenshot of what I'm seeing when i load the page in my browser.
    Everything is fine, except when I hover over the star, I don't get the yellow image popping up in the frame or anywhere for that matter.

    Screenshot
    Last edited by waveform; 03-30-2013 at 01:05 PM.

  3. #3
    Join Date
    Jun 2007
    Location
    USA
    Posts
    30
    EDIT - Working

    My apologies
    After validating the doc, I realized I did not add the styling inside the head element. What a foolish mistake.
    That darn Validater helped out again! I should have checked that first.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles