Supportnet / Forum / Webseiten/HTML
Beim Überfahren eines Links anderen Linktitel?
Frage
Moin,
möchte folgendes basteln:
Habe ein Menü mit schwarzen Text-Links. Wenn ich zum Beispiel über den Punkt "Home" fahre, soll er 1. in rot dargestellt werden (was man ja mit css machen kann) und 2. soll sich der Titel von "Home" in zum Beispiel "Test" verwandeln. Bei einem Klick darauf soll es in diesem Zustand bleiben, damit man erkennt wo man sich gerade befindet. Beim Klick auf einen anderen Link soll das gleiche geschehen und logischerweise muss der zuerst geklickte Link wieder in den Urzustand zurückgesetzt werden.
Die Farbänderung kann ich machen und das klappt. Das was nicht klappt, ist 1. der Titelwechsel und 2. das "eingerastet bleiben" bis man auf einen anderen Link klickt.
Ich bin mir nicht sicher, ob sich das mit css alleine bewerkstelligen lässt, es wäre auch kein Weltuntergang, wenn ich auf JavaScript zurückgreifen müsste. Müsste irgendwas mit onmouseover und onmouseout sein, oder?
Wenn mir jemand einen anpassbaren Beispielcode nennen kann, wäre ich mehr als glücklich.
Vielen dank an alle Helfer in diesem Forum.
Antwort 1 von rfb
erst einmal zum Link-Text ändern bei onmouseover:
der Rest ist ein wenig komplizierter - vielleicht später
<a ... onmouseover="this.firstChild.data=´TEST´" onmouseout="this.firstChild.data=´HOME´">HOME</a>
der Rest ist ein wenig komplizierter - vielleicht später
Antwort 2 von rfb
Nachfrage:
bleiben die Links stehen, d.h. befinden sie sich z.B. in einem Navi-Frame bzw. beziehen sie sich auf Anker auf derselben Seite - oder wird sowieso mit jedem Link die Seite und damit auch die Linkliste neu geladen?
bleiben die Links stehen, d.h. befinden sie sich z.B. in einem Navi-Frame bzw. beziehen sie sich auf Anker auf derselben Seite - oder wird sowieso mit jedem Link die Seite und damit auch die Linkliste neu geladen?
Antwort 3 von Blender
Hallo rfb und ein großes Danke.
Zu Nummer 1: ich habe das mit dem firstChild einmal ausprobiert, es kam jedoch zu keinem Erfolg, obwohl JavaScript aktiviert war. Es bleibt nach wie vor, egal ob beim Überfahren der Maus oder nicht, der normale Linktext stehen.
Zu Nummer 2: Ich habe eine feste Seite die wärend des Besuches kein einziges mal refreshed wird. Der Inhalt wird nämlich in einem Iframe dargestellt und das Menü ist somit auch statisch, wird also nicht erneut geladen.
Helfen Dir diese Informationen weiter?
mfg.
Zu Nummer 1: ich habe das mit dem firstChild einmal ausprobiert, es kam jedoch zu keinem Erfolg, obwohl JavaScript aktiviert war. Es bleibt nach wie vor, egal ob beim Überfahren der Maus oder nicht, der normale Linktext stehen.
Zu Nummer 2: Ich habe eine feste Seite die wärend des Besuches kein einziges mal refreshed wird. Der Inhalt wird nämlich in einem Iframe dargestellt und das Menü ist somit auch statisch, wird also nicht erneut geladen.
Helfen Dir diese Informationen weiter?
mfg.
Antwort 4 von rfb
OK - erst einmal zum onmouseover:
du musst auf die Reihenfolge der einfachen und doppelten Anführungszeichen achten und - wenn du den Code hier raus kopierst - die einfachen ersetzen durch die "richtigen" einfachen (die neben dem Ä auf der Tastatur), SN ersetzt die leider durch ein ähnliches Zeichen, das die Browser nicht mögen.
du musst auf die Reihenfolge der einfachen und doppelten Anführungszeichen achten und - wenn du den Code hier raus kopierst - die einfachen ersetzen durch die "richtigen" einfachen (die neben dem Ä auf der Tastatur), SN ersetzt die leider durch ein ähnliches Zeichen, das die Browser nicht mögen.
Antwort 5 von rfb
hier ein Beispiel auf Basis des iframe-beispiels von SelfHTML:
wenn du andere/weitere CSS-Eigenschaften ändern willst, musst du entsprechend statt ....style.border die gewünschte Eigenschaft angeben.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="de">
<head>
<style type="text/css"><!--
a { display:block; width:auto; height:auto; border:#000 outset thick;}
a:link{color:#f0f;}
a:visited{color:#ff0;}
a:hover{color:#f00; border:inset thick; }
a:active{color:#f00; border:inset thick;}
//-->
</style>
<script type="text/javascript">
<!--
var gelinkt="";
function geklickt(a) {
if (gelinkt!="") gelinkt.style.border="outset thick";
gelinkt=a;
a.style.border="inset thick";
return true;
}
//-->
</script>
<title>Seitentitel</title>
</head>
<body>
<iframe src="startseite.htm" name="Fensterlein" width="500" height="400" marginheight="10" marginwidth="10" align="right">
...
</iframe>
<p>
<a href="willkommen.htm" target="Fensterlein" onclick="geklickt(this)"><b>andere Seite</b></a><br>
<a href="startseite.htm" target="Fensterlein" onclick="geklickt(this)"><b>erste Seite</b></a>
</p>
</body>
</html>
wenn du andere/weitere CSS-Eigenschaften ändern willst, musst du entsprechend statt ....style.border die gewünschte Eigenschaft angeben.