rollover.css

[Marja]

Hi... I'm new here and my name is Marja. I live in the Netherlands so please forgive me any language slip of my keyboard.
I'm also new to css but I love to learn it because it finally didn't 'cause any popup warnings in my windows. I have tried to use the rollover.css tutorial but it only works for 1 image... and it work fine!!! But.... I've about 6 images to do, so how do I have to change the css file and the html file?

This is the original css which work fine:
/* CSS Rollovers */
#example{
height: 100px;
width: 101px;
text-indent: 10000px;
overflow: hidden;
background: url(eng.jpg) top left no-repeat;
display: block;
}
#example:hover{
background-position: bottom left;
}


It's related to this part of the html:
<div>
<a href="/epoems.html" id="example"></a>
</div>

Can any of you css-Masters tell me how to put more than 1 image to this code?

Peace,
Marja

[fasterthanlight™]

instead of using id, set it to a class




.example{
height: 100px;
width: 101px;
text-indent: 10000px;
overflow: hidden;
background: url(eng.jpg) top left no-repeat;
display: block;
}
.example:hover{
background-position: bottom left;
}






<div>
<a href="/epoems.html" class="example"></a>
</div>



You can only use one ID per page, whereas a class can be used many many times on a page

[Marja]

Whow Fasterthanlight.... you deserve your name!! I do understand the html code but do I have to change the css file too? I mean; do I have to add "example 1" - "example2" etc to the html and to the css file?

Peace,
Marja

[fasterthanlight™]

nah, as long as each link isn't different in terms of style, this should be copy and pastable:


CSS:


.example{
height: 100px;
width: 101px;
text-indent: 10000px;
overflow: hidden;
background: url(eng.jpg) top left no-repeat;
display: block;
}
.example:hover{
background-position: bottom left;
}


HTML:


<div>
<a href="/epoems.html" class="example"></a>
<a href="/link2" class="example"></a>
<a href="/link3" class="example"></a>
<a href="/link4" class="example"></a>
<a href="/link5" class="example"></a>
</div>



If each link needs to be styled differently you can then use classes to set a basic wireframe style, and then apply individual styles to the id:


CSS


.example{
height: 100px;
width: 101px;
text-indent: 10000px;
overflow: hidden;
display: block;
}
.example:hover{
background-position: bottom left;
}

#link1 {
background: url(link1BG.jpg) top left no-repeat;
}

#link2 {
background: url(link2BG.jpg) top left no-repeat;
}

#link3 {
background: url(link3BG.jpg) top left no-repeat;
}




HTML:



<div>
<a href="/epoems.html" class="example" id="link1"></a>
<a href="/link2" class="example" id="link2"></a>
<a href="/link3" class="example" id="link3"></a>
<a href="/link4" class="example" id="link4"></a>
<a href="/link5" class="example" id="link5"></a>
</div>

[Marja]

Thanks for your help. The last 2 codes work fine but didn't rollover anymore. It only show the first image and the link to that page, but it didn't show the second image. I mean: there are 2 different images in 1 image, like Sam Kellett explain to do in his tutorial.