[RESOLVED] Rollover Image Swap Map without Java?

@NinjaKittenSep 04.2012

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]

[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>[/code]

Thanks!

to post a comment

CSS

6 Comments(s) _↴

@alannSep 04.2012 — #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/basic-link-rollover-as-css-sprite/ This will show you the correct positioning. Below is an example with comments on how to use with CSS.

[code=html]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*/
 }[/code]

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

@cootheadSep 04.2012 — #Hi there NinjaKitten,

and a warm welcome to these forums. ?

Try it like this...

[color=navy]&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd"&gt;
 &lt;html lang="en"&gt;
 &lt;head&gt;
 
 &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
 &lt;meta name="language" content="english"&gt; 
 &lt;meta http-equiv="Content-Style-Type" content="text/css"&gt;
 
 &lt;title&gt;Karma Kitty&lt;/title&gt;
 
 &lt;style type="text/css"&gt;
 #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;   <br/>
 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;
 }
 &lt;/style&gt;
 
 &lt;/head&gt;
 &lt;body&gt;
 
 &lt;ul id="karmaKitty"&gt;
 &lt;li id="karmaK1"&gt;&lt;a href="one.html"&gt;1k&lt;span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
 &lt;li id="karmaK2"&gt;&lt;a href="two.html"&gt;2k&lt;span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
 &lt;li id="karmaK3"&gt;&lt;a href="three.html"&gt;3k&lt;span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
 &lt;li id="karmaK4"&gt;&lt;a href="four.html"&gt;4k&lt;span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
 &lt;li id="karmaK5"&gt;&lt;a href="five.html"&gt;5k&lt;span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
 &lt;li id="karmaK6"&gt;&lt;/li&gt;
 &lt;/ul&gt;
 
 &lt;/body&gt;
 &lt;/html&gt;
 [/color]

[i]coothead[/i]

@NinjaKittenauthorSep 04.2012 — #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:

[B]Current result from code:[/B]

[I](when hovering #karmaK1 a)[/I]

http://i.imgur.com/AgZql.png

[I](when hovering #karmaK2 a)[/I]

http://i.imgur.com/ZutKN.png

[B]Result I'm looking to accomplish:[/B]

[I](when hovering #karmaK1 a)[/I]

http://i.imgur.com/ocjN3.png

[I](when hovering #karmaK2 a)[/I]

http://i.imgur.com/OSiOG.png

Thanks ?

@NinjaKittenauthorSep 04.2012 — #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

@alannSep 04.2012 — #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

@cootheadSep 04.2012 — #[indent]No problem, you're very welcome. ?[/indent]

[i]coothead[/i]

Also in #CSS _↴

CSS Recomendations for a site..Navigation Bar Help Footer shadow and page height

Success!

Help @NinjaKitten spread the word by sharing this article on Twitter...

Tweet This

[RESOLVED] Rollover Image Swap Map without Java?

6 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

[RESOLVED] Rollover Image Swap Map without Java?

6 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

6 Comments(s) _↴

Also in #CSS _↴