www.webdeveloper.com
Results 1 to 7 of 7

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

  1. #1
    Join Date
    Sep 2012
    Posts
    4

    resolved [RESOLVED] Rollover Image Swap Map without Java?

    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!

  2. #2
    Join Date
    Aug 2011
    Posts
    18
    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

  3. #3
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,478
    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

  4. #4
    Join Date
    Sep 2012
    Posts
    4
    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

  5. #5
    Join Date
    Sep 2012
    Posts
    4
    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

  6. #6
    Join Date
    Aug 2011
    Posts
    18
    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

  7. #7
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,478
    No problem, you're very welcome.

    coothead

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles