Wednesday, January 30, 2008
Wednesday, January 30, 2008
Here is an example image file:
You see that it has both states for it in the image... faded and full-color rolled. The rollover is achieved with some CSS:
a.kronosNow here is the snippet of HTML that displays the logo itself:
{
display: block;
cursor: default;
width: 112px;
height: 87px;
background: url("client_logos/logo.gif") 0 0 no-repeat;
background-color: #FFF;
text-decoration: none;
float: left;
}
a:hover.kronos
{
background-position: -112px 0;
}
<a class="kronos" href="#"> </a>Now thats cool enough, the image is shifted 1/2 of its width when rolled over. Giving you a rollover effect.
Now, what if you want to display a bunch of different logos in the same manner... that leads to a whole lot of CSS... two chunks for EACH logo on a page.
Is there some kind of way to supply CSS with a parameter... the only thing changing in the CSS above would be the image path really. Javascript would be okay I suppose, but the solution would need to work in FF, Safari and IE7.
Any ideas? I can't use PHP, but can use SHTML or ASP.
6 Comments:
-
Jim said...
-
“Google "CSS sprites" - there are a few web based 'generators' out there where you can upload you images - define some parameters and it will spit out your CSS.
For something more fancy you can check out something like the 'cycle' jQuery plugin.” -
Brian Rinaldi said...
-
“I did this years ago but your CSS file doesn't have to be .css...it could be .cfm (or I suppose .asp). It works the same as including a .css file just with a different extension.”
-
Elliott Munoz said...
-
“a{
display: block;
cursor: default;
width: 112px;
height: 87px;
float: left;
text-decoration: none;
}
a.image1{
background: url("client_logos/logo1.gif") 0 0 no-repeat;
}
a.image2{
background: url("client_logos/logo2.gif") 0 0 no-repeat;
}
a.image3{
background: url("client_logos/logo3.gif") 0 0 no-repeat;
}
a:hover.image1,
a:hover.image2,
a:hover.image3{
background-position: -112px 0;
}” -
e.dolecki said...
-
“Elliot - that saves some typing, but each element would still require its own declaration to set the background image... that is what I would like to abstract.”
-
said...
-
“those different background images will have to be defined somewhere. so what the difference if it's css?
But I think images like that are part of the content therefore should be part of a markup not hidden within css.”
