The goal of this code is to create two interconnected areas on the top 50px of a page that will trigger a hover effect when the mouse moves vertically. The intention is for an image to shift laterally as you hit these two hover regions.
<html>
<head>
<style type="text/css>
a {display:block; left:0; height:50px; width:300px;}
a#a1{top:50;}
a#a2{top:100;}
a img {position: absolute; top:0; left:0; width:300px;}
a#a1 img:hover {left: 50px;}
a#a2 img:hover {left: 100px;}
</style>
</head>
<body>
<a id="a1" /><a id="a2" /><img src="smiley.gif" />
</body>
</html>
An alternative method could involve re-positioning a background image or using an image map.
Is there a way to resize a link (with an img) so that the hover effect only occurs over a specific portion of the image?