Noget med hover i en table..

tjaa

Ifl. W3C kan du lave hover på alle elementer, men desværre så synes Microsoft at Internet Explorer kun skal understøttet hover på anker (<a>) elementer.

Så du skal desværre bruge noget javascript til dette formål.

Okay, men ved ikk om der er en anden udvej, sådan her skal det være:

Billede her, fx. News - så køre man over news og billedet ved siden af ændre sig, men ikk news..

Det ville være godt hvis jeg kunne spare mig for at lave et stort billede, dvs. spare båndbredde.

Så skal du have gang i noget java script:
Hovedtabel
<table>
<tr>
<td>
<table style="background-image:url(billede1.png);" id="tabel1" onmouseover="changeBackgroundImage('tabel2','billede2.png');"  onmouseout="changeBackgroundImage('tabel2','billede1.png');" >
<tr><td>Tabel 1</td></tr>
</table>
</td>
<td>
<table style="background-image:url(billede1.png);" id="tabel2">
<tr><td>Tabel 2</td></tr>
</table>
</td>
</tr>
</table>

<script type="text/javascript">
  function changeBackgroundImage(elmId,bgImage) {
      document.getElementById(elmId).style.backgroundImage = "url("+bgImage+")";
  }
</script>

Helt klart javascript.. Har leget med noget lignende før og det er ikke til at gøre uden javascript. Men det er da heller ikke noget der tager lang tid ;)

skovenberg>> Ser ud som ngoet jeg kan bruge,... men hvis table 1 nu skal være et link hva så ? SKAL ejg så lave <img src osv?.

Hvis hele tabel1 skal være et link kan du skrive:
<table style="background-image:url(billede1.png);" onclick="location.href='http://www.google.com';" id="tabel1" onmouseover="changeBackgroundImage('tabel2','billede2.png');"  onmouseout="changeBackgroundImage('tabel2','billede1.png');" >
<tr><td>Tabel 1</td></tr>
</table>

Denne sætning: onclick="location.href='http://www.google.com';" skal så sende dig hen til den ønskede side (i dette tilfælde google). Jeg undlader bevidst at sætte et a-element rundt om tabellen (selvom det ville ha' været lettere), af den simple grund at a-elementet er et inline-element og inline-elementer må kun indeholde andre inline-elementer (og det er table ikke ;-)

hey. kig her:
http://fegh.dk/tergadare/index.html

Kig i menuen.. Det virker fint med history, sponsors, events og admin, men ikke med dem ovenover, selvom det er præcis samme kode bortset fra id'sne og billederne..

Jeg tror at jeg dropper det og laver et stort billede med noget css og a:hover =)