how to use different IDs for one Element in CSS - css

Question

I want to display 3 different rollover image on mouse hover over of 3 different<a> element. For this i have use following mechanism but this doesn't solve any purpose. this is as follows:-
#item1 a {
position: absolute;
background-image:url("../images/step1_without_rollover.gif");
}
#item1 a:hover
{
position: absolute;
background-image:url("images/step1_rollover.gif");
}
#item2 a{
position: absolute;
background-image:url("../images/step2_without_rollover.gif");
}
#item2 a:hover {
position: absolute;
background-image:url("../images/step2_rollover.gif");
}
#item3 a{
position: absolute;
background-image:url("../images/step3_without_rollover.gif");
}
#item a:hover {
position: absolute;
background-image:url("../images/step3_rollover.gif");
}
NOTE: i have only begining knowledge of CSS. it is registration process classified into 3 steps.
Thanks !!

Answer 1

you have some unnecessary css codes there. See the code below. It hopefully does what you want. Try cleaning up your css codes a little before you post. that being said, I still dont understand why you need 3 image rollovers though..hope this helps
#item1
{
position: absolute;
top: 492px;left :190px;width:400px; height:140px;
}
#item1 a {
background-image:url("images/image1.gif");
}
#item1 a:hover
{
background-image:url("images/image2.gif");
}

Answer 2

I'm not sure what are you asking in the question, anyway remember that you cannot have more than one ID in the same HTML element, or the same ID in more than a HTML element. IDs must be unique.
EDIT
As much as I know, achieving 3 different background-image changes to the same element using only a :hover state is not possible using only CSS. You need JavaScript to give the element or its parents different classes when you want the image to change.

Answer 3

html
<div id="items">
Item 1
Item 2
Item 3
</div>
css
#items
{
position:absolute;
top:490px;
left:190px;
width:400px;
height:50px;
}
#items a.item1
{
position:absolute;
display:block;
height:50px;
width: 400px;
top: 490px;
left:242px;
background:url("../images/step1_without_rollover.gif");
}
#items a.item1:hover
{
background:url("../images/step1_rollover.gif");
}
#items a.item2
{
position:absolute;
display:block;
height:50px;
width: 400px;
top: 490px;
left:242px; /* don't forget to change your left value */
background:url("../images/step2_without_rollover.gif");
}
#items a.item2:hover
{
background:url("../images/step2_rollover.gif");
}
#items a.item3
{
position:absolute;
display:block;
height:50px;
width: 400px;
top: 490px;
left:242px; /* don't forget to change your left value */
background:url("../images/step3_without_rollover.gif");
}
#items a.item3:hover
{
background:url("../images/step3_rollover.gif");
}

Answer 4

Ok. I think I understand your point better now. So you have all the 3 steps on the same page. This means that you cannot have the same id 3 times on the page. You can do something like this though:
Edit
So you have three different pages. This means that you can use item1 id on all the different pages. But your stylesheet will still need to understand which page it is. You could wrap the item1 div around another div that has a different classname and then style it accordingly. If you go this way then this is what you will need to do:
HTML for Page 1:
<form class="page1" ...>
<div id="item1">
Step 1
.....
</div>
</form>
HTML for Page 2:
<form class="page2" ...>
<div id="item1">
Step 2
.....
</div>
</form>
HTML for Page 3:
<form class="page3" ...>
<div id="item1">
Step 3
.....
</div>
</form>
And your stylesheet will look as follows:
#item1
{
position: absolute;
top: 492px;left :190px;width:400px; height:140px;
}
.page1 #item1 a {
background-image: url("images/image1.gif");
}
.page1 #item1 a:hover
{
background-image:url("images/image1_hover.gif");
}
.page2 #item1 a {
background-image:url("images/image2.gif");
}
.page2 #item1 a:hover
{
background-image:url("images/image2_hover.gif");
}
.page3 #item1 a {
background-image:url("images/image3.gif");
}
.page3 #item1 a:hover
{
background-image:url("images/image3_hover.gif");
}
Or there is another way where you can use JavaScript to analyse the page and then change the background image based on that.