[RESOLVED] Rollover Image Swap Map without Java?

**NinjaKitten** · 09-04-2012 04:42 AM

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

HTML Code:

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

**alann** · 09-04-2012 01:27 PM

I believe your trying to create a set of images that when the user rolls their mouse over each image, a different image appears. If this is true, you will want to look at an image sprite and use x/y coordinates to find the part of the image to look at for each state.

http://css-tricks.com/snippets/css/b...as-css-sprite/ This will show you the correct positioning. Below is an example with comments on how to use with CSS.

HTML Code:

a{
background: ('path/to/sprite.gif') no-repeat 0 0 scroll transparent;/*this gives the basic definition of the sprite and tells it to not-repeat inside the container, 0 0 is x y coords but listed as distance from left and top corner. transparent can be used to have no color in the box behind the image or a color can be used here*/
height: 20px;/*this makes the a tag show everything in 20px or less high*/
width: 20px; /*this makes the a tag show everything in 20px or less wide*/
}
a:hover{/*this creates a hover state for the a tag*/
background-position: 0 -120px;/*this uses the background image from the original a{} above but tells the browser to look at new coordinates*/
}

If you have access to photoshop, it will help out greatly since you can use guides to see the position.

I hope this helps.
Alan

**coothead** · 09-04-2012 02:44 PM

Hi there NinjaKitten,

and a warm welcome to these forums.

Try it like this...

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">

<title>Karma Kitty</title>

<style type="text/css">
#karmaKitty {
    position:relative;
    float:right;
    width:190px;
    height:24px;
    padding:60px 0 0;
    margin:228px 322px 0 0;
    list-style-type:none;
 }
#karmaKitty li {
    position:relative;
    z-index:1;
    float:left;
    width:25px;
    height:25px;
 }
#karmaKitty a {
    position:relative;
    display:none;
    width:100%;
    height:100%;
    line-height:25px;   
    font-size:9px;
    text-align:center;
 }
#karmaKitty span {
    position:absolute;
    top:0;
    left:0;
    display:none;
    width:100%;
    height:100%;
    background-image:url(http://img853.imageshack.us/img853/7723/karmakitty.png);
    background-position:0 -60px;
 }
#karmaKitty #karmaK6 {
    position:absolute;
    top:0;
    left:0;
    z-index:0;
    width:190px;
    height:84px;
    background-image:url(http://img853.imageshack.us/img853/7723/karmakitty.png);
    background-position:0 0;

 }
#karmaK1:hover~#karmaK6 {
    background-position:0 -84px; 
}
#karmaK2:hover~#karmaK6 {
    background-position:0 -168px; 
 }
#karmaK3:hover~#karmaK6 {
    background-position:0 -252px; 
 }
#karmaK4:hover~#karmaK6 {
    background-position:0 -336px; 
 }
#karmaK5:hover~#karmaK6 {
    background-position:0 -420px; 
 }
#karmaKitty li:hover  a { 
    display:block;
 }
#karmaKitty li:hover  span {
    display:block;
    background-position:0 -144px;
 }
</style>

</head>
<body>

<ul id="karmaKitty">
 <li id="karmaK1"><a href="one.html">1k<span></span></a></li>
 <li id="karmaK2"><a href="two.html">2k<span></span></a></li>
 <li id="karmaK3"><a href="three.html">3k<span></span></a></li>
 <li id="karmaK4"><a href="four.html">4k<span></span></a></li>
 <li id="karmaK5"><a href="five.html">5k<span></span></a></li>
 <li id="karmaK6"></li>
</ul>

</body>
</html>

coothead

**NinjaKitten** · 09-04-2012 02:54 PM

Thanks Alan, but Ive actually already modified the code how I need it to work with my own image. xD

My problem is I want to change the display location of the a:hover bg without actually changing the location of a.

Here are some pics to illustrate:

Current result from code:
(when hovering #karmaK1 a)
http://i.imgur.com/AgZql.png

(when hovering #karmaK2 a)
http://i.imgur.com/ZutKN.png

Result I'm looking to accomplish:
(when hovering #karmaK1 a)
http://i.imgur.com/ocjN3.png

(when hovering #karmaK2 a)
http://i.imgur.com/OSiOG.png

Thanks

**NinjaKitten** · 09-04-2012 02:57 PM

Oops sorry, looks like I was making my reply as you replied coot xD

Thanks a ton, that worked perfectly!

(sorry for double post, looks like we cant edit our posts) xD

**alann** · 09-04-2012 03:03 PM

Here is a tutorial. I think the second image map with the countries is something your looking for in yours.

http://www.tankedup-imaging.com/css_dev/rollover.html

**coothead** · 09-04-2012 03:04 PM

No problem, you're very welcome.

coothead

Thread: [RESOLVED] Rollover Image Swap Map without Java?

Thread Tools

Display

[RESOLVED] Rollover Image Swap Map without Java?

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions