• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Hyperlink im Bild

Status
Für weitere Antworten geschlossen.

HPM

Neues Mitglied
Hallo
Wie könnte ich es anstellen, damit ich Hyperlinks in einem Bild einbinden kann.
Ich habe einen Lageplan als jpg, möchte beim nklicken diverser Elemente zu einer Seite geleitet werden.
Es handelt sich um eine Luftaufnahme, hier hätte ich ca. 80 Punkte anzuwählen.Will einen Text über die Elemente legen und diese anwählen.
Ist es überhaupt sinnvoll? Hat jemand soetwas schon gesehen?
Wie kann ich das Bild auf meiner Hauptseite fixieren?
mfg
hpm
 
du musst eine map darüber legen, schau mal bei selfhtml oder warte auf die hier, die das können, ich weiß es nicht ausm kopf, suche aber gleich mal!

EDIT:

Hier der Code, ich denke es sollte Alles klar sein!

HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Verweis-sensitive Grafiken definieren</title>
</head>
<body>

<h1>Schnell zur Stadt oder Region Ihrer Wahl!</h1>

<div>
  <map name="Landkarte">
    <area shape="rect" coords="11,10,59,29" href="http://www.koblenz.de/" alt="Koblenz">
    <area shape="rect" coords="42,36,96,57" href="http://www.wiesbaden.de/" alt="Wiesbaden">
    <area shape="rect" coords="42,59,78,80" href="http://www.mainz.de/" alt="Mainz">
    <area shape="rect" coords="100,26,152,58" href="http://www.frankfurt.de/" alt="Frankfurt">
    <area shape="rect" coords="27,113,93,134" href="http://www.mannheim.de/" alt="Mannheim">
    <area shape="rect" coords="100,138,163,159" href="http://www.heidelberg.de/" alt="Heidelberg">
    <area shape="rect" coords="207,77,266,101" href="http://www.wuerzburg.de/" alt="W&uuml;rzburg">
    <area shape="rect" coords="282,62,344,85" href="http://www.bamberg.de/" alt="Bamberg">
    <area shape="rect" coords="255,132,316,150" href="http://www.nuernberg.de/" alt="N&uuml;rnberg">
    <area shape="rect" coords="78,182,132,200" href="http://www.karlsruhe.de/" alt="Karlsruhe">
    <area shape="rect" coords="142,169,200,193" href="http://www.heilbronn.de/" alt="Heilbronn">
    <area shape="rect" coords="140,209,198,230" href="http://www.stuttgart.de/" alt="Stuttgart">
    <area shape="rect" coords="187,263,222,281" href="http://www.ulm.de/" alt="Ulm">
    <area shape="rect" coords="249,278,304,297" href="http://www.augsburg.de/" alt="Augsburg">
    <area shape="poly" coords="48,311,105,248,96,210,75,205,38,234,8,310"
          href="http://www.baden-aktuell.de/" alt="Baden">
  </map>
</div>

<p><img src="karte.png" width="345" height="312" alt="Karte" usemap="#Landkarte"></p>

</body>
</html>
Live-Bsp.:

http://de.selfhtml.org/html/grafiken/anzeige/img_usemap.htm
 
Zuletzt bearbeitet:
Hallo
Danke mal für die Antwort!
Es gelingt mir einfach nicht!
Daher versuche ich es mit dem angegebenen Beispiel.
Ich arbeite mit dem FrontPage von MS.
Welches Format muß das Bild haben?
Landkarte im Beispiel hat das PNG-Format.
Ich habe jpg Bild, muß ich dieses umwandeln?
So wie im Beispiel möchte ich das auch haben.
Wie und mit welchen Programm finde ich meine Koordinaten?
Wie im Beispiel ULM, Augsburg usw.
Ich habe mein Bild auf einer leeren Seite.
Ich danke für die Hinweise

Ich denke es fehlt mir an allen Ecken und Enden.
Zu dem oberen Beispiel vieleicht eine Schritt für Schritt Anleitung?
Bin beim lesen von Selfhtml.
Mit welchem Programm ist es sinnvoll die Seite zu erstellen?
genügt Wordpad?
Dachte mir es wird mir einem Programm erstellt.
Nicht böse sein dass ich es noch nicht kapiert habe.
Wenn möglich noch Tipps, Danke
lg
 
Zuletzt bearbeitet von einem Moderator:
Erläuterung:

Mit <map name="[Name]"> leiten Sie die Definition der verweis-sensitiven Flächen einer Grafik ein. Beim name-Attribut vergeben Sie einen Namen für die verweis-sensitive Grafik. Dieser Name muss nichts mit dem Dateinamen der Grafik zu tun haben. Es handelt sich vielmehr um einen Ankernamen, der die gleiche Bedeutung hat wie der Name in einem
dok.gif
Anker innerhalb einer HTML-Datei. Vergeben Sie keine zu langen Namen. Namen dürfen keine Leerzeichen und keine deutschen Umlaute enthalten. Das erste Zeichen muss ein Buchstabe sein. Danach sind auch Ziffern erlaubt. Benutzen Sie als Sonderzeichen im Namen höchstens den Unterstrich (_), den Bindestrich (-), den Doppelpunkt (:) oder den Punkt (.).
Das map-Element kann an einer beliebigen Stelle innerhalb des Körpers einer HTML-Datei und erzeugt selbst keine Bildschirmausgabe. Es empfiehlt sich jedoch, das Element an einer markanten, gesonderten Stelle innerhalb der Datei zu notieren, z.B. am Anfang oder am Ende des Dateikörpers.
Zwischen dem einleitenden <map...> und dem abschließenden </map> definieren Sie die verweis-sensitiven Flächen. Mit <area...> definieren Sie einzelne verweis-sensitive Flächen einer bestimmten Grafik, die Sie an einer anderen Stelle einbinden.
Mit shape="rect" bestimmen Sie eine viereckige Fläche, mit shape="circle" einen Kreis, und mit shape="polygon" können Sie ein beliebiges Vieleck als verweis-sensitiv definieren.
Bei coords geben Sie die Koordinaten der verweis-sensitiven Flächen an. Die Pixelangaben bedeuten absolute Werte innerhalb der Grafik, die verweis-sensitiv sein soll. Trennen Sie alle Pixelwerte durch Kommata.
  • Ein Viereck (shape="rect") definieren Sie mit den Koordinaten für x1,y1,x2,y2
    wobei bedeuten:
    x1 = linke obere Ecke, Pixel von links
    y1 = linke obere Ecke, Pixel von oben
    x2 = rechte untere Ecke, Pixel von links
    y2 = rechte untere Ecke, Pixel von oben
  • Einen Kreis (shape="circle") definieren Sie mit den Koordinaten für x,y,r
    wobei bedeuten:
    x = Mittelpunkt, Pixel von links
    y = Mittelpunkt, Pixel von oben
    r = Radius in Pixel
  • Ein Polygon (shape="poly") definieren Sie mit den Koordinaten x1,y1,x2,y2 ... xn,yn
    wobei bedeuten:
    x = Pixel einer Ecke von links
    y = Pixel einer Ecke von oben
    Sie können so viele Ecken definieren wie Sie wollen. Von der letzten definierten Ecke müssen Sie sich eine Linie zur ersten definierten Ecke hinzudenken. Diese schließt das Polygon.
Mit dem Attribut href bestimmen Sie das Verweisziel, das aufgerufen werden soll, wenn der Anwender die verweis-sensitive Fläche anklickt. Dabei gelten die Regeln zum
dok.gif
Referenzieren in HTML - es kann sich also um beliebige Verweisziele innerhalb oder außerhalb des eigenen Web-Projekts handeln. Wenn Sie eine Fläche explizit als nicht anklickbar ausweisen wollen, können Sie dies mit dem Attribut nohref tun (ohne Wertzuweisung). Nötig ist dies allerdings nicht, denn Flächen, die nicht durch href abgedeckt sind, sind automatisch nicht anklickbar.
Mit dem alt-Attribut notieren Sie Alternativtext für den Fall, dass die verweis-sensitive Fläche nicht angezeigt werden kann. Dieses Attribut ist ein Pflichtattribut, d.h. Sie müssen es notieren, um gültiges HTML zu erzeugen.
Die Grafik, die verweis-sensitive Flächen haben soll, referenzieren Sie auf herkömmliche Weise mit Hilfe des <img>-Tags. Um die Grafik als verweis-sensitiv zu kennzeichnen, müssen Sie das Attribut usemap notieren. Dieses Attribut erwartet als Wertzuweisung einen URI, der zu der Stelle führt, an der das zugehörige map-Element notiert ist. Normalerweise ist dieses Element in der gleichen Datei notiert. Deshalb besteht die Zuweisung einfach in einem Gatterzeichen # und dem Namen des Ankers, der bei <map name=> definiert wurde.

Lies dir das durch, du musst dein Bild NICHT umwandeln, gib halt statt karte.png, bild.jpg ein!
 
Wenn du FrontPage hast, dann klick ein Bild an und du kannst kreise und vierecke selbst ziehen.
Der Code generiert sich selbst. :D
 
Muß mich entscheiden

Danke mal für Eure Hinweise.
Habe das Programm (ImageMaper) gespeichert, installiert sich ,kommt aber kein Button zum öffnen.
Mit Frontpage Rechteck zeichnen und Hyperlink vergeben, da steht dann immer der Text vom Hyperlink im Bild.
 
Status
Für weitere Antworten geschlossen.
Zurück
Oben