CSS Question: Dynamic parameters?

Some favorite site feeds aggregated locally: iPhone Development RSS Adobe Labs RSS Macrumors RSS

Wednesday, January 30, 2008

CSS Question: Dynamic parameters?

Wednesday, January 30, 2008

I am coding up a client's logo page in CSS for HTML delivery right now, and I have rollovers working on the images without using javascript... which was the goal.

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.kronos
{
  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;
}

Now here is the snippet of HTML that displays the logo itself:

<a class="kronos" href="#">&nbsp;</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.

Return to the main page

Comments:

There are currently 6 Comments:

Jim said... January 30, 2008 9:03 PM “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.”

“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.”

“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;
}”

“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.”

“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.”

“about css parameters
http://css-lessons.ucoz.com/css-parameters.htm”

eric e. dolecki

Wednesday, January 30, 2008

CSS Question: Dynamic parameters?

Wednesday, January 30, 2008