a:hover ohne tatsächlichen Verweis (Infobox)

[Oliver]

Hallo,

ich kann mir vorstellen das ich nicht der einzige bin mit diesem Problem, konnte in der Suche aber leider nichts finden.

Ich versuche mit <a href="..."> einen Link zu erzeugen der beim Anklicken jedoch keinerlei Reaktion zeigt, da ich nur den hover-Effekt (Infobox) nutzen möchte.

Erläuterung:

Ich habe auf meiner Seite viel Text, welcher vertikal gescrollt wird. Zu einzelnen Wörtern im Text gebe ich eine zusätliche Erklärung mittels Infobox wenn man mit der Maus über das Wort fährt.
Mein Problem ist, dass dieser hover-Effekt, meines Wissens nach, im IE <= 6 nur mit dem Tag <a href="..."> funktioniert und ich somit einen echten Verweis erzeugen muss. Allerdings ist es sehr unvorteilhaft wenn der user den Link tatsächlich anklickt und die Textstelle dementsprechend verlassen wird.

Meine Infobox legt sich übrigens über das eigentliche Wort das erklärt werden soll (teilweise transparent, so dass das entsprechende Wort noch zu lesen ist), also auch über den eigentlichen Link.  Vielleicht ist es auch möglich den Inhalt der box so zu ändern das ein anklicken wirkungslos bleibt? Allerdings ist die box ja innerhalb des Verweises
<a href="...">Text<span>box</span></a>
und daher führt sie beim Klick stehts zum Verweis.

Auch wenn der Link mit <a name="hier" href="#hier"> auf sich selbst referenziert finde ich es sehr unbefriedigend, da hierbei die Textstelle an den Seitenanfang springt, was doch eher verwirrend ist.

Ich möchte meine Seite gerne mit reinem HTML/CSS lösen.

Ein Lösungsvorschlag den ich bekommen habe war href mit einem javascript void (0) verweis zu versehen (habe den genauen Code vergessen zu speichern und kenne mich mit JS nicht aus, es wäre nett wenn mir nochmals jemand den code geben könnte falls sich keine andere Lösung findet). Das hat soweit auch funktioniert nur bei einem kurzen test im IE6 bekam ich unter der Menüleiste diesen gelben Hinweis auf aktiven Inhalt, was ich auch sehr störend finde.

Gibt es irgendeine andere Möglichkeit den Link praktisch "tot" zu stellen? So das möglichst sämtliche Browser beim Anklicken keinerlei Reaktion zeigen?

Gruß,
Oliver

[topfblume]

moin ...

Auf meinen Seiten habe ich es so gelöst:

----------------------
html
----------------------
<dd><a href="#" class="info">LINK<span>INFOBOX</span></a></dd>

----------------------
css
----------------------
a.info
 {
 cursor: help;
 }
a.info:hover
 {
 border-style: none; //Für den IE//
 }
a.info span
 {
 display: none;
 }
a.info:hover span
 {
 display: block;
 top: 300px;
 right: 300px;
 position: absolute;
 }
----------------------
gruß ...

[Oliver]

<dd><a href="#" class="info">LINK<span>INFOBOX</span></a></dd>

Das würde mir nichts bringen da href="#" an den Anfang des Textes springt.

@Susanne: sorry, aber bei deinen Links finde ich ebenfalls keine Lösung für mein Problem.

Kann es sein das ihr mein Posting nicht richtig gelesen habt?
Ich WEISS wie eine Infobox realisiert wird. Mein Problem ist das ich dafür einen Verweis generieren muss den man anklicken kann. Ich möchte aber gar nicht das der Verweis angeklickt werden kann bzw. ich will das ein Anklicken schlicht NICHTS bewirkt - damit man nicht aus der Textposition gerissen wird.

[dr.Colossos]

HI,

evtl. suchst du danach ...

<a href="javascript:my_function(param1, param2);">SomeText</a>

Aber weiso muss es ein Link (<a></a>) sein, wuerde es nicht allgemeiner mit <div/span onclick="my_function(param1, param2);"></div/span> gehen?

Hope this helps

[MudGuard]

Hi,

Aber weiso muss es ein Link (<a></a>) sein, wuerde es nicht allgemeiner mit <div/span onclick="my_function(param1, param2);"></div/span> gehen?

Weil es um einen hover-Effekt geht und IE <= 6 zu blöd ist, hover auf andere Elemente als a (mit href-Attribut) anzuwenden.

cu,
Andreas

[Oliver]

Weil es um einen hover-Effekt geht und IE <= 6 zu blöd ist, hover auf andere Elemente als a (mit href-Attribut) anzuwenden.

juhu, endlich hat mich jemand verstanden ;)

evtl. suchst du danach ...

<a href="javascript:my_function(param1, param2);">SomeText</a>

Naja wie gesagt, ich würde gerne komplett auf Javascript verzichten und reines HTML/CSS verwenden.

Und wenn schon JS dann so:

<a href="javascript:void(0)">Text<span>box</span></a> (ja hab den code wieder gefunden)

Damit ist der Link so richtig schön "tot" und bewirkt gar nichts (außer mit hover die Infobox zu öffnen). Nur wie gesagt gibt da der Browser je nach Einstellung einen blöden Hinweis aus wegen Javascript. Trifft sicher nicht auf viele Clients zu aber ohne JS fänd ich es einfach eleganter.

Hätte nicht gedacht das es so schwierig ist einen Link tot zu kriegen.. noch irgendwelche Ideen?

[dr.Colossos]

Hi,

okay, ja, hab dich falsch verstanden.

in der Hoffnung mich nicht nochmals zu blamieren wie waere das?

<html>
 <head>
  <style>
   a span
   {
    display: none;
   }
   a:hover span
   {
    display: inline;
   }
  </style>
 </head>
 <body>
  <a onclick="return false;" name="Ankername" href="#Ankername">
   Text
   <span>
    box
   </span>
  </a>
 </body>
</html>

Das 'onclick="return false;"' brauchst nicht unbedingt, hat aber den Vorteil das wirklich garnix passiert. Falls du das mit PHP o.ae. erstaellst, dann kannst ja ermitteln ob scripting aktiviert ist und das ggf. dazunehmen.

Wenn es nicht drinnen ist, dann scrollt der Browser den Link ganz an den Seitenanfang ... weiss jetzt nicht ob das schlecht is fuer deinen Einsatz.

Evtl. hilfst dir ja ...

[dr.Colossos]

Hi,

wenn du noch ein

a:active span
   {
    display: inline;
   }

einfuegst, dann bleibt "box" auch nach dem Klick noch bestehen ... zumindest bei IE7 und Opera, FF2.0 macht's wiederum nicht.

a:focus span
   {
    display: inline;
   }
macht nur FF2.0, leider ist der Focus nach dem Klick wieder weg, d.h. geht auch nicht.

U.U. kannst ja eine Weiche einbauen (kein CSS-Hack) wenn du PHP o.ae. nutzt, und das in einer Klasse kapseln die fuer IE halt den zusaetlichen (CSS/HTML)-Code erstellt.

[Oliver]

@ dr.Colossos:

Also ich hätte lieber eine universelle Lösung für möglichst alle Browser, von daher kommt dein Nachtrag Vroschlag eher nicht in Frage, ich fang deswegen jetzt auch nicht an mit PHP zu fummeln (ja, vielleicht bin ich unflexibel).

Und das hier:

<a onclick="return false;" name="Ankername" href="#Ankername">

bringt mir schon beim laden der Seite den Hinweis auf aktive Inhalte.
Und zur Referenzierung hab ich auch schon in meinem ersten Post geschrieben:

Auch wenn der Link mit <a name="hier" href="#hier"> auf sich selbst referenziert finde ich es sehr unbefriedigend, da hierbei die Textstelle an den Seitenanfang springt, was doch eher verwirrend ist.

Aber ich weiß es zu schätzen das du dir Gedanken gemacht hast, danke! Eine einfache Lösung scheint es wohl nicht zu geben.

Gruß,
Oliver

[dr.Colossos]

Bitte sehr ... sorry wenn ich deine Ideen "kopiert habe", bin vom Forum abgewandert, und spaeter hab ich mich nochmal damit beschaeftigt, ohne deine Ergebnisse mit meinen zu vergleichen.

Stimmt, ich denke browser-uebergreifend gibts keine Loesung ...

Viel Erfolg

[trunx]

Hi,

probiere doch mal einen selbstreferenziellen Verweis:

<a name="infobox" href="#infobox">Info</a>

bye trunx

[Oliver]

Hi,

probiere doch mal einen selbstreferenziellen Verweis:

<a name="infobox" href="#infobox">Info</a>

bye trunx

Dazu muss ich wohl nichts mehr sagen...

Bitte vor dem posten erst lesen! (Wenigstens den ersten Beitrag...)

Gruß,
Oliver

[trunx]

Hi,

probiere doch mal einen selbstreferenziellen Verweis:

<a name="infobox" href="#infobox">Info</a>

Dazu muss ich wohl nichts mehr sagen...

Bitte vor dem posten erst lesen! (Wenigstens den ersten Beitrag...)

hmm, ich hab den ganzen thread gelesen, da ist diese Idee wohl wieder ins Nirvana verschwunden, kein Grund sauer zu sein ... von allen Ideen, die kamen, ist diese auch wenn sie natürlich unbefriedigend bleibt, eine der Besseren, aber es gibt natürlich noch andere, sei doch nicht so einfallslos :D ...

<a name="infobox"><!--[if IE]>
</a><a href="#infobox">
<![endif]-->Info</a>

oder warum nicht (wenn die Leute unbedingt klicken wollen)

<a href="infobox.hmtl" target="_blank">Info</a>

bye trunx

[Oliver]

Oh, hab gar nicht mehr mit einer Antwort gerechnet.

sei doch nicht so einfallslos :D ...

Deswegen hoffe ich ja auf eure Kreativität :D

<a href="infobox.hmtl" target="_blank">Info</a>

Du meinst den eigentlichen Inhalt der Infobox bei Klick nochmal in einem neuen Fenster öffnen? Ja, wäre auch eine Möglichkeit.

<a name="infobox"><!--[if IE]>
</a><a href="#infobox">
<![endif]-->Info</a>

Damit würde die Textstelle dann nur im IE an den Seitenanfang springen. Dann würde ich es aber glatt mit [if lt IE 7] auf IE<7 einschränken, da der IE 7 hover ja auch ohne href kann. Eigentlich gar nicht schlecht. Allerdings glaube ich, dass doch noch einige mit solch alten browsern surfen?! Oder ich schreibe hier href="javascript:void(0)" Dann kommt der Hinweis auf aktive Inhalte nur wenn IE<7 UND wenn aktive Inhalte noch nicht generell erlaubt sind im Browser. Ich glaube damit würde ich den Störfaktor auf eine sehr kleine Usergruppe einschränken.

Danke für deine Ideen trunx!

Wenn sonst noch jemand Ideen hat immer her damit! :)

Gruß,
Oliver

[trunx]

Dann würde ich es aber glatt mit [if lt IE 7] auf IE<7 einschränken, da der IE 7 hover ja auch ohne href kann.

Ist das so? Ich weiß, dass er :hover auch für andere Elemente kann, aber bei a verlangt er glaub ich immer noch das href-Attribut, naja musst du mal ausprobieren. Auf der sicheren Seite bist du vllt mit

<a name="infobox"><!--[if IE lt 7]></a>
<script type="text/javascript">document.write("<a href="javascript:void()">")</script>
<noscript><a href="#infobox" bzw. href="infobox.html"></noscript>
<![endif]-->
<!--[if IE 7]></a><div id="div_hover"><![endif]-->
Info
<!--[if IE 7]></div><![endif]--></a>

Ob du vllt sogar die script/noscript Variante generell zuläßt, wär natürlich auch zu überlegen, naja war so ne Idee :-)

bye trunx

[Oliver]

<a name="infobox"><!--[if IE lt 7]></a>
<script type="text/javascript">document.write("<a href="javascript:void()">")</script>
<noscript><a href="#infobox" bzw. href="infobox.html"></noscript>
<![endif]-->
<!--[if IE 7]></a><div id="div_hover"><![endif]-->
Info
<!--[if IE 7]></div><![endif]--></a>

Hm, also da blick ich jetzt nicht mehr ganz durch. Und von Javascript hab ich eigentlich auch keine Ahnung, zumal ich ja eigentlich auch gerne auf JS verzichten würde.

Kannst du mir mal erklären was der code genau bewirken soll?

[trunx]

<a name="infobox"><!--[if lt IE 7]></a>
<script type="text/javascript">document.write("<a href="javascript:void()">")</script>
<noscript><a href="#infobox" bzw. href="infobox.html"></noscript>
<![endif]-->
Info</a>

Kannst du mir mal erklären was der code genau bewirken soll?

hmm, na eigentlich das was du willst :-) also den hover-Effekt bei ausgeschaltetem Link (im code waren noch ein paar kleinere Fehler, die jetzt draußen sind) - also für alle Browser außer den IE haben wir einfach <a name="infobox">Info</a>, für die IE kleiner 7 teilen wir die Browser mit script/noscript in die auf, die javascript aktiviert haben und solche die es nicht aktiviert haben. Bei aktiviertem javascript schreibt javascript selbst <a href="javascript:void()">Info</a>, ansonsten wegen noscript <a href="...">Info</a>. Der Sinn ist, dass bei deaktiviertem javascript keine Aktivitätswarnung kommt. Für den IE7 hatte ich dann noch speziell einen div-Container eingefügt, falls das hovern für a ohne href nicht funktionieren sollte, da es aber geht, habe ich es wieder rausgenommen :-)

bye trunx

[Oliver]

@trunx: Ja wird immer komplexer aber der Störfaktor kleiner. Auf jeden Fall Danke für deine Vorschläge!

[Susanne07]

Hallo, Oliver,

ich kann mir vorstellen das ich nicht der einzige bin mit diesem Problem, konnte in der Suche aber leider nichts finden.

Ich versuche mit <a href="..."> einen Link zu erzeugen der beim Anklicken jedoch keinerlei Reaktion zeigt, da ich nur den hover-Effekt (Infobox) nutzen möchte.

schau mal nach bei:

http://meyerweb.com/eric/css/edge/popups/demo.html

da wird erklärt wie es gemacht wird,

eine Seite bei der die Umsetzung sehr gelungen ist:

http://www.thestyleworks.de/tut-art/index.shtml#tut-art1

Gruß, Susanne