Hover Images, struggling to find a simple way to get more than one.

Discussion in 'CSS' started by Casual Friday, Jan 29, 2008.

0
  1. #1
    Hey, im just looking at putting some images on my website that change with the users mouse hovering over them, nothing spectacular. With google's help ive managed to figure out the Css code, for one image like this but im struggling to see an easy way to get more images with the same spec without repeating myself in endless lines of code. 

    
<html>

<head>
<title>Button attempt</title>
<style type="text/css">

.btnContinue {
width: 80px;
height: 10px;
display: block;
font-size: 10px;
text-decoration: none;
background-repeat:no repeat;
background-image:url(image link here); 
}

.btnContinue:hover {
background-image:url(image link here);
}


</style>
</head>

<body>

<a class="btnContinue" href="##">&nbsp;</a>


</body>

</html>
    Code (markup):

    Is there a simple method to use these styles on future images, without starting btnContinue2, btnContinue3 etc...

    thanks :)
     
    Casual Friday, Jan 29, 2008 IP
  2. willhaynes

    willhaynes Active Member

    Messages:
    1,197
    Likes Received:
    34
    Best Answers:
    0
    Trophy Points:
    90
    #2
    you could just apply the style to all of them (seperate the classes by a comma)....

    .btncontinue1, .btmcontinue2, .btmcontinue3 {
    width: 80px;
    height: 10px;
    display: block;
    font-size: 10px;
    text-decoration: none;
    background-repeat:no repeat;
    background-image:url(image link here);
    }

    and the same with the hover attribute.

    or another way to do it would be to re-name all the classes to the same thing. but that wouldn't work if you want to add individual style to each of them as well.
     
    willhaynes, Jan 29, 2008 IP
  3. Possibility

    Possibility Peon

    Messages:
    350
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Would each of the images change to the same image when hovered over?
     
    Possibility, Jan 29, 2008 IP
  4. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #4
    That would be the only thing you'd change, unless they're also appearing in different areas too. You could put the a's in a div or some box and give the class (or an id) to that box:
    <div id="continue">
    <a id="foo" href="#"></a>
    <a id="bar" href="#"></a>
    </div>
    
#continue a {
  width: 80px;
  height: 10px;
  display: block;
  font-size: 10px;
  text-decoration: none;
  background-repeat:no-repeat;
}

#foo {
 background-image: url(foo.jpg);
}
    #foo:hover {
      background-image: url(foo2.jpg);
    }
#bar {
  background-image: url(bar.jpg);
}
    #bar:hover {
       background-image: url(bar2.jpg);
    }
    Code (markup):
     
    Stomme poes, Jan 31, 2008 IP
  5. imsoflyoh

    imsoflyoh Guest

    Messages:
    92
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    just put in sepreate one if that dont help go to w3schools.com
     
    imsoflyoh, Jan 31, 2008 IP
  6. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #6
    Because of the load delay on first mouse-over, I wouldn't bother using separate images. The key to CSS mouseovers is that you are using a background image. Since you can position a background image to 'slide it around', with image content larger than the container being hidden, you can use ONE image for all your buttons instead of wasting time, bandwidth and server overhead on multiple files.

    Before I put up code for that though - are you looking at using images INSTEAD of link text, or UNDER link text? Either way the text SHOULD be there so that screen readers and search engines (which tend to ignore attributes like ALT) have something to look at.
     
    deathshadow, Feb 1, 2008 IP