nicht angemeldet
Gunnar Bittersmann
Gunnar Bittersmann
Gunnar Bittersmann
Gunnar Bittersmann
Gunnar Bittersmann
Hallo,
blöde Frage eigentlich, aber mir war so als hätte ich das schon öfters gesehen und mit "Hintergrund verlinken" usw. finde ich nichts.
Wie kann man den Hintergrund verlinken? Kann ich ein <div> verlinken?
Ich habe also einen <div> Container in dem ist Text und ein Bild. Nun soll der Benutzer egal auf welche Stelle des Textes oder ob er auf das Bild klickt zur entsprechenden Seite geleitet werden.
Am Besten: Wenn er nur mit dem Cursor in den Bereich des Containers kommt soll er schon den Link anklicken können.
Danke und Gruss
Hello out there!
Wie kann man den Hintergrund verlinken? Kann ich ein <div> verlinken?
Nein, nicht in HTML/XHTML1.x. (In XHTML 2 wird das endlich möglich sein.)
Ich habe also einen <div> Container in dem ist Text und ein Bild. Nun soll der Benutzer egal auf welche Stelle des Textes oder ob er auf das Bild klickt zur entsprechenden Seite geleitet werden.
Dann mache sowohl den Text als auch das Bild zum Link:
<div>
<a href="http://example.net"><img src="foo" alt="bar" /> Lorem ipsum dolor sit amet.</a>
</div>
bzw.
<div>
<a href="http://example.net"><img src="foo" alt="bar" /></a>
<p><a href="http://example.net">Lorem ipsum dolor sit amet.</a></p>
<p><a href="http://example.net">At vero eos et accusam et justo duo dolores et ea rebum.</a></p>
</div>
Am Besten: Wenn er nur mit dem Cursor in den Bereich des Containers kommt soll er schon den Link anklicken können.
Wie gesagt, nicht mit HTML/XHTML1.x. Mit 'onclick' und JavaScript ist das möglich; das könntest du _zusätzlich_ tun.
See ya up the road,
Gunnar
Hi!
In HTML 4.01 auch nicht?
szia, Lukas
Hi Gunnar,
Nein, nicht in HTML/XHTML1.x. (In XHTML 2 wird das endlich möglich sein.)
Danke für die Info.
Dann mache sowohl den Text als auch das Bild zum Link:
<div>
<a href="http://example.net"><img src="foo" alt="bar" /></a>
<p><a href="http://example.net">Lorem ipsum dolor sit amet.</a></p>
<p><a href="http://example.net">At vero eos et accusam et justo duo dolores et ea rebum.</a></p>
</div>
So mache ich es.
> Wie gesagt, nicht mit HTML/XHTML1.x. Mit 'onclick' und JavaScript ist das möglich; das könntest du \_zusätzlich\_ tun.
Ich bin kein Fan von Javascript, aber wie, äh, müsste es genau aussehen? ;-)
Danke und Gruss
Hi!
Ich hoffe, dass es jetzt richtig ist ;-)
Ich bin kein Fan von Javascript, aber wie, äh, müsste es genau aussehen? ;-)
<div onclick="location.href='deine_url.html'">Text</div>
szia, Lukas
Hi Lukas,
Ich hoffe, dass es jetzt richtig ist ;-)
Ich bin kein Fan von Javascript, aber wie, äh, müsste es genau aussehen? ;-)
<div onclick="location.href='deine_url.html'">Text</div>
szia, Lukas
Danke, aber das funzzt nicht. Ich habs so versucht:
<div id='search' onclick='location.href="/details/?object=L33456"'>
Wo liegt der Wurm begraben?
Danke und Gruss
Hallo,
Danke, aber das funzzt nicht. Ich habs so versucht:
<div id='search' onclick='location.href="/details/?object=L33456"'>
Wo liegt der Wurm begraben?
Hm, eigentlich sollte es funktionieren.
Beispiel
mfg. Daniel
Hallo Daniel,
<div id='search' onclick='location.href="/details/?object=L33456"'>
Wo liegt der Wurm begraben?
Hm, eigentlich sollte es funktionieren.
Du hast recht, es ging schon vorhin. Leider ändert sich der Cursor nicht wenn man über dem Link fährt. Kann man das ändern? Sondst weis der Benutzer gar nicht dass er klicken kann.
Danke und Gruss
Hello out there!
Leider ändert sich der Cursor nicht wenn man über dem Link fährt.
Da ist ja auch kein Link. Nur JavaScript.
Kann man das ändern?
Warum immer du CSS schon bei Eröffnung des Threads erwähntest – weise Voraussicht möchte ich dir dabei nicht unterstellen. ;-)
Aber jetzt kommt CSS tatsächlich ins Spiel: 'http://de.selfhtml.org/css/eigenschaften/anzeigefenster.htm#cursor@title=cursor'
See ya up the road,
Gunnar
Hi Gunnar,
Warum immer du CSS schon bei Eröffnung des Threads erwähntest
Ich hoffte eine solche Lösung für das Ausgangsproblem zu erhalten.
weise Voraussicht möchte ich dir dabei nicht unterstellen. ;-)
Warum, bist Du ein "kleine dicke Jungs mit Brille" Hasser? :-)
Aber jetzt kommt CSS tatsächlich ins Spiel: 'http://de.selfhtml.org/css/eigenschaften/anzeigefenster.htm#cursor@title=cursor'
Hab mir das angesehen. Sehr schön, aber: Sollte der Benutzer tatsächlich Javascript deaktiviert haben, dann zeigt sein Cursor dank CSS an, dass er klicken kann. Es funktioniert, aber dank Javascript nicht.
H E U L ! ! !
Warum kann nicht jemand schnell eine standardkonforme CSS Funktion erfinden? Aber im Ernst, kann ich diesen JS/CSS Wahnsinn irgendwie entschärfen? Ich will die Besucher nicht verwirren.
Danke und Gruss
Hallo,
Hab mir das angesehen. Sehr schön, aber: Sollte der Benutzer tatsächlich Javascript deaktiviert haben, dann zeigt sein Cursor dank CSS an, dass er klicken kann. Es funktioniert, aber dank Javascript nicht.
H E U L ! ! !
Warum kann nicht jemand schnell eine standardkonforme CSS Funktion erfinden? Aber im Ernst, kann ich diesen JS/CSS Wahnsinn irgendwie entschärfen? Ich will die Besucher nicht verwirren.
Nichts leichter als das ;-)
Beispiel2
einfach per JavaScript ein style-Attribut einhängen.
mfg. Daniel
Hallo Daniel,
Nichts leichter als das ;-)
Beispiel2einfach per JavaScript ein style-Attribut einhängen.
Das ist echt stark! Danke. Aber wenn ich zwei Finger bekomme, kann ich dann auch die ganze Hand haben? :-)
Besteht die Möglichkeit, dass wie ein normaler Link auch dieser Link in der Browserstatuszeile angezeigt wird?
Danke und Gruss
Hello out there!
Besteht die Möglichkeit, dass wie ein normaler Link auch dieser Link in der Browserstatuszeile angezeigt wird?
Nein, da inzwischen die meisten Browser <http://de.selfhtml.org/javascript/objekte/window.htm#status@title=Änderungen der Statuszeile> nicht gestatten dürften – aus gutem Grund.
See ya up the road,
Gunnar
Hi,
könnte man diesen Code auch für einen anklickbaren Header verwenden, der nur eine Hintergrundgrafik enthält, aber doch einen Link auf die Starseite haben soll?
<div id="logo" title="Example | Startseite" onclick="location.href = '../example.html'" onmouseover="this.style.cursor='pointer'"></div>
vg Bimel
Hello out there!
könnte man diesen Code auch für einen anklickbaren Header verwenden, der nur eine Hintergrundgrafik enthält, aber doch einen Link auf die Starseite haben soll?
<div id="logo" title="Example | Startseite" onclick="location.href = '../example.html'" onmouseover="this.style.cursor='pointer'"></div>
Warum sollte man das nicht können? Für Clients ohne JavaScript wäre eine JavaScript-freie Navigationsmöglichkeit anzubieten.
Aber warum sollte man das tun? Die Grafik vermittelt Inhalt; warum sollte sie eine Hintergrundgrafik sein? Bei Einbindung als 'img' erspart man sich das JavaScript-Gedöns.
Und den Cursor möchtest du beim Verlassen des Bereichs sicher auch noch wieder zurücksetzen. (Für die Änderung des Cursors ist bei fähigen Browsern auch kein JavaScript erforderlich.)
See ya up the road,
Gunnar
Hi,
Aber warum sollte man das tun? Die Grafik vermittelt Inhalt; warum sollte sie eine Hintergrundgrafik sein? Bei Einbindung als 'img' erspart man sich das JavaScript-Gedöns.
das stimmt schon. Nur ist die Headergrafik ein Fragment, das sich erst mit der Hintergrundgrafik des #inhalt zu einem sinnvollen Bild ergänzt. Deshalb soll es auch nicht ausdruckbar sein. Gut, eine Möglichkeit wäre, den Schriftzug vom Untergrund zu lösen und separat einbinden und drüberlegen. Das wäre aber dann eine weitere ca. 30 KB große Datei. Und ich bin schon bei 120 KB für die Startseite.
Und den Cursor möchtest du beim Verlassen des Bereichs sicher auch noch wieder zurücksetzen. (Für die Änderung des Cursors ist bei fähigen Browsern auch kein JavaScript erforderlich.)
Das versteh ich jetzt nicht. Das funktioniert bei IE 6, Opera und Firefox doch sehr gut.
vg Bimel
Hallo,
Und den Cursor möchtest du beim Verlassen des Bereichs sicher auch noch wieder zurücksetzen.
Warum sollte man das tun? Man bindet das Attribut „style="cursor:pointer"“ per JavaScript ein. Da sich der Mauszeiger aber ohnehin nur verändert, wenn man mit selbigem drüber fährt, ist es in diesem Fall nicht erforderlich, das Attribut beim Verlassen (des Bereiches) zu entfernen.
Man könnte diese Aktion also genauso gut beim Laden ausführen. Effekt wäre der Gleiche.
(Für die Änderung des Cursors ist bei fähigen Browsern auch kein JavaScript erforderlich.)
Das ist zwar korrekt, aber gerade das (nur funzen, wenn JS aktiv ist) ist in diesem Fall ja gewünscht.
mfg. Daniel
Hello out there!
Da sich der Mauszeiger aber ohnehin nur verändert, wenn man mit selbigem drüber fährt, ist es in diesem Fall nicht erforderlich, das Attribut beim Verlassen (des Bereiches) zu entfernen.
Denkfehler meinerseits.
Man könnte diese Aktion also genauso gut beim Laden ausführen. Effekt wäre der Gleiche.
Natürlich, so würde ich es tun. 'onmouseover' hatte mich irritiert.
See ya up the road,
Gunnar
Hello out there!
<div id='search' onclick='location.href="/details/?object=L33456"'>
Wo liegt der Wurm begraben?
Vielleicht beim ersten '/'?
See ya up the road,
Gunnar
Hi!
Ich habe noch nie solche Probleme gehabt. Aber ich denke du kannst entweder den ganzen DIV-Kontainer mit einem <a>-Tag umspannen, oder <div onclick="location.href = "url.hmtl"> schreiben.
szia, Lukas
Hello out there!
Ich habe noch nie solche Probleme gehabt. Aber ich denke du kannst entweder den ganzen DIV-Kontainer mit einem <a>-Tag umspannen,
Nein, kannst du nicht. Ein 'a'-Element darf kein 'div'-Element enthalten.
Zum richtigen Gebrauch der Begriffe „Tag“ und „Element“ siehe [MI].
oder <div onclick="location.href = "url.hmtl"> schreiben.
Zähle mal die Anführungszeichen nach.
Und, wie ich schon sagte, JavaScript nur _zusätzlichlich_ zur richtigen Verlinkung. Clients, die kein JavaScript ausführen, möchten ja auch zum Ziel gelangen.
See ya up the road,
Gunnar
Hi!
Ich habe noch nie solche Probleme gehabt. Aber ich denke du kannst entweder den ganzen DIV-Kontainer mit einem <a>-Tag umspannen,
Nein, kannst du nicht. Ein 'a'-Element darf kein 'div'-Element enthalten.
Das wusste ich nicht! Danke
oder <div onclick="location.href = "url.hmtl"> schreiben.
Oh man. Ich leg mich wieder ins Bett...
szia, Lukas