nicht angemeldet
Hintergrundbild von Zelle bei Mouse Over ändern
Hallo
Erstmals: Ja, ich habe sowohl bei google als auch hier im Forum bereits nach einer Lösung gesucht. Leider bringt diese aber in meinem Fall nicht ganz den gewünschten Effekt.
Wie gesagt möcht ich bei einem Mouse Over / Out das Hintergrundbild einer Tabellenzelle ändern. Ich habe dazu folgenden Lösungsansatz:
##########################CODE
<html>
<head>
<style>
.imageOne{
background-image:url(bg1.jpg);
}
.imageTwo{
background-image:url(bg2.jpg);
}
</style>
</head>
<body bgcolor="#FFFFFF">
<br>
<br>
<br>
<table width="436" height="400" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="imageOne" onMouseOver="this.className='imageTwo'" onMouseOut="this.className='imageOne'"> </td>
</tr>
</table>
</body></html>
##########################CODE
Das Ganze klappt auch hervorragend.
Nur muss ich etwa in 12 Zellen jeweils andere Bilder laden können. Ich würde nun ganz gerne nicht 24 CSS Angaben haben für die 12 Zellen, sondern das Ganze direkt innerhalb von <td ...></td> haben. Wie beispielsweise bei folgendem:
<td align="center" valign="middle" onMouseOver="this.style.backgroundColor = '#CCCCCC'" onMouseOut="this.style.backgroundColor = '#DDDDDD'">TEXT</td>
Gibts da eine Lösung?
Gruss und Dank
jonas
-
Γειά σου, Jonas!
Wie gesagt möcht ich bei einem Mouse Over / Out das Hintergrundbild einer Tabellenzelle ändern. Ich habe dazu folgenden Lösungsansatz:
##########################CODE
<html>
<head>
<style>Hier wäre noch das Atribut type="text/css" sinnvoll. > ~~~html [code lang=css].imageOne{ > background-image:url(bg1.jpg); > } > .imageTwo{ > background-image:url(bg2.jpg); > }</style>
</head><body bgcolor="#FFFFFF">[/code]
Wenn schon CSS, warum nicht auch für die Hintergrundfarbe des body-Elements?
~~~html
<br>
<br>
<br>Auch Abstände lassen sich prima mit CSS einstellen, genauso gut wie Breite, Höhe und Rahmen der folgenden Tabelle. > ~~~html <table width="436" height="400" border="0" cellpadding="0" cellspacing="0"> > <tr> > <td class="imageOne" onMouseOver="this.className='imageTwo'" onMouseOut="this.className='imageOne'"> </td> > </tr> > </table> > </body></html>##########################CODE
Das Ganze klappt auch hervorragend.
Das habe ich, ehrlich gesagt, nicht anders erwartet. ;-)
Nur muss ich etwa in 12 Zellen jeweils andere Bilder laden können. Ich würde nun ganz gerne nicht 24 CSS Angaben haben für die 12 Zellen, sondern das Ganze direkt innerhalb von <td ...></td> haben. Wie beispielsweise bei folgendem:
<td align="center" valign="middle" onMouseOver="this.style.backgroundColor = '#CCCCCC'" onMouseOut="this.style.backgroundColor = '#DDDDDD'">TEXT</td>
Gibts da eine Lösung?
Ja, gibt es. Im td-Element notierst du dir Folgendes (Die CSS-Definitionen könntest du später in den style-Bereich im head verschieben):
<td style="text-align: center;vertical-align: middle;background: url(bg1a.jpg);" onMouseOver="this.style.background='url(bg1b.jpg)';" onMouseOut="this.style.background='url(bg1a.jpg)';">Text</td>Gleiches System für die anderen Zellen auch, dort natürlich mit anderen Graphiken (bg2a.jpg und bg2b.jpg, bg3a.jpg und bg3b.jpg ...). Im Head müssen allerdings vorher - am besten beim Laden der Seite - die b-Graphiken per Javascript geladen werden; wie dies geht, steht in SELFHTML: images: Allgemeines zur Verwendung.
--
Ἀεὶ πάντα ῥεῖ.
Selfcode: ie:% fl:( br:> va:} ls:[ fo:) rl:( n4:{ ss:| de:> js:| ch:) mo:} zu:) - Selfcode dekodieren - Selfcode-Info-
Hallo Sven
Aber hallo? Meinst du im ernst, ich würde eine seite mit solchem Code online stellen? Das Ganze war nur kurz zusammengecodet, um ein entsprechendes Beispiel bieten zu können.
Herzlichen Dank für deine Lösung. Genau das habe ich auch probiert, jedoch einen saudummen fehler gemacht:
onMouseOut="this.style='background.url(bg1a.jpg)';"Tja, umso grösseren Dank für deine Mühe.
Grüsse
Jonas
-
-
Hi,
<body bgcolor="#FFFFFF">
<br>
<br>
<br>
<table width="436" height="400" border="0" cellpadding="0" cellspacing="0">hossa. Das scheint mir eine hinreichend grauenbehaftete Struktur zu sein. Bist Du sicher, dass Du überhaupt die nötige Grundlage geschaffen hast, auf der CSS aufsetzen kann?
Nur muss ich etwa in 12 Zellen jeweils andere Bilder laden können. Ich würde nun ganz gerne nicht 24 CSS Angaben haben für die 12 Zellen, sondern das Ganze direkt innerhalb von <td ...></td> haben. Wie beispielsweise bei folgendem:
[...]
Gibts da eine Lösung?
Warum adaptierst Du nicht einfach das Wissen aus dem eben von Dir genannten Beispiel und wendest es Deinem Ziel entsprechend an?
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes -
Hallo Jonas,
Lösungen gibt's fast immer.
Only JS
Lege einen Array mit deinen Hintergrundbildern an.Gib den TD's alle eine Klasse wo Du ein Hintergrundbild definierst.
Nach dem Laden der Seite weist Du den TD's ein anders Hintergrund zu.
Beim Mouseover parkst Du das aktuelle Hintergrundbild in eine Variable, beim Mouseover schreibst Du es zurück.
Fragst in einem Case halt ab, altes Bild = "foo.gif" dann neues Bild "foo_roolover.gif"
Hmmh, eigentlich ganz einfach. Ich habe mal für einne Zebra dieses Script gemacht.
function zebra(){
if(document.getElementsByTagName){
var myTABLE = document.getElementsByTagName("table");
for(tab = 0; tab < myTABLE.length; tab++){
var myTR = document.getElementsByTagName("table")[tab].getElementsByTagName("tr");
document.getElementsByTagName("table")[tab].style.background ="#DBE2E5"
for(i = 0; i < myTR.length; i++){
if(i % 2 == 0){
myTR[i].className = myTR[i].className + "-1";
for(x = 0; x < myTR[i].getElementsByTagName("td").length; x++){
myTR[i].getElementsByTagName("td")[x].className = myTR[i].getElementsByTagName("td")[x].className + "-1";
}
}
}
}
}
}Liebe Grüße,
Bernd