How To Create Hover Regions On Sprite?

411 Views Asked by johny why At 07 April 2025 at 19:01

This code is intended to create two linked regions (for the purpose of hovering), on the top 50px of page, and next lower 50px. So that, as you move your mouse vertically, you hit the two hovers, and the img shifts laterally.

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

I would also be fine with accomplishing this by re-positioning a background image, or with an image map.

How can I re-size a link (containing an img) so that my link hover only happens over part of the image?

Original Q&A

There are 2 best solutions below

sandeep On 02 March 2011 at 04:26

It's good to give sprite images on the background of the tag. Example:

.read {
        background: url('../../img/home/home-assets.png')no-repeat  0 0;
    }
.read:hover {
        background: url('../../img/home/home-assets.png')no-repeat  0 -50px;
    }

you have to define the background position in css. for more information read these: http://www.ehousestudio.com/blog/view/css_sprite_navigation_tutorial , http://css-tricks.com/css-sprites/

Muhd On 02 March 2011 at 03:26

For one thing, the img element will not be selected by a#a1 img:hover or a#a2 img:hover because img is not nested with either of the a tags. For another, what you want is when you hover over some element other than the image itself, shift the image, but this is not something you can do in CSS alone to my knowledge. You probably want to be using javaScript for this sort of functionality.

How To Create Hover Regions On Sprite?

There are 2 best solutions below

Related Questions in HTML

Related Questions in CSS

Related Questions in HOVER

Related Questions in SPRITE

Related Questions in REGIONS

Trending Questions

Popular # Hahtags

Popular Questions