✔ Bild ändern bei Text-Hover

C

CantNo

Mitglied
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
 
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
 
Der Hover-Effekt (CSS) kann weiterhin verwendet werden, da ja der Bildertausch mit Javascript vorgenommen wird.

Code: 
<script type="text/javascript">
function swapImage(imgName,swapImg) {
        document.images[imgName].src=swapImg;
}
</script>

<body>

<div align="center">
<p><img src="gh.jpg" width="200" height="200" name="start" /></p>
</div>

<div align="center">
<a href="test.htm" class="info" onmouseover="swapImage('start','aktuelles.jpg')" onmouseout="swapImage('start','gh.jpg')">Aktuelles</a>
</div>

<div align="center">
<a href="test.htm" class="info" onmouseover="swapImage('start','heizung.jpg')" onmouseout="swapImage('start','gh.jpg')">Heizung</a>
</div>

<div align="center">
<a href="test.htm" class="info" onmouseover="swapImage('start','sanitaer.jpg')" onmouseout="swapImage('start','gh.jpg')">Sanitaer</a>
</div>

</body>


mfg Maik
 
Dieser Thread ist zwar schaon Asbach alt, aber dennoch top aktuell.
Drei Tage habe ich alles mögliche aus dem Internet ausprobiert, ohne Erfolg.
Erst der Kommentar von Maik und sein gepostetes Script hat mir die Lösung meines Problems beseitigt.
Der einzige Code der bisher in einer Whileschleife funktionierte.
Ein fast 8 Jahre altes Thread kann also top aktuell sein.
Danke Maik.
 
Robby12 hat gesagt.:
Dieser Thread ist zwar schaon Asbach alt, aber dennoch top aktuell.
Drei Tage habe ich alles mögliche aus dem Internet ausprobiert, ohne Erfolg.
Erst der Kommentar von Maik und sein gepostetes Script hat mir die Lösung meines Problems beseitigt.
Der einzige Code der bisher in einer Whileschleife funktionierte.
Ein fast 8 Jahre altes Thread kann also top aktuell sein.
Danke Maik.
Zum Vergrößern anklicken....

In der heutigen Zeit geht das mit jQuery weitaus einfacher ^^
Theoretisch ist es auch mit CSS möglich, man müsse dann nur die Klassen bzw. IDs vergeben.
 
EuroCent hat gesagt.:
In der heutigen Zeit geht das mit jQuery weitaus einfacher :D
Theoretisch ist es auch mit CSS möglich, man müsse dann nur die Klassen bzw. IDs vergeben.
Zum Vergrößern anklicken....

Hatte ich alles getestet, da ich die Daten aus der Datenbank hohle und diese oberhalb des Datenbankabrufes wieder erscheinen müssen, war es recht kompliziert. Der einzige Code der wirklich funktionierte, war der von Maik.
Es kann aber auch daran gelegen haben, das sich einige Scripte nicht mit anderen Vertragen, da ich verschiedene laufen habe.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück