I’ll start by saying I almost have no idea what I’m doing. I’m extremely new to CSS and everything I do know I’ve taught myself by googling and reading through others’ codes.
What I’m trying to accomplish is a rollover image swap map without the use of java, as the site Im using it on does not allow java.
I’ve looked all over and haven’t been able to find one without java, so now I’m here. x.x
I have CSS for an image map so I guess my question is, is there a property I can input to define the a:hover bg image location so I can move it up and to the left from its original location to fully overlay the current visible image? Or is there some other method to accomplish this? Or maybe its just not possible at all? :s
Any help would be very much appreciated. c:
Here are my current codes:
CSS
[CODE].karmaPos {
position: absolute;
}
#karmaKitty {
width: 190px;
height: 84px;
background: url(http://img853.imageshack.us/img853/7723/karmakitty.png) no-repeat;
right: 290px;
top: 220px;
}
#karmaKitty li {margin: 0; padding: 0; list-style: none; display: block; position: absolute;}
#karmaKitty a {display: block; text-indent: -9999px; text-decoration: none;}
#karmaK1 {left: 0px; top: 60px; width: 190px; height: 84px;}
#karmaK2 {left: 25px; top: 60px; width: 190px; height: 84px;}
#karmaK3 {left: 50px; top: 60px; width: 190px; height: 84px;}
#karmaK4 {left: 75px; top: 60px; width: 190px; height: 84px;}
#karmaK5 {left: 100px; top: 60px; width: 190px; height: 84px;}
#karmaK1 a {height: 25px;}
#karmaK2 a {height: 25px;}
#karmaK3 a {height: 25px;}
#karmaK4 a {height: 25px;}
#karmaK5 a {height: 25px;}
#karmaK1 a:hover {background: url(http://img853.imageshack.us/img853/7723/karmakitty.png) 0px -84px no-repeat;}
#karmaK2 a:hover {background: url(http://img853.imageshack.us/img853/7723/karmakitty.png) 0px -168px no-repeat;}
#karmaK3 a:hover {background: url(http://img853.imageshack.us/img853/7723/karmakitty.png) 0px -252px no-repeat;}
#karmaK4 a:hover {background: url(http://img853.imageshack.us/img853/7723/karmakitty.png) 0px -336px no-repeat;}
#karmaK5 a:hover {background: url(http://img853.imageshack.us/img853/7723/karmakitty.png) 0px -420px no-repeat;}
[code=html]<ul id=”karmaKitty” class=”karmaPos”>
<li id=”karmaK1″><a href=”1#”>+1 Karma</a></li>
<li id=”karmaK2″><a href=”2#”>+2 Karma</a></li>
<li id=”karmaK3″><a href=”3#”>+3 Karma</a></li>
<li id=”karmaK4″><a href=”4#”>+4 Karma</a></li>
<li id=”karmaK5″><a href=”5#”>+5 Karma</a></li>
</ul>
Thanks!