HTML: Anderes Hintergrundbild bei Zelle bei MouseOver

[Alexander Roth]

Hi,

also es geht um die Navigation meiner Homepage. Ich würde gerne Zellen einer Tabelle mit einem Hintergrundbild hinterlegen, und wenn die Maus daraübergeht, mit einem anderen Hintergundbild.

Das ist der Code einer Zelle:

Code:

<tr>
  <td width="100%" onMouseover="LmOver(this, '#00FFCC')" onMouseout="LmOut(this, '#33CCFF')" onMouseDown="LmDown(this, '#00FFCC')"
onMouseUp="LmUp('http://alexander.sam-host.net/')" bgcolor="#33CCFF" background="zelle2.jpg">[url="http://alexander.sam-host.net/"] Home[/url]</td></tr>
<tr>

Wie kann ich nun anstadt den bölden Hintergrundfarben ('#00FFCC'), durch ein Hintergrundbild ersetzen?

Also ich habe 0 Ahnung von HTML, und ich will dann ungefähr so was:

Code:

<tr>
  <td width="100%" onMouseover="LmOver(this.backgound, 'zelleNEU.jpg')" onMouseout="LmOut(this.backgound, 'zelle2.jpg')" onMouseDown="LmDown(this.backgound, 'zelleNEU.jpg')"
onMouseUp="LmUp('http://alexander.sam-host.net/')" bgcolor="#33CCFF" background="zelle2.jpg">[url="http://alexander.sam-host.net/"] Home[/url]</td></tr>
<tr>

Wisst ihr wie man das machen kann?


Gruß Alexander

[annonyme]

Code:

<style type="text/css">
<!--
td.link{
 background-color:#FFFFFF; 
}

td.link:hover{
 background-image:url(nutella.png);
}

-->
</style>

Code:

<td class="link"></td>

sollte so funktionieren...

[DP-Maintenance]

Dieses Thema wurde von "SirThornberry" von "Klatsch und Tratsch" nach "Programmieren allgemein" verschoben.

[Alexander Roth]

:gruebel: Also erstmal danke für die Antowrt.
Doch so richtig kapieren tue ich das nicht.
Ich habe jetzt den Code folgendermaßen abgeändert:

Code:

<style type="text/css">
<!--
.Navlink {COLOR: #000000; TEXT-DECORATION: none; font-family: times; font-size: 12pt; font-weight: bold;}
a:link.Navlink  {color : #000000;}
a:visited.Navlink  {color : #000000;}
a:active.Navlink  {text-decoration: none;}
a:hover.Navlink  {text-decoration: none;}

  td.link{background-color:#FFFFFF;}
  td.link:hover{background-image:url(zelle26select.png);}
-->
</style>

Das Zeug was darüber ist stand in einem Block, der auch mit <style type="text/css"> angefangen hat. Also habe ich gedacht. Vielleicht kann man es zusammenschreiben.


Dann die Zelle:

Code:

<tr>
  <td  class="link" width="100%" OnMouseUp="LmUp('http://alexander.sam-host.net/')"  bgcolor="#33CCFF"  style="background-image: url('../zelle26.jpg')"
height="26">[url="http://alexander.sam-host.net/"] Home[/url]</td></tr>
<tr>

Doch da ändert sich kein Bild.

Was habe ich falsch gemacht?

[SebE]

wenn du das mit CSS lösen willst, dann so:

XML-Code:

<style type="text/css" rel="stylesheet">
<!--
td.td_class a.a_class
{
width: 100%;
background-color: #FF0000;
background-image: url(bild1.bmp);
}

td.td_class a.a_class:hover
{
width: 100%;
background-color: #FF00FF;
background-image: url(bild2.bmp);
}
//-->
</style>

<table style="width: auto; height: auto; border-width: 1px; border-color: #000000; border-style: solid;">
  <tr>
    <td class="td_class">[url="abc"]text[/url]</td>
  </tr>
</table>

hover kann man, soweit ich weiß nur bei links (<a>) verwenden

[Alexander Roth]

Dein Code funktioniert. Leider, klappt es aber nur für den Link und es ist kein Zellenhintergrund.

Zitat:

Zitat von SebE

hover kann man, soweit ich weiß nur bei links (&lt;a&gt;) verwenden

Ich will es aber für eine Zelle machen.

Gibt es eine andere Möglichkeit? Es muss nicht CSS sein.


Gruß Alexander

[SebE]

So ginge es auch:

XML-Code:

<td onmouseover="this.background='bild1.bmp'" onmouseout="this.background='test2.bmp'">Text</td>

[Alexander Roth]

Leider funktioniert das nicht.

Ich habe das als Zelle:

XML-Code:

<tr>
  <td bgcolor="#33CCFF" background="../zelle26.jpg" onmouseover="this.background='../zelle26select.jpg'" onmouseout="this.background='../zelle26.jpg'">
    [url="http://alexander.sam-host.net/"] Home[/url]
  </td>
</tr>

Was mache ich falsch.
Der Hintergrund ver#ndert sich garnicht.

Wenn ich es so habe:

XML-Code:

<tr>
  <td onmouseover="this.background='../zelle26select.jpg'" onmouseout="this.background='../zelle26.jpg'">
    [url="http://alexander.sam-host.net/"] Home[/url]
  </td>
</tr>

Verändert sich auch nichts wenn ich drüber gehe mit der Maus. Weder über dem Link, noch über der Zelle.

Gruß Alexander

[DGL-luke]

Gibt es keinen validen CSS-Selektor für eine "Tabellenzelle, in der sich ein gehoverter Link befindet"?

[Birzenbae]

entweder so:

Code:

<tr>
  <td onmouseover="this.style.background='url(../zelle26select.jpg)'" onmouseout="this.style.background='url(../zelle26.jpg)'">
    Text
  </td>
</tr>

oder so:

Code:

<style type="text/css" rel="stylesheet">
<!--
td.norm
{
background-image: url(../zelle26.jpg);
}

td.over
{
background-image: url(../zelle26select.jpg);
}
//-->
</style>

<tr>
  <td class="norm" onmouseover="this.class='over'" onmouseout="this.class='norm'">
    Text
  </td>
</tr>

Die erste Methode geht auf jeden Fall, nur bei der Zweiten bin ich mir allerdings nicht mehr ganz sicher.