Themabewertung:
  • 1 Bewertung(en) - 5 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
Hover-Effekt
#1
Wink 
Hy,
kann mir Bitte jemand sagen, wie ich das realisiere, dass wenn ich mit der Maus über einen Link fahre, an irgendeiner bestimmte stelle ein Pfeil auftaucht und wenn ich wieder mit der Maus den Link verlasse, der Pfeil wieder verschwindet???

Habe schon in Google gesucht, aber leider finde ich nicht das passende.

Kann man das überhaupt mit CSS lösen?

LG Alex und vorab schon mal Danke
Zitieren
#2
Mit JavaScript sollte es im Prinzip einfach zu lösen sein...
function Show()
{
document.getElementById("bspObjekt").style.visibility = "visible";
}

function Hide()
{
document.getElementById("bspObjekt").style.visibility = "hidden";
}

....

<a href="" onMouseOver="Show()" onMouseOut="Hide()">Link</a>
<div id="bsbObject"> -> </div>
Zitieren
#3
Danke für die schnelle Antwort, muss ich aber da noch was im Header bezüglich javaScript einbinden???

Und wenn ich mehrere Links habe, muss ich jedesmal das Gerüst aufbauen?

Nur kurz für was ich es verwenden will:

Ich habe ein Bild mit mehreren Person. Unter dem Bild stehen die ganzen Namen der Personen und nun wenn mit der Maus über einen Namen fahre, soll genau an der Stelle im Bild, wo die Person steht ein Pfeil auftauchen.

Wäre das so mit deinem Code zu lösen???

LG Alex
Zitieren
#4
Zeig mal die Struktur bitte.

Also Grundsätzlich kann man "einfache" Hover aufgaben auch nur per CSS lösen.

    HTML Programming
  1. <div>
  2. <img />
  3. <div class="name">Name<span class="pfeil"><img /></span></div>
  4. </div>



    CSS Programming
  1. div.name span.pfeil { display: none; }
  2. div.name:hover span.pfeil { display: block; }



Nun könnte man hingehen und span.pfeil auf "position: relative" setzen und die Position mit top und left o.ä. anpassen.

Aber das geht verständlicher Weise nicht, wenn der Pfeil nicht innerhalb des umschließenden Namens tag ist.
Wenn die Objekte nicht aneinander hängen muss man das mit JavaScript machen. Dies müsste natürlich aber dann auch wissen bei welchem Bild welcher Pfeil angesprochen wird.
Das JavaScript müsste dann entsprechend im Header oder Footer eingebunden werden.
MfG René
Systemadministrator, Webentwickler

pantanet.de - pantamedia.com - gosna.de

Wishlist
Zitieren
#5
Hallo rpflamm,
ich weiß nicht ob du mich richtig verstanden hast, deswegen habe ich mal ein Bild angefügt. Auf dem Bild siehst du die verschiedenen Tiere. Wenn ich nun mit der Maus unter dem Bild über das Wort Katze fahre, soll der Pfeil wie oben im Bild erscheinen und wenn ich mit der Maus wieder den Link verlasse, soll der Pfeil wieder weggehen.

Ich habe mir auch schon überlegt für jeden Pfeil ein eigenes DIV zu machen, dass ich dann per Position relative genau auf dem Bild platziere, wo er dann erscheinen soll. Mein Problem ist nur, wie sage ich dem Link, der gehovert wird, nehme Pfeil1 und zeige ihn an....

LG Alex


Angehängte Dateien Thumbnail(s)
   
Zitieren
#6
Schau dir das hier mal an, ist im Prinzip ähnlich wie deine Anforderung: http://www.paclease.de/de/stuetzpunkte/

Wurde mit diesem jQuery-Plugin umgesetzt: http://jqueryfordesigners.com/coda-popup-bubbles/
Zitieren
#7
Wir könnten das Beispiel von Dennis15 noch erweitern:

Code:
<div class="bildMitPfeil>
  <img />
  <div class="pfeil" id="pfeil1"><img /></div>
  <div class="pfeil" id="pfeil2"><img /></div>
  <div class="pfeil" id="pfeil3"><img /></div>
  <div class="pfeil" id="pfeil4"><img /></div>
  <a href="" onMouseOver="Show('pfeil1')" onMouseOut="Hide('pfeil1')">Name 1</a>
  <a href="" onMouseOver="Show('pfeil1')" onMouseOut="Hide('pfeil2')">Name 2</a>
  <a href="" onMouseOver="Show('pfeil1')" onMouseOut="Hide('pfeil3')">Name 3</a>
  <a href="" onMouseOver="Show('pfeil1')" onMouseOut="Hide('pfeil4')">Name 4</a>
</div>

    JAVASCRIPT Programming
  1. function Show(objectID) {
  2. document.getElementById(objectID).style.visibility = "visible";
  3. }
  4.  
  5. function Hide(objectID) {
  6. document.getElementById(objectID).style.visibility = "hidden";
  7. }



    CSS Programming
  1. .bildMitPfeil { position: relative; }
  2. .bildMitPfeil .pfeil { visibility: hidden; position: absolute; }
  3. .bildMitPfeil #pfeil1 { top: 10px; right: 5px; }
  4. .bildMitPfeil #pfeil2 { top: 10px; right: 15px; }
  5. .bildMitPfeil #pfeil3 { top: 20px; right: 5px; }
  6. .bildMitPfeil #pfeil4 { top: 20px; right: 15px; }

MfG René
Systemadministrator, Webentwickler

pantanet.de - pantamedia.com - gosna.de

Wishlist
Zitieren
#8
Hallo rpflamm,
danke für die ausführliche Beschreibung, aber bei mir klappt nicht so ganz, das Hintergrundbild wird jetzt nicht mehr angezeigt und die Pfeile verhalten sich eigenartig. Ich habe die Dateien mal angehängt, wäre schön, wenn du dir das mal anschauen könntest, was ich da verzapft habe.

LG Alex


Angehängte Dateien Thumbnail(s)
   

.html   index.html (Größe: 1,6 KB / Downloads: 3)
.jpg   pfeil1.jpg (Größe: 2,21 KB / Downloads: 28)
.jpg   pfeil2.jpg (Größe: 20,68 KB / Downloads: 28)
.jpg   pfeil3.jpg (Größe: 20,68 KB / Downloads: 28)
Zitieren
#9
Shocked 
Danke an alle für die Hilfe, ich habe es hinbekommen Smile

LG und schönes Wochenende Wink
Zitieren


Gehe zu:


Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste