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.

[Thorben77]

Wenn man für die Links display: block festlegt und den Innenabstand (padding) der Tabellenzellen und den Außenabstand (margin) der Links auf 0 setzt, füllen die Links die ganze Tabellenzelle aus.
Dann dürfte es nicht mehr auffallen, wenn das Hintergrundbild für den Link und nicht die Zelle festgelegt ist.

Das passende CSS dazu wär dann:

Code:

td {
  padding: 0;
}

a {
  display: block;
  margin: 0;
  background: url('Hintergrundbild.jpg');
}

a:hover {
  background: url('anderes%20Hintergrundbild.jpg');
}

[Alexander Roth]

Also, so klappen tut es leider nicht.
Könnt ihr mir sagen, was denn mein Fehler da drin ist?

Code:

<tr>
  <td  onmouseover="this.style.background='url(../zelle26select.jpg)'"  onmouseout="this.style.background='url(../zelle26.jpg)'" width="100%" height="26">
    [url="http://alexander.sam-host.net/"] Home[/url]
  </td>
</tr>

Um alle Missverständnisse aufzuklären; hier ist der Code der über dieser Zelle ist:

Code:

<html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252"><title>Gemeinsamer linker Randbereich</title><meta name="Microsoft Theme" content="none">
<meta name="Microsoft Border" content="none">
</head><body background="../images/links1.gif">

<p align="center">
</p>

<p align="center">
</p>

<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;}

-->
</style>

<table border="1" width="160" cellspacing="0" cellpadding="4" style="border-collapse: collapse" bordercolor="#111111" >
<tr>
  <td  onmouseover="this.style.background='url(../zelle26select.jpg)'"  onmouseout="this.style.background='url(../zelle26.jpg)'" width="100%" height="26">
    [url="http://alexander.sam-host.net/"] Home[/url]
  </td>
</tr>
<tr>

Gruß Alexander


PS: @Thorben77. Ich probiere es aus. Danke.

[Thorben77]

Vielleicht solltest du auch noch am Anfang des Dokuments seinen/einen Dokumenttyp angeben, dann zwingst du die Browser nicht sofort in den Quirksmode:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

[Alexander Roth]

Hi, ich weis nicht was das bewirkt hat. Jetzt klappt irdendwie alles.
Also auch die Zellen, die ich von anfang an nicht verändert habe sind machen jetzt genau das, was ich von anfang an wollte.

Also, nochmal im Klartext: Ich habe den Ratschlag von Thorben77 umgesetzt und plötzlich klappt alles.

Also danke für eure Hilfe. Ich hoffe, dass ich jetzt selbst zurechtkomme.


Vielen Vielen Dank, dass ihr euch so bemüht habt, und ich nun mein Ziel erreicht habe.

Tschüss

Alexander

[Daniel G]

Zitat:

Zitat von Alexander Roth

Ich habe den Ratschlag von Thorben77 umgesetzt und plötzlich klappt alles.

In dem Zusammenhang wäre der verwendete Browser auch noch von Bedeutung gewesen. Gerade bei CSS gibt es teils gravierende Unterschiede.

[Alexander Roth]

firefox 1.5.0.9. Und der unterstützt doch css voll. Oder?

[Thorben77]

Im Firefox funktionieren CSS-Hover-Eigenschaften aber so weit ich weiß auch für andere Elemente als Links :gruebel: . (Wobei ich mir nicht sicher bin, ob das im CSS-Standard vorgesehen ist.)
Eigentlich hätte ich jetzt auf den IE getippt, der lässt :hover glaub ich nur bei Links zu.

Nachtrag:

Zitat:

Zitat von Alexander Roth

Und der unterstützt doch css voll. Oder?

Ich glaube, kein Browser unterstüzt wirklich alles, was CSS hergibt. Wobei dann auch noch die Frage bleibt, welche CSS-Version unterstützt wird.

[Alexander Roth]

Also für die die diesen Thread mal lesen: Ich habe es nun aus einer Kombination von Codes (die ihr mir gegeben habt) zusammengebastelt.
Auch wenn es vielleicht CSS-technisch nicht elegant ist, es funktioniert und nur das ist für mich wichtig.


Der Style Abschnitt:

XML-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:active.Navlink  {font-size: 15pt;}
a:active.Navlink  {font-weight: bold;}
a:active.Navlink  {font-family: Times New Roman;}
a:hover.Navlink  {text-decoration: none;}

-->
</style>


<style type="text/css">
<!--
td.norm
{
  font-size: 15pt;
  font-weight:bold;
  line-height: 1.55;

  padding: 0;
  width: 100%;
  display: block;
  margin: 0;
  background-image: url('../zelle26.jpg');
}

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

Eine Zelle:

XML-Code:

<tr>
  <td class="norm">[url="http://alexander.sam-host.net/"] Home[/url]</td></tr>

Vielen Dank nochmals an euch.


Gruß Alexander