asked on

Making my CSS more dynamic in Javascript

Hi there wonder if you guys can help me in getting the following code more dynamic?

<style>
a#yaprak {
padding-left: 80px;
padding-top: 5px;
width: 227px;
height: 40px;
background-image: url(icon_sync.gif);
display: block;
text-decoration: none;
}

a#yaprak:hover {
background-position: 0 38px;
}

a#yaprak1 {
padding-left: 80px;
padding-top: 5px;
width: 227px;
height: 40px;
background-image: url(icon_groups.gif);
display: block;
text-decoration: none;
}

a#yaprak1:hover {
background-position: 0 38px;
}

a#yaprak2 {
padding-left: 80px;
padding-top: 5px;
width: 227px;
height: 40px;
background-image: url(icon_backup.gif);
display: block;
text-decoration: none;
}

a#yaprak2:hover {
background-position: 0 38px;
}
</style>
<a href="#" id="yaprak">menu1</a>
<a href="#" id="yaprak1">menu2</a>
<a href="#" id="yaprak2">menu3</a>

As you can see, every time I add a new href, I have to increment yaprak by 1, and then add a further 2 more styles. Can you please help me in getting it more dynamic.

Hope that makes sense
Mousemat24

SOLUTION

b0lsc0tt

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

ASKER CERTIFIED SOLUTION

jessegivy

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

b0lsc0tt

Just to point out a thing or two. Notice that you replace # with . to specify the class instead of the id in CSS. Also the class attribute can be added to pretty much any tag and can be with id or other attributes. Class, unlike id, can be duplicated.

bol

b0lsc0tt

I missed the unique background image. You would want to remove it from the style in the head of the html and put it in the tag, like Jessegivy's showed. Credit to him for that good example.

bol

mousemat24

ASKER

Thanks jessegivy!! and thankyou b0lsc0tt

But my code had 3 images, thats why I had to give most of points to jessegivy

b0lsc0tt

Your welcome. I understand. I'm glad that I could help. Thank you for the grade, the points and the fun question.

bol