Textaustausch in Hyperlink

[kleinfeld]

Hallo erstmal von einem Neuling an alle!
Ich habe eine ganz simple Frage, auf die ich einfach keine Antwort finde. Wie kann ich es erreichen, dass sich wenn ich auf dein ganz normales Link klicke, der Text des Linkes verändert. Also quasi bei Rollover soll sich der Text des Links an sich verändern. Das ist auch schon alles. Ich hab keine Ahnung ob es geht und wie (html, css, javaScript)???
Im vorraus schonmal vielen Dank für die Antworten

Gruß Kleinfeld

[Mathias Brodala]

Hallo kleinfeld.

Wie kann ich es erreichen, dass sich wenn ich auf dein ganz normales Link klicke,

Meins?

der Text des Linkes verändert. Also quasi bei Rollover soll sich der Text des Links an sich verändern.

Ja was denn nun? Beim Klick oder beim Hovern? Während für ersteres wohl eine JavaScript–Lösung erforderlich ist, lässt sich letzteres wunderbar nur mit CSS umsetzen:

a span#after { /* Den einzublendenden Text im Normalzustand ausblenden */  
  display:none;  
}  
a:hover {  
  background:#fff; /* Eine sinnlose Regel, nur für den IE, welcher ansonsten den Link nicht neu rendert. */  
}  
a:hover span#before { /* Beim Hovern den normalen Text ausblenden … */  
  display:none;  
}  
a:hover span#after { /* … und den neuen Text einblenden */  
  display:inline;  
}

Und das HTML dazu:

<p><a href=""><span id="before">Vorher</span><span id="after">Nachher</span></a></p>

Für die JS–Lösung könntest du <http://de.selfhtml.org/javascript/sprache/eventhandler.htm#onclick@title=beim Klicken> auf den Link http://de.selfhtml.org/javascript/objekte/node.htm#first_child@title=den http://de.selfhtml.org/javascript/objekte/node.htm#node_value@title=Inhalt seines Textknotens neu zuweisen.

Einen schönen Freitag noch.

Gruß, Mathias

[kleinfeld]

Hallo und erstmal vielen Dank an beide!
Vorweg, ja, der Text soll sich austauschen wenn man mit der Maus darüberfährt.
Ich habe mich jetzt für die CSS Variante entschieden und das klappt auch wunderbar. Allerings gibt es jetzt noch zwei kleine Probleme.

1. Der Hintergrund der Seite ist nicht Weiss, sondern besteht aus einem Bild. Kann ich es irgendwie schaffen, dass der Hintergrund des zweiten Textes (der durch den ersten eingetauscht wird) durchsichtig ist? (habe jetzt erstmal eine ähnliche Farbe wie die des Hintergrundes genommen und zur Not gehts auch so).

2. Kann ich auch einstellen, dass der Link Quasi tot ist, also dass gar nichts passiert wenn man daraufklickt? Der Link ist normalerweise eine Verweisung auf eine Stellenangebots-Seite der Firma. Wenn man ihn jetzt überfährt kommt der Hinweis: keine Stellenangebote verfügbar. Erst wenn es wieder Stellenangebote gibt, soll er wieder auf die Seite verweisen. Momentan verweist er auf die gleiche Seite auf der sich der Link befindet. Das stört mich aber, da es immer anfängt zu Laden, aber dann nichts passiert.

Fragen über Fragen :-)

Vielen Dank fürs Lesen

[Gunnar Bittersmann]

Hello out there!

Wenn man ihn jetzt überfährt kommt der Hinweis: keine Stellenangebote verfügbar.

Ist das die Antwort auf meine Frage „Was willst du damit erreichen?“? Dann nochmals: „Für sinnvoll erachte ich [das] nicht.“

Die Information „keine Stellenangebote verfügbar“ sollte für den Nutzer sofort sichtbar sein, nicht erst, wenn er mit der Maus über den Link fährt. (Und was ist, wenn der Nutzer gar nicht mit einer Maus navigiert?)

Sorge also dafür, dass je nach Vorhandensein von Stellenangeboten der Text „keine Stellenangebote verfügbar“ (ohne Verlinkung) bzw. ein Link zu den Stellenangeboten ausgegeben wird – mit einer serverseitigen Technik deiner Wahl (bspw. PHP).

„Wenn das geschehen ist […], erfreut sich Dein aktuelles Schein-Problem eines erheblichen Mangels an Vorhandensein.“ [Cheatah]

See ya up the road,
Gunnar

[Mathias Brodala]

Hallo kleinfeld.

Abgesehen von Gunnars berechtigten Einwänden hier noch die Antworten auf deine Fragen:

1. Der Hintergrund der Seite ist nicht Weiss, sondern besteht aus einem Bild. Kann ich es irgendwie schaffen, dass der Hintergrund des zweiten Textes (der durch den ersten eingetauscht wird) durchsichtig ist?

Natürlich, verwende einfach die entsprechende Farbangabe (transparent) für den IE–Schubser.

2. Kann ich auch einstellen, dass der Link Quasi tot ist, also dass gar nichts passiert wenn man daraufklickt?

Ja: nimm keinen Link. Du kannst an Stelle von a irgend ein anderes geeignetes Element nehmen. Die IE–Unterstützung ist damit aber dann dahin, weil dieser :hover nur bei Links versteht.

Einen schönen Freitag noch.

Gruß, Mathias

[Gunnar Bittersmann]

Hello out there!

Wie kann ich es erreichen, dass sich wenn ich auf dein ganz normales Link klicke, der Text des Linkes verändert. Also quasi bei Rollover soll sich der Text des Links an sich verändern.

Äh, wie denn nun: beim Anclicken oder beim Überfahren mit der Maus?

Für sinnvoll erachte ich beides nicht. Was willst du damit erreichen?

html

Nein. HTML beschreibt die Dokumentstruktur, nichts Dynamisches.

css

Du kannst mit ':hover' in Kombination mit ':before' oder ':after' Inhalt hinzufügen, nicht aber bestehenden löschen (ohne zusätzliches Markup; CSS-fähiger UA vorausgesetzt).

javaScript

Bei Eintritt des passenden Events änderst du für das entsprechende Elementobjekt 'firstChild.nodeValue'.

See ya up the road,
Gunnar