Results 1 to 3 of 3

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

  1. #1
    Join Date
    Jun 2007

    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.
    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

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    <html xmlns="http://www.w3.org/1999/xhtml">
    	<title>Creating Pop-ups</title>
    	<meta http-equiv="content-type" content="text/html;charset=utf8" />
    <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}
    <div id="frame">
    Frame Image
    <div id="leftbar">
    <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" />
    Last edited by waveform; 03-30-2013 at 10:50 AM.

  2. #2
    Join Date
    Jun 2007
    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.

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

  3. #3
    Join Date
    Jun 2007
    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