ERLEDIGT
JA
JA
ANTWORTEN
4
4
ZUGRIFFE
1094
1094
EMPFEHLEN
-
Hi,
ist es möglich, ein unanhängig vom Text stehendes Bild, bei einem Mouseover über den Text (Realisiert mit css) zu ändern?
HTML-Code:
<body style="background-color: #e6e6e6">
<div align="center">
<p><img src="gh.jpg" width="200" height="200" /></p>
</div>
<div align="center">
<a href="test.htm" class="info">Aktuelles</a>
</div>
<br>
<div align="center">
<a href="test.htm" class="info">Heizung</a>
</div>
<br>
<div align="center">
<a href="test.htm" class="info">Sanitaer</a>
</div>
<br>
</body>
CSS-Code:
p{
font-family:arial, helvetica, sans-serif;
color: #000000;
font-size: 11px;
text-decoration:none;
}
a{
font-family:arial, helvetica, sans-serif;
color: #000000;
font-size: 11px;
text-decoration:none;
font-weight:bold;
}
a:hover{
font-family:arial, helvetica, sans-serif;
color: #c2baba;
font-size: 11px;
text-decoration: underline;
font-weight:bold;
}
Danke
-
03.02.09 13:08 #2Maik Tutorials.de Gastzugang
Hi,
mit dieser Markup-Struktur im HTML-Code ist das mit CSS nicht möglich, hierfür wäre dann Javascript erforderlich.
Ein ähnlich gelagertes Beispiel kannst du dem Thema JavaScript-basierte Bildergalerie entnehmen, in dem dann der onclick-Eventhandler gegen onmouseover getauscht werden muß.
mfg Maik
-
Sry, bin noch ziemlicher Anfänger auf dem Gebiet!
Würde sich den JS und CSS kominieren lassen? Denn ich würde die Hover Effekt beim Text gerne bestehen lassen...
Wir würde dass denn mit JS funktionieren? (Hilfreich wäre, wenn mir das jemand direkt in meinem Code erklären würde.)
Danke
-
03.02.09 13:18 #4Maik Tutorials.de Gastzugang
Der Hover-Effekt (CSS) kann weiterhin verwendet werden, da ja der Bildertausch mit Javascript vorgenommen wird.
Code :1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
[b]<script type="text/javascript"> function swapImage(imgName,swapImg) { document.images[imgName].src=swapImg; } </script>[/b] <body> <div align="center"> <p><img src="gh.jpg" width="200" height="200" [b]name="start"[/b] /></p> </div> <div align="center"> <a href="test.htm" class="info" [b]onmouseover="swapImage('start','aktuelles.jpg')" onmouseout="swapImage('start','gh.jpg')"[/b]>Aktuelles</a> </div> <div align="center"> <a href="test.htm" class="info" [b]onmouseover="swapImage('start','heizung.jpg')" onmouseout="swapImage('start','gh.jpg')"[/b]>Heizung</a> </div> <div align="center"> <a href="test.htm" class="info" [b]onmouseover="swapImage('start','sanitaer.jpg')" onmouseout="swapImage('start','gh.jpg')"[/b]>Sanitaer</a> </div> </body>
mfg Maik
-
Ja, genau das was ich gesucht habe!
Danke
Zitieren
Ähnliche Themen
-
Hover miteinander Verbinden (Link Text & Link Bild)
Von vodka im Forum Javascript & AjaxAntworten: 1Letzter Beitrag: 17.05.10, 13:20 -
Text bei Hover über Bild
Von Superdok im Forum CSSAntworten: 10Letzter Beitrag: 11.11.09, 19:32 -
Hover bei Text Link soll Bild in Div anzeigen
Von gnuisnotunix im Forum CSSAntworten: 7Letzter Beitrag: 04.08.09, 19:51 -
Bei Hover Bild+Text einblenden
Von kirchel im Forum Flash PlattformAntworten: 2Letzter Beitrag: 26.09.06, 14:47 -
Hover bei Bild und Text kombiniert
Von Sonador im Forum CSSAntworten: 6Letzter Beitrag: 04.10.04, 22:50
Login
