Manuell klickbare Bildkarten

Originalseite: http://staff.washington.edu/larryg/Classes/R561/zz-click-man.html

Die Schritte erforderlich, um manuell eine Imagemap zu erstellen sind:

1. Rufen Sie das Bild: Sie können GIF oder JPEG-Bilder aus den Archiven erhalten, schaffen sie für sich selbst oder andere Formate in GIF- oder JPEG-Format konvertieren und sie dann in Ihrem speichern public_html Verzeichnis . In diesem Beispiel werden wir das folgende GIF-Bild verwenden benannt mymap.gif:

Sie können dies von meinem anonymen FTP-Archiv erwerben:

ftp://ftp.u.washington.edu/pub/user-supported/larryg

1. Erstellen Sie eine Liste von Koordinaten: Die meisten Farben oder Display-Verpackungen zeigen Ihnen die Koordinaten eines beliebigen Punktes im Bild. Zum Beispiel,
2. 
   
3. Microsoft "Paint" zeigt die X-, Y-Koordinaten Ihrer aktuellen Mausposition in der Mitte der Statuszeile am unteren Rand der Anzeige an
4. PhotoShop zeigt Ihnen die Pixelkoordinaten Ihrer Mausposition vorgesehen, dass
5. 
   
6. Sie aktivieren die INFO-Anzeige, indem Sie auf WINDOW, dann auf PALETTES und dann auf INFO SHOW klicken
7. Sie aktivieren die PALETTENOPTIONEN in der INFO-Anzeige (klicken Sie auf das schwarze Dreieck oben rechts) und wählen die Option PIXELS für Mauskoordinaten.
8. Die Unix-Programm xv zeigt die Mauskoordinaten, wenn Sie drücken Maustaste 2

Beachten Sie, dass Pixelwerte immer bei "0,0" in der oberen linken Ecke beginnen und größer werden, wenn Sie sich nach unten und rechts bewegen. Die Koordinaten können Polygonen oder Rechtecke (oder andere Formen, dass wir hier nicht befassen werden) definieren. Beispielsweise könnten die Koordinaten für einen Polygonbereich festgelegt werden, wie folgt:

     ...SHAPE="POLY" COORDS="32,36 32,188 65,136 133,124 82,36 ...
     

1. Erstellen Sie den HTML-Code für die Karte: Die Syntax für eine anklickbare Karte lautet:

{some HTML code here}
<MAP NAME = "name">
  <AREA SHAPE="shape" COORDS="x,y ..." HREF="link-for-this-region">
  ...
  <AREA SHAPE="shape" COORDS="x,y ..." HREF="link-for-this-region">
  <AREA SHAPE="DEFAULT"                HREF="link-for-default">
</MAP>
<IMG SRC="location-of-image" USEMAP="#name">
{some HTML code here}
 

Wo Sie die Werte liefern, die in Kleinbuchstaben erscheinen. Die "Formen" können sein RECT, CIRCLE, POLY, oder DEFAULT.

Im folgende Beispiel enthält ein Bild zwei Bereiche: ein linkes gelbes Polygon und einen rechten grünen Polygon. Die HTML-Links für den linken und rechten Bereiche benannt lf.html, rt.html und werden in einem Unterverzeichnis gespeichert benannt Image in meinem public_html Verzeichnis, und werden aktiviert, wenn ich auf die Regionen klicken. Das GIF-Bild selbst ist benannt mymap.gif und wird im selben Unterverzeichnis gespeichert. Hier ist der HTML-Code für diese Karte:

 
<MAP NAME = "shapes">
  <AREA SHAPE="POLY" COORDS= 
      "32,36 32,188 93,188 65,136 133,124 82,36" HREF="Image/lf.html">
  <AREA SHAPE="POLY" COORDS=
      "93,188 245,188 244,36 82,36 133,124 65,136" HREF="Image/rt.html">
</MAP>
<IMG SRC="Image/mymap.gif" USEMAP="#shapes">

Und hier ist die eigentliche Karte, die Sie anklicken können: