Wir sammeln alle Infos der Bonusepisode von Pokémon Karmesin und Purpur für euch!
Zu der Infoseite von „Die Mo-Mo-Manie“Hallo zusammen,
ich habe eine kleine Frage bezüglich Verlinkungen in einem Bild. Wie kann ich mehrere Links in ein Bild eintragen? Als Beispiel kann man hier einen Adventskalender nehmen. Dort sind 24 Links eingetragen, wie kann man soetwas machen?
Da wir schon beim Adventskalender sind. Wie schaffe ich, dass man zum Beispiel am 5. Dezember nur die ersten 5 Türchen aufmachen kann und die anderen noch nich anklickbar sind?
LG,
Zetsu
Mehrere Verlinkungen auf einem Bild kannst du mit sogenannten Maps definieren. Dazu bekommt das entsprechende Bild das Attribut "usemap". Dem weist du z. B. den Wert "#meinbild" zu. Dabei ist die Raute (#) wichtig, da das Bild jetzt als eine Art Textanker mit den Links verbunden wird.
<img src="meinbild.jpg" alt="" usemap="#meinbild" />
<map name="#meinbild">
<area shape="rect" coords="377,433,426,482" href="link1.html" title="Erster Link" />
<area shape="rect" coords="623,68,672,121" title="Zweiter Link" />
</map>
Beim map-Tag muss natürlich name mit dem usemap-Wert des Bildes übereinstimmen, damit die beiden sich finden. Im map-Tag kannst du so viele Links als area-Tags verschachteln. Mit dem shape-Attribut legst du die Form des Links fest, also z. B. Kreis (circle), Rechteck (rect) oder Polygon (poly). Wenn du den href-Tag in einer area weglässt, so wie ich es bei der zwiten area getan habe, ist dieser Bereich auf dem Bild auch nicht mehr verlinkt. Könnte man mit einer simplen JavaScript-Funktion lösen. Einen title kannst du wie bei normalen Links auch festlegen.
Auf Selfhtml gibts zu dem Thema auch ein schönes Tutorial, das du dir dringend durchlesen solltest. Du wirst merken, dass das genaue Positionieren der Links per Hand sehr schwierig ist. Google dafür am besten mal nach einem Tool, das diese Werte automatisch berechnet. War glaube ich ein JavaScript-Tool, wo man sein Bild hochladen konnte und dann Rechtecke, Kreise, Polygone usw. mit der Maus ziehen konnte.
Edit// Hab noch ein Beispiel mit einer Deutschlandkarte gefunden: http://www.pseliger.de/testCases/federalStatesOfGermany.html
Gruß Slash
Dann bedanke ich mich schon einmal für deine Hilfe.
Ich werde es mal ausprobieren, sobald ich das Bild habe, dass ich einbauen möchte. Falls dann Fragen auftauchen sollten, stelle ich sie hier oder frag dich gegebenenfalls über PN oder im Gästebuch. Du scheinst dich ja ganz gut damit auszukennen.