Hiho ihr Lieben.
Nub hatte es mal gemacht, ein Bild mit der FL Karte und bestimmte Punkte wie z.B. Städte etc. konnte man auf der Karte anklicken.
Weiß jemand wie man das machen kann? Ich weiß nur noch das man dafür die Koordinaten eingrenzen musste auf dem Bild.
Grüße Euer Matthias/Geri
Homepage-Script-Bestimmte Punkte in Bildern verlinken
-
Onkel Geri
- Beiträge: 341
- Registriert: 30. Dez 2003, 18:19
- Wohnort: Schenefeld
- Kontaktdaten:
Homepage-Script-Bestimmte Punkte in Bildern verlinken
Mess with the best and die like the rest.
In Gedenken an PO Sarh Donse. 1965-2003
"Don't think - make a decision, man!"
-Hot Dog Man aus NYC
In Gedenken an PO Sarh Donse. 1965-2003
"Don't think - make a decision, man!"
-Hot Dog Man aus NYC
<html>
<head>
<title>Text des Titels</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ü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ü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.gif" width="345" height="312" alt="Karte" usemap="#Landkarte"></p>
</body>
</html>
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 Seite 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
y1 = rechte obere Ecke
x2 = linke untere Ecke
y2 = rechte untere Ecke
* 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 Seite 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.
Beachten Sie:
Um die gewünschten Pixelkoordinaten für verweis-sensitive Flächen einer Grafik zu erhalten, können Sie beispielsweise ein Grafikprogramm benutzen, bei dem Sie mit der Maus in der angezeigten Grafik herumfahren können und dabei die genauen Pixelkoordinaten des Mauszeigers angezeigt bekommen.
Quelle: http://de.selfhtml.org/ => usemap
<head>
<title>Text des Titels</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ü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ü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.gif" width="345" height="312" alt="Karte" usemap="#Landkarte"></p>
</body>
</html>
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 Seite 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
y1 = rechte obere Ecke
x2 = linke untere Ecke
y2 = rechte untere Ecke
* 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 Seite 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.
Beachten Sie:
Um die gewünschten Pixelkoordinaten für verweis-sensitive Flächen einer Grafik zu erhalten, können Sie beispielsweise ein Grafikprogramm benutzen, bei dem Sie mit der Maus in der angezeigten Grafik herumfahren können und dabei die genauen Pixelkoordinaten des Mauszeigers angezeigt bekommen.
Quelle: http://de.selfhtml.org/ => usemap
(\_/)
(O.o)
(> <)
(O.o)
(> <)
-
Ex Urviech
- Beiträge: 137
- Registriert: 17. Sep 2004, 14:08
-
Onkel Geri
- Beiträge: 341
- Registriert: 30. Dez 2003, 18:19
- Wohnort: Schenefeld
- Kontaktdaten:
