Mause über Bereich in IMG

[oschit]

Hallo Zusammen

Ich habe eine Frage bezüglich Maps. Ich möchte gerne, wenn man in einem Bild über einen bestimmten Bereich mit der Maus fährt, diesen Bereich clickable machen, und zu einer anderen Seite verweisen. Mit <area> und den entsprechenden Cords hab ich das auch geschafft. Nun möchte ich aber, dass an einer bestimmten Stelle mehrere Links im Hintergrund sind, sodass man auswählen muss, auf welchen Link man gehen will. Also evtl etwas ähnliches wie ein Dropdown oder Popup, aber wie binde ich das in das IMG an die bestimmte cords rein?

Wie im Bild gezeigt, sollte man, sobald man über die gelbe Fläche fährt, z.B die Möglichkeit haben, auf www.youtube.com oder auf www.google.de zu gehen.

 

[hannover96xd]

Hallo,

ich würde das Problem so angehen, kann es aber selber nicht ausprobieren, weil ich vom Handy aus schreibe. ;)

Setze div Container in das Bild. Also so:

<img src="... " alt="... ">
       <a href="www.google.de" ><div id="..."></a>
</img>

Dann positioniere mit CSS die links/divs und bestimme eine Größe.

Wie gesagt, nur eine Idee.

Gruß

hannover96xdneu :)

Edit////
Sorry, konnte deine Frage nicht richtig verstehen, weil taptalk die Frage zuerst nicht komplett angezeigt hat.

Edit2///
Guck dir doch Das mal an:
http://www.mediaevent.de/xhtml/area-map.html :)
Also mit dem map und area tag wärst du auf dem richtigen Weg...

 

[MrMurphy]

Hallo oschit,

bevor du weiter Zeit und Energie für eine Lösung aufwendest:

Hast du dir auch Gedanken gemacht, wie die Smartphon-, Tablet- und anderen Touchscreenanwender die Links erreichen können? Immerhin bereits deutlich über 50% aller User im Internet. Einen Hoverzustand gibt es bei Touchscreens bekanntermaßen nicht.

Gruss

MrMurphy

 

[Tronjer]

Zwei Möglichkeiten:

1. Das Bild kommt als background-image auf ein Div, in welches per CSS ein unsichtbarer Container platziert wird, der als Click-Spot dient.
2. wie oben, aber statt des Container wird der klickbare Bereich per JS definiert.

Für den Click schreibt man ein Mouseevent in JavaScript. Dort lässt sich festlegen, ob z.B. ein Modal aufpoppen soll, das mehrere Links zur Auswahl anbietet.

 

[oschit]

Zwei Möglichkeiten:

1. Das Bild kommt als background-image auf ein Div, in welches per CSS ein unsichtbarer Container platziert wird, der als Click-Spot dient.
2. wie oben, aber statt des Container wird der klickbare Bereich per JS definiert.

Für den Click schreibt man ein Mouseevent in JavaScript. Dort lässt sich festlegen, ob z.B. ein Modal aufpoppen soll, das mehrere Links zur Auswahl anbietet.

Hallo Trojaner,

Wie vielleicht bemerkt, bin ich nicht besonders erfahren mit html, kannst du mir deshalb eine kleine Starthilfe geben?

 

[Sempervivum]

Habe mal einen Lösungsansatz mit Imagemap für dich ausgearbeitet:
HTML:

<div id="wrapper">
<map name="Pfeil" id="Pfeil">
<area shape="rect" coords="184,82,200,100" href="#" onclick="showLinks(this)" data-idl="l1" alt="gelbes Quadrat" />
</map>
<img src="img/pfeil.jpg" width="225" height="225" alt="" title="" usemap="#Pfeil" />
<span id="l1" style="position: absolute; display: none; background-color: white;">
<a href="http://www.youtube.com">Youtube</a><br>
<a href="http://www.google.com">Google</a>
</span>
</div>

Javascript:

function showLinks(obj) {
scoords = obj.getAttribute("coords").split(",");
_left = scoords[2];
_top = scoords[3];
spl = document.getElementById(obj.getAttribute("data-idl"));
spl.style.display = "inline-block";
spl.style.left = _left + "px";
spl.style.top = _top + "px";
return false;
}

}

 

[Tronjer]

Hallo Trojaner,

Wie vielleicht bemerkt, bin ich nicht besonders erfahren mit html, kannst du mir deshalb eine kleine Starthilfe geben?

Das würde dir wahrscheinlich kaum helfen, zumal es mit HTML hier nicht getan ist. Ich mache so etwas ohne Image-Map und simuliere den Clickspot im Bild per JavaScript. Dafür gibt es Funktionen wie offset(), pageX und pageY, um Position von Bild und Mauszeiger zu berechnen.

Vielleicht hilft dir ja der Ansatz von Sempervirum weiter. Ansonsten kannst du mich für eine Auftragsarbeit gerne per PM kontaktieren.

 

[lascaux]

Hallo,

<img src="... " alt="... ">
       <a href="www.google.de" ><div id="..."></a>
</img>

So schon mal gar nicht ..

 

[hannover96xd]

So schon mal gar nicht ..

Ist mit dannach ja auch aufgefallen ..... Siehe mein "Edit///"