PDA

View Full Version : How can I change this to work with multiple images?



htcilt
Feb 24th, 2010, 05:44 PM
I'm using the code from here:
http://www.webcredible.co.uk/user-friendly-resources/css/rollover-buttons.shtml

to create css rollover images/buttons. The example uses the same button for each button's rollover state. How can I change it to allow different rollover images for each button?

I could just copy all the css for each button, but I'm sure it much be possible by placing each button in an extra div, then applying a different class name to each new div.

Excavator
Feb 24th, 2010, 06:05 PM
Hello htcilt,
I've never messed with this method because I never liked it. I doesn't make sense to have your normal state button as a background and your hovered button in the markup, at least not to me. I don't see the point.
If you want different images for each button, you would need a different id/class for each one. If you only want different rollover states for each button, it looks like all you have to change is the src in the markup.
Do you have images made up already? Have you got some code you've tried but didn't work?

Have a look at a CSS Rollover demo (http://nopeople.com/CSS/CSS_rollover/index.html) I have that is pretty easy to do.

htcilt
Feb 24th, 2010, 08:17 PM
Hi Excavator,

Sorry I dont have any code as yet.
I was after something that would allow be to have several images in a row and a rollover for each. Also the rollover needs to be preloaded to avoid the flash/disappearing effect... but it seems your script addresses that issue too :)

I'll give yours a go and post back :thumbsup:

Excavator
Feb 24th, 2010, 08:32 PM
Hi Excavator,

Sorry I dont have any code as yet.
I was after something that would allow be to have several images in a row and a rollover for each. Also the rollover needs to be preloaded to avoid the flash/disappearing effect... but it seems your script addresses that issue too :)

I'll give yours a go and post back :thumbsup:

There are several CSS rollover menus to look at on that webpage I linked you to. On all of those pages just look at the source to see how it's done.

htcilt
Feb 25th, 2010, 09:57 AM
Almost there with the code.
I'm now trying to add a hyperlink but it keeps appearing at the top. How can I change it to appear at the bottom?

Here is the code so far (I've changed it to list items):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CSS 3 state rollover</title>
<style type="text/css">
#container{
}

.menu {
height:100px;
margin: 0;
padding:0;
}

.menu li, .menu a {
float: left;
list-style-type:none;
}


.rollover1 {
height: 10px;
width: 400px;
margin:0px 8px 0px 0px;
padding:0;
background-color:#545557;
}
.rollover1 a {
display:block;
height: 100px;
width: 400px;
background: url(roll-1.jpg);
margin:0px 0px 0px 0px;padding:0;
}
.rollover1 a:hover {
background: url(roll-1.jpg) bottom;
}
.rollover1 a:active {
background: url(roll-1.jpg) center;
}
</style>
<body>

<div id="container">
<ul class="menu">
<li class="rollover1"><a href="#">Link Here</a></li>

</ul>
</div>
</body>
</html>

For the purpose of the test I'm still using your image:
http://nopeople.com/CSS/CSS_rollover/roll-1.jpg

Excavator
Feb 25th, 2010, 11:07 AM
Stop the text displaying with this
.rollover1 a {
display:block;
height: 100px;
width: 400px;
text-indent: -999px;
background: url(http://nopeople.com/CSS/CSS_rollover/roll-1.jpg);
margin: 0;
padding: 0;
}


vertical/horizontal center with this -

.rollover1 a {
display:block;
height: 100px;
width: 400px;
text-align: center;
line-height: 100px;
background: url(http://nopeople.com/CSS/CSS_rollover/roll-1.jpg);
margin: 0;
padding: 0;
}


bottom with this -

.rollover1 a {
display:block;
height: 20px;
width: 400px;
background: url(http://nopeople.com/CSS/CSS_rollover/roll-1.jpg);
margin: 0;
padding: 80px 0 0 0;
}

htcilt
Feb 25th, 2010, 01:18 PM
Thanks for the reply.
This works fine until the text is increase - it then breaks out of the button borders.

I was hoping to use "position: absolute;bottom:0" on the anchor and "position:relative" on the li, but this didn't work :(