Bei Mouseover auf Grafik, nebenstehenden Text in td farblich ändern.

C4T

C4T

Erfahrenes Mitglied
Bei Mouseover auf Grafik, nebenstehenden Text in <td> farblich ändern.

Hallo,

ich weis nicht genau wie ich dieses Problem lösen soll.
Habe hier im Board gesucht, aber nichts passendes gefunden.
Undzwar habe ich eine Tabelle mit 2 Spalten. In der linken Spalte befindet sich eine Grafik die mit Imagemaps belegt ist und
die rechte Spalte beinhaltet 4 Zeilen in denen ein Text ist.

Jetzt will ich gerne das sich die Hintergrundfarbe in den Zellen verändert, wenn ich mit der Maus über die Grafik fahre.

Ich gehe quasi mit der Maus auf die Grafik links, und rechts soll sich dann halt die Hintergrundfarbe der Zelle verändern.

Macht man das überhaupt mit Javascript, oder kann man das auch mit CSS machen ?

Ich arbeite mit dem DW4.0.
Vielleicht weis jemand Rat.
Danke.

Gruss
C4T
 
Hallo C4t,

ja, das funktioniert :) - hab dir ein Beispiel geschrieben...

PHP: 
<html>
<head>
<script type="text/javaScript">
function swap(id,x){
    if(x==1)
        //silver = Farbe bei Mouseover
        document.getElementById(id).style.backgroundColor = 'silver';
    if(x==2)
        document.getElementById(id).style.backgroundColor = '';
}
</script>
</head>
<body>

<table border="1">
    <tr>
        <td rowspan="2"><img src="http://www.tutorials.de/images/tutorials_v3_logo.gif" usemap="#test"></td>
        <td id="Zeile1">Zeile 1</td>
        <td id="Zeile2">Zeile 2</td>
    </tr>
    <tr>
        <td id="Zeile3">Zeile 3</td>
        <td id="Zeile4">Zeile 4</td>
    </tr>
</table>

<map name="test">
    <area shape="rect" coords="0,0,153,65" href="http://www.deinLink1.de" alt="Zeile 1" onMouseOver="swap('Zeile1',1)" onMouseOut="swap('Zeile1',2)">
    <area shape="rect" coords="154,0,307,65" href="http://www.deinLink2.de/" alt="Zeile 2" onMouseOver="swap('Zeile2',1)" onMouseOut="swap('Zeile2',2)">
    <area shape="rect" coords="0,65,153,130" href="http://www.deinLink3.de" alt="Zeile 3" onMouseOver="swap('Zeile3',1)" onMouseOut="swap('Zeile3',2)">
    <area shape="rect" coords="154,65,307,130" href="http://www.deinLink4.de" alt="Zeile 4" onMouseOver="swap('Zeile4',1)" onMouseOut="swap('Zeile4',2)">
</map>

</body>
</html>
(sorry wegen der Überlangen Zeile)

Erklärung: Wir haben hier eine Grafik mit Imagemaps - hier 4 Rechtecke. Auf jede Area kommen 2 EventHandler -> onMouseOver und onMouseOut. Die Funktion "swap" braucht die "id" der Zelle, die geändert werden soll, und eine Art "Statusanzeige". Als Statusanzeige dienen hier 1 und 2, wobei inetwa 1=set und 2=reset bedeuten...
onMouseOver="swap('Zeile4',1) ändert den Hintergrund der Zelle mit der Id 'Zeile4'. Bei onMouseOver ist der zweite Parameter immer 1...
onMouseOut="swap('Zeile4',2) löscht den Hintergrund der Zelle mit der Id 'Zeile4'. Bei onMouseOut ist der zweite Parameter immer 2...
Ansonsten musst du den jeweiligen Zellen eine ID zuordnen (eine Id soll nur einmal pro Dokument verwendet werden!)
PHP: 
    <tr>
        <td id="Zeile4">Zeile 4</td>
    </tr>

Soweit sollte alles klar sein, ansonsten einfach nochmal nachfragen...


ciao

//PS: Läuft auf jedem Fall im IE6 und Mozilla...
 
Zuletzt bearbeitet:
Wow, genau das brauche ich.
Tausend Dank crono!!!!
Auch noch mit Erklärung, echt Cool.
Werd das gleich mal auf meiner Seite umsetzen.
Gruss
C4T
 
hi, und ich hab noch ne Frage dazu, wie sieht das ganze bei 8 Bildern in verschiedenen Tabellen zellen aus, die sich vom transparenten ins Farbige umwandeln sollen ( bei Mouseover?)?

Bitte um dringende Antwort!

Danke, Gruesse ennasus
 
Hallo,

ich hab noch ein paar fragen:
- was soll sich von Transparenten ins Farbige wandeln? Die Bilder ansich oder die Hintergrundfarbe der Tabellenzellen?
- Sollen die Bilder praktisch von unsichtbar in sichtbar "gefadet" werden, oder meintest du von Schwarz/Weis auf Farbe?
- Haben diese Bilder Imagemaps oder sind es ganz normale Links?

bye
Andreas
 
Hi, hier die Antworten:
hab zwei Bilder von einem Motiv erstellt einmal transparent und ein farbiges.
das trasparente bild soll sich beim überfahren eines positionierten textes in as farbige umwandeln, bei mouseover. und das mit mehreren texten, wobei sich die bilder in versch. zellen befinden.
I hope you unterstand me now
:) Gruß, Ennasus
 
Da gibts mehrere Möglichkeiten. Eine Davon:
Code: 
<html>
<head>
<script type="text/javaScript">
</head>
<body>
<table border="1">
    <tr>
        <td><img id="1" src="1t.gif"></td>
        <td><img id="2" src="2t.gif"></td>
    </tr>
    <tr>
        <td><img id="3" src="3t.gif"></td>
        <td><img id="4" src="4t.gif"></td>
    </tr>
    <tr>
        <td><span onmouseover="document.getElementById('1').src='1.jpg';" onmouseout="document.getElementById('1').src='1t.gif';" >Text 1</td>
        <td><span onmouseover="document.getElementById('2').src='2.jpg';" onmouseout="document.getElementById('2').src='2t.gif';">Text 2</td>
    </tr>
    <tr>
        <td><span onmouseover="document.getElementById('3').src='3.jpg';" onmouseout="document.getElementById('3').src='3t.gif';">Text 3</td>
        <td><span onmouseover="document.getElementById('4').src='4.jpg';" onmouseout="document.getElementById('4').src='4t.gif';">Text 4</td>
    </tr>
</table>
</body>

</html>
Schau dir einfach mal das Beispiel im Anhang an.


bye
 

Anhänge

Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück