Hover miteinander Verbinden (Link Text & Link Bild)

vodka · 17. Mai 2010

Hallo,

Habe eine Frage, und zwar:

Ich habe ein Link mit einem underline Hover, und weiter unten ein Bild mit einem border Hover. Der dazgehörige Link ist für beide der gleiche.

Meine frage ist wie funktioniert das, dass wen man z.B. mit der Maus über den Textlink fährt der normale underline Hover kommt aber dazu noch automatisch der Hover vom Bild auch erscheint ohne mit der Mause über das Bild zu fahren?
Und das ganze auch umgekehrt.

Kenn mich leider mit Javascript nicht so aus aber ich denke dies ist nur mit Javascript möglich.

Kann mir jemand bitte helfen.

Gruss

Nico

Quaese · 17. Mai 2010

Hi,

den hover-Effekt des Links würde ich über CSS regeln (Pseudeeigenschaft :hover).

Um die Eigenschaften des Bildes bei mouseover bzw. mouseout zu ändern, gibst du den img-Tags am besten IDs, über die sie eindeutig zu identifizieren sind. Weiterhin erstellst du eine CSS-Klasse, die die Auszeichnungen für die Bilder beim hovern enthält. Diese wird in einer Funktion über die Eigenschaft className dem zugehörigen Bild zugewiesen.

Beispiel:

Code:

<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
  <!--
a{
  text-decoration: none;
}
a:hover{
  text-decoration: underline;
}
.img_hover{
  border: 1px solid #f00;
}
 //-->
</style>
<script type="text/javascript">
  <!--
function toggleHover(blnHover, strID){
  document.getElementById(strID).className = (blnHover)? 'img_hover' : '';
}
 //-->
</script>
</head>
<body>
<a href="http://www.tutorials.de/" onmouseover="toggleHover(true, 'img_01');" onmouseout="toggleHover(false, 'img_01');">test</a>
<img id="img_01" src="bild1.gif" width="120" height="121" border="0" alt="">
<hr>
<a href="http://www.tutorials.de/" onmouseover="toggleHover(true, 'img_02');" onmouseout="toggleHover(false, 'img_02');">test</a>
<img id="img_02" src="bild2.gif" width="120" height="121" border="0" alt="">
</body>
</html>

Ciao
Quaese

Hover miteinander Verbinden (Link Text & Link Bild)

vodka

Mitglied

Quaese

Moderator

Neue Beiträge