nicht angemeldet
Zwei gleiche Links gleichzeitig highlighten?
0 0 1 
Gunnar Bittersmann
Zwei gleiche Links gleichzeitig highlighten?
Hallo Community,
ich habe ein kleines Problem, bei dem ich nicht weiterkomme.
Ich habe einen Link, bestehend aus einer RollOver Grafik und einem danebenstehenden Textlink.
Wenn man mit der Maus auf die Grafik fährt, gibt's ein RollOver Effekt, der die Grafik ändert. Ein Klick auf die Grafik löst den Link aus.
Neben dem Grafiklink steht ein Textlink, der zur gleichen Seite führt und ebenfalls einen Hover Effekt (CSS) hat.
Soweit so gut. Nun bekomme ich es leider nicht hin, dass der Textlink einen Hovereffekt zeigt, wenn ich mit der Maus über die Grafik fahre (damit es für den User sofort erfahrbar ist, dass beide Links ein und dasselbe sind).
Anders herum funktioniert es, siehe Code:
<a href="picture.jpg"
onMouseOver="swapImage('icon_download_image_lo','','pics/icon_download_image_hi.gif',0)"
onMouseOut="swapImgRestore()" />
<img src="pics/icon_download_image_lo.gif" name="icon_download_image_lo" width="29" height="23" />
</a>
<a href="picture.jpg"
onMouseOver="swapImage('icon_download_image_lo','','pics/icon_download_image_hi.gif',0)"
onMouseOut="swapImgRestore()">
</a>
Ich bin für jede Idee dankbar. Den Link würde ich gerne zweigeteilt lassen, sonst wäre ja beispielsweise eine Grafik kombiniert mit Bild und Text möglich.
Danke,
Mirko Essmüller
-
Sorry, hier der Code mit dem Textlink, den ich nicht eingefügt hatte:
<a href="picture.jpg"
onMouseOver="swapImage('icon_download_image_lo','','pics/icon_download_image_hi.gif',0)"
onMouseOut="swapImgRestore()" />
<img src="pics/icon_download_image_lo.gif" name="icon_download_image_lo" width="29" height="23" />
</a><a href="picture.jpg"
onMouseOver="swapImage('icon_download_image_lo','','pics/icon_download_image_hi.gif',0)"
onMouseOut="swapImgRestore()">Bild anzeigen
</a>-
Vielen Dank für Eure Hinweise. Habe es nun gelöst bekommen über JavaScript, hier für später Suchende mein Code:
<html><head>
<script language="javascript" type="text/javascript">
<!--
function hoverLink(el,state) {
elName=document.getElementById(el);
if (state == 1){
elName.style.color = '#ff0000';
}else{
elName.style.color = '#fff000';
}
return true;
}
// -->
</script></head>
<body>
<img id="pic" src="logo.png" onMouseOver="hoverLink('textlink',1)" onMouseOut="hoverLink('textlink',0)">
<a id="textlink" onMouseOver="hoverLink(this,1)" href="test">Dies ist der Link</a>
</body>
</html>-
@@Mirko Essmüller:
Habe es nun gelöst bekommen über JavaScript, hier für später Suchende mein Code:
Ähm, wer sollte den brauchen, wenn es doch besser geht?
Aber zu deinem Code noch ein paar Hinweise:
<html><head>
DOCTYPE fehlt.
<script language="javascript" type="text/javascript">
Das 'language'-Attribut ist völlig überflüssig. (In den Strict-Varianten sogar falsch.)
<!--
Die Auskommentierung ist völlig überflüssig. (Und lass dir diesbezüglich keinen Cybaeren aufbinden! ;->)
function hoverLink(el,state) {
elName=document.getElementById(el);
if (state == 1){Der Vergleich ist völlig überflüssig. '
if (state)' genügt, da 1 alstrueund 0 alsfalsebehandelt wird. Es bietet sich an, nicht 1 bzw. 0 als Parameter zu übergeben, sonderntruebzw.false.<img id="pic" src="logo.png" onMouseOver="hoverLink('textlink',1)" onMouseOut="hoverLink('textlink',0)">
Das 'alt'-Attribut ist völlig unterflüssig. (Sprich: Pflicht.)
Element- und Attributbezeichner sind in HTML zwar nicht case-sensitiv, dennoch könnte konsequente Kleinschreibung vorteilhaft sein.
Live long and prosper,
Gunnar--
Erwebsregel 208: Manchmal ist das einzige, was gefährlicher als eine Frage ist, eine Antwort.
-
-
-
Füge eine Zusatzklasse "hover" hinzu, über die Du die gleichen CSS-Attribute wie bei :hover vergibst.
Dann setze per JavaScript die Klasse auf den Link, sobald ein Mouseover über das Bild stattfindet und entferne sie beim onmouseout.
Gruß, LX
--
X-Self-Code: sh:( fo:) ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: Unusual
X-Please-Search-Archive-First: Absolutely Yes -
@@Mirko Essmüller:
Ich habe einen Link, bestehend aus einer RollOver Grafik und einem danebenstehenden Textlink.
Lass mich raten: Die Grafik dient der Verzierung? Dann binde sie als Hintergrundgrafik des Links ein. Per 'a:hover' änderst du die Hintergrundgrafik und die Texteigenschaften. Kein JavaScript.
Live long and prosper,
Gunnar--
Erwebsregel 208: Manchmal ist das einzige, was gefährlicher als eine Frage ist, eine Antwort.