Results 1 to 3 of 3

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

Threaded View

  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 11:50 AM.

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