Home/ Questions/Q 8795033
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T23:19:55+00:00

I’m trying to make rollover images with a hyperlink in each table cell, but

  • 0

I’m trying to make rollover images with a hyperlink in each table cell, but for some reason each subsequent cell I make is overriding the cells before it .:. each cell becomes a repeated image. The code worked fine the first time I wrote it; this is totally out of the blue. Here are the image codes for two adjacent cells – what happens for me for some reason, the 2nd cell keeps showing up as the 1st cell image as well.

<table style="width: 655px; height: 630px; border: 2px dotted black;">
<tbody>
<tr align="center">    
<td style="border: 2px dotted black; width: 220px; height: 210px;"> <style type="text/css">
.rollover a {display: block;
  width: 210px;
  height: 155px;
  background-image: url( IMG1a );}
.rollover a:hover{display: block;
  width:210px;
  height: 155px;
  background-image: url( IMG1b );}
</style><div class="rollover"> <a href="link1"></a></div></td>

<td style="border: 2px dotted black; width: 220px; height: 210px;"> <style type="text/css">
.rollover a {display: block;
  width: 210px;
  height: 155px;
  background-image: url( IMG1a );}
.rollover a:hover{display: block;
  width:210px;
  height: 155px;
  background-image: url( IMG1b );}
</style><div class="rollover"> <a href="link1"></a></div></td></tr></tbody></table>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Without a larger chunk of HTML I am assuming that you have this in your page verbatim. <style> elements are not scoped to a part of the page. So if you have these two style elements in the page, the last statement will override the first and influence both divs.

    To resolve this, you have to give each div or a a specific selector, like an id:

    <style type="text/css">
#first-div.rollover a {display: block;
  width: 210px;
  height: 155px;
  background-image: url( IMG1a );}
#first-div.rollover a:hover{
  background-image: url( IMG1b );}

#second-div.rollover a {display: block;
  width: 185px;
  height: 131px;
  background-image: url( IMG2a );}
#second-div.rollover a:hover{
  background-image: url( IMGb );}
</style>

<div class="rollover" id="first-div">
  <a href="link1"></a>
</div>
<div class="rollover" id="second-div">
  <a href="link2"></a>
</div>

    And as always, include your <style> in your <head> tag, or even better in a separate file!

    • 0