nicht angemeldet
Zellenhintergrund bei mouseover ändern
0 0 0 0 0 0 0 Mein Vorschlag
0
Zellenhintergrund bei mouseover ändern
Hallo,
Ich möchte gerne die Hintergrundbilder von Zellen (also <td background="meinbild.jpg">) meiner Tabelle mittels mouseover auf Elementen (Bilder), die sich außerhalb dieser Zellen befinden, ändern.
Bis jetzt bin ich sowohl mit JavaScript als auch CSS gescheitert, wobei mir letzteres wenn es möglich ist lieber wäre.
Gibt es eine Möglichkeit so etwas zu realisieren?
Wäre echt dankbar für einen Tipp! Danke.
MfG,
Thomas.
-
Hallo,
Ich möchte gerne die Hintergrundbilder von Zellen (also <td background="meinbild.jpg">)
Bitte: <td style="background-image:url(meinbild.jpg);">
meiner Tabelle mittels mouseover auf Elementen (Bilder), die sich außerhalb dieser Zellen befinden, ändern.
Bis jetzt bin ich sowohl mit JavaScript als auch CSS gescheitert, wobei mir letzteres wenn es möglich ist lieber wäre.
Mit CSS lässt sich dass mittel des Pseudoformats :hover lösen, wobei AFAIK zu beachten ist, dass der IE das nicht interpretiert.
Ansonsten bleibt dir nur der Weg über JavaScript.
Gruß aus Bonn
Sven--
Do it yourSELF 'cause SELFmade is bestmade.
Selfcode: ie:% fl:( br:^ va:} ls:[ fo:) rl:( n4:{ ss:| de:> js:| ch:? mo:} zu:)
Selfcode dekodieren - Selfcode-Info -
Hallo Thomas,
Dazu gab es gestern ein langen Thread
https://forum.selfhtml.org/?t=93396&m=564106
Gruß,
Dieter
-
Hallo Thomas,
Dazu gab es gestern ein langen Thread
https://forum.selfhtml.org/?t=93396&m=564106
Gruß,
Dieter
Sorry, hatte den Thread nicht gesehen, aber wie sich jetzt herausstellte, kann mir der auch nicht wirklich helfen.
Den Zellenhintergrund per mouseover (über die betroffene Zelle!) zu ändern ist kein Problem. Mein Problem ist eher, dass ich per mouseover über einen Link den Zellenhintergrund, der sich im Code ganz woanders befindet, zu ändern.
Wie bring ich das zu Stande?-
Hallo Thomas
Den Zellenhintergrund per mouseover (über die betroffene Zelle!) zu ändern ist kein Problem. Mein Problem ist eher, dass ich per mouseover über einen Link den Zellenhintergrund, der sich im Code ganz woanders befindet, zu ändern.
Wie bring ich das zu Stande?Indem du z.B. der Zelle, die den anderen Hintergrund bekommen soll eine Id
gibst und sie dann nicht mitels this sondern getElementById() ansprichst.Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!-
mit css allein funktioniert das also nicht? ok danke.
in javascript bin ich leider nicht sonderlich bewandert, könntest du mir noch einen tippp geben bitte?
so sieht der quelltext aus momentan:<head>
<script type="text/javascript">
<!--
function wechseln(bild) {
document.getElementById("zelle1").background = bild;
}
//-->
</script>
</head><body>
<table border=1><tr>
<td id="zelle1" width=200 height=200>text text text</td>
</tr></table><a href=# onmouseover="javascript:wechseln('images/kontakt.gif')">link</a>
</body>Hallo Thomas
Den Zellenhintergrund per mouseover (über die betroffene Zelle!) zu ändern ist kein Problem. Mein Problem ist eher, dass ich per mouseover über einen Link den Zellenhintergrund, der sich im Code ganz woanders befindet, zu ändern.
Wie bring ich das zu Stande?Indem du z.B. der Zelle, die den anderen Hintergrund bekommen soll eine Id
gibst und sie dann nicht mitels this sondern getElementById() ansprichst.Auf Wiederlesen
Detlef-
Hallo Thomas,
das sieht für den Anfang schon ganz gut aus, es fehlt nur noch ein klein
wenig.function wechseln(bild) {
document.getElementById("zelle1").background = bild;Deine "zelle1", eine td, kennt selbst leider keine background-Eigenschaft,
sie hat aber ein style-Attribut, welches diese Eigenschaft kennt.
Lies bitte style: Allgemeines zur Verwendung, dort halte dich nicht zu sehr
bei der älteren Microsoft-Syntax auf, sondern schau dir das Beispiel für
DOM-Syntax an.
Schau bei der Gelegenheit auch gleich nochmal, wie die Style-Eigenschaften
in Javascript lauten.Dann überlege dir, wie du bei background-image die Bild-URL angeben musst.
Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!-
Hallo Thomas,
evtl. kannst Du so etwas mit IFrames bewerkstelligen, die bei Mouseover dem jeweiligen IFrame eine anderes Html Datei zugewiesen wird. Das versuche ich auch, es klappt sogar ... jedoch noch nicht einwandfrei, den Thread kannst Du
a href="http://forum.de.selfhtml.org/?t=93365&m=563882">hier</a>lesen.
Hoffentlich kommen wir da weiter ;)Greetz, Olli
-
gut, danke. hab mir die seiten durchgelesen, aber ganz konnte ich mein problem nicht aus der welt schaffen. viel kann nun ja nicht mehr falsch sein, bitte nochmals um hilfe. :)
<script type="text/javascript">
<!--
function wechseln(bild) {
document.getElementById("zelle1").style.backgroundImage = bild;
}
//-->
</script>
</head><body>
<table border=1><tr>
<td id="zelle1" width=200 height=200>text text text</td>
</tr></table><a href=# onmouseover="javascript:wechseln(images/kontakt.gif)">link</a><br>
Hallo Thomas,
das sieht für den Anfang schon ganz gut aus, es fehlt nur noch ein klein
wenig.function wechseln(bild) {
document.getElementById("zelle1").background = bild;Deine "zelle1", eine td, kennt selbst leider keine background-Eigenschaft,
sie hat aber ein style-Attribut, welches diese Eigenschaft kennt.
Lies bitte style: Allgemeines zur Verwendung, dort halte dich nicht zu sehr
bei der älteren Microsoft-Syntax auf, sondern schau dir das Beispiel für
DOM-Syntax an.
Schau bei der Gelegenheit auch gleich nochmal, wie die Style-Eigenschaften
in Javascript lauten.Dann überlege dir, wie du bei background-image die Bild-URL angeben musst.
Auf Wiederlesen
Detlef-
Hallo Thomas,
ich habe versäumt dich auf einen Fehler hinzuweisen und du hast auch eine
Kleinigkeit übersehen bzw. noch einen Fehler eingebaut.Ich schrieb:
Dann überlege dir, wie du bei background-image die Bild-URL angeben musst.
Hast du dies wirklich getan?
Mein Versäumnis:
<a href=# onmouseover="javascript:wechseln(images/kontakt.gif)">link</a><br>
^^^^^^^^^^
"onmouseover" ist ein Javascript-Event, da ist das Pseudoprotokoll
"javascript" fehl am Platze, also ohne dieses:
onmouseover="wechseln('images/kontakt.gif')Wie müsste deine Hintergrunddefinition in CSS aussehen?
background-image: url(images/kontakt.gif);Die Funktion wechseln() wird mit der Zeichenkette 'images/kontakt.gif'
aufgerufen, das entspräche dann in CSS:
background-image: images/kontakt.gif;
Was natürlich falsch ist.Du musst also aus der übergebenen Zeichenkette "images/kontakt.gif"
"url(images/kontakt.gif)" machen.z.B. so:
function wechseln(bild) {
document.getElementById("zelle1").style.backgroundImage = "url(" + bild + ")";
}PS: lies bitte auch noch in der Forums-FAQ
Warum sollte ich beim Antworten so wenig wie möglich und so viel wie nötig zitieren?Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!
-
-
-
-
-
-