Menu
[B]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 [I]id=”leftbar[I]id=”minis
[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.
[B][U]My page code is:
Note: [I]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>
