2nd rollover grabs first rollover image?

[lloydwiddowson]

Hi guys and gals, hoping you can help.. I am sure I am missing something simple, but I'm just about ready to throw my computer out the window.

I have a rollover 'a' and a rollover 'b'... my rollover 'b' will only grab the rollover 'a' image.

I'll paste the code below, any help would be greatly appreciated.

<td bgcolor="#000000"></p>
    <style type="text/css" >
.rollover a {        display : block;
                     width : 800px;
                     height : 124px;
                     background-image:url(http://www.eurovisionimports.com/stockimage1.jpg); }
 
.rollover a:hover {   display : block;
                      width : 800px;
                      height : 429.86px;
                      background-image:url(http://www.eurovisionimports.com/harleyfatrollover.gif); }
</style>
<div class="rollover" > <a href="http://www.eurovisionimports.com/item1.html"></a> </div>
<br />  
</style>
<style type="text/css" >
.rollover b {        display : block;
                     width : 800px;
                     height : 124px;
                     background-image:
url(http://www.eurovisionimports.com/stockimage2.jpg); }
 
.rollover b:hover {   display : block;
                      width : 800px;
                      height : 441px;
                      background-image:url(http://www.eurovisionimports.com/stockimage2roll.gif); }
</style>
<div class="rollover" > <a href="http://www.eurovisionimports.com/item2.html"></a> </div>
 
</style>

[Rabbit]

Please use code tags when posting code.

There is no element that uses b as a tag.

[ariful alam]

Ok, you have some problem in your code.

You used, .rollover a in your style tag. that means <a></a> tag in tag that class name is rollover. so, as your two div's class is rollover and both has <a></a> tag the first style setting is applied in both case.

you can add id attribute in both <a></a> tag like a1, a2. and in style tag use .rollover #a1, .rollover #a1:hover, .rollover #a2, .rollover #a2:hover respectively for every block. the solution is showed below:

<style type="text/css" >
.rollover #a1 {
    display : block;
    width : 800px;
    height : 124px;
    background-image:url(http://www.eurovisionimports.com/stockimage1.jpg);
}
 
.rollover #a1:hover {
    display : block;
    width : 800px;
    height : 429.86px;
    background-image:url(http://www.eurovisionimports.com/harleyfatrollover.gif);
}
 
.rollover #a2 {
    display : block;
    width : 800px;
    height : 124px;
    background-image:url(http://www.eurovisionimports.com/stockimage2.jpg);
}
 
.rollover #a2:hover {
    display : block;
    width : 800px;
    height : 429.86px;
    background-image:url(http://www.eurovisionimports.com/stockimage2roll.gif);
}
</style>
 
 
<div class="rollover" > 
<a id='a1' href="http://www.eurovisionimports.com/item1.html"></a
<br />
<a id='a2' href="http://www.eurovisionimports.com/item2.html"></a> 
</div>