Logo

Wie man mehrere Links auf einem einzigen Bild mit Image Map erstellt

Kategorie:
Erstellt am: 9. Januar

HTML Image Map gibt es schon eine ganze Weile, aber noch nicht viele Webseiten nutzen es, wenn es um ein einzelnes Bild mit mehreren Links geht. Es ist wirklich praktisch und schnell für Web-Designer oder Entwickler, um mehrere "Hot Spots"Verlinkung innerhalb eines einzelnen Bildes, ohne ein Bild für die Verlinkung zu zerschneiden.

Ihr Kunde hat Ihnen zum Beispiel eine Liste von Sponsoren gegeben und möchte, dass jedes Logo mit der Webseite des Sponsors auf seiner Website verlinkt wird. Vielleicht möchten Sie Folgendes ausprobieren Image Mapwird Ihnen die Arbeit sehr erleichtern.

[tut demo=”http://www.webmousedesign.com/examples/image-map/” download=”http://www.webmousedesign.com/examples/image-map/image-map.zip”]

Was ist Image Map?

Im Grunde ist Image Map eine Möglichkeit, bestimmte Bereiche zu definieren, die innerhalb eines einzelnen Bildes auf einer Webseite verlinkt werden sollen. Das bedeutet, dass Sie nicht das gesamte Bild als einen Link verlinken müssen, sondern dass Sie viele verschiedene Links innerhalb dieses einen Bildes haben können.

Sie sind sich noch nicht sicher, was Image Map ist? Schauen Sie sich die Demo an.

Bevor wir beginnen, hier sind die allgemeinen Attribute für die Karte Tag.

<map name="map-name">
<area shape="Gebietsform"
coords="Gebietskoordinaten"
href="area hyperlink" oder nohref="nohref"
target="Ziel des Hyperlinks"
title="Bereichstitel"
alt="alternativer Text"/>
</map>

Die meisten der Attribute werden recht häufig verwendet, lassen Sie uns über die Attribute shape und coords sprechen. Für das Attribut shape gibt es rect | circle | poly | default.

Für das Attribut coords finden Sie unten ein einfaches Übersichtsdiagramm für die Koordinaten.

In diesem Tutorial werden Sie sehen, wie Sie mehrere Logos mit ihren Webseiten in einem einzigen Bild verknüpfen können. Zuerst müssen Sie Ihr Bild bereit haben, hier habe ich einige der beliebtesten Web-Logos in ein Bild zusammengefügt.

Erstellen Sie zunächst Ihr normales Bild-HTML-Markup, beachten Sie das usemap="#logos"-Attribut, mit dem Sie die Image-Map mit dem Bild verknüpfen.

<body>
<img src="images/weblogo.jpg" alt="Web Logos" usemap="#logos" />
</body>

Als Nächstes müssen Sie die Koordinaten für jedes der Logos herausfinden, indem Sie Photoshop. Beginnen wir mit einem kreisförmigen Logo, laden Sie zunächst das Bild in Photoshop, drücken Sie F8 für die Info-Panel erscheint, bewegen Sie den Cursor in die Mitte des runden Logos und notieren Sie die Koordinaten.

Wir müssen auch die Radius des Kreises. Indem Sie die Differenz zwischen den Koordinaten des Kreisrandes und des Kreismittelpunkts ermitteln oder indem Sie die Linealwerkzeuge in Photoshop verwenden. So oder so können Sie den Radius des Kreises ermitteln.

Lassen Sie uns nun die Koordinaten für ein rechteckiges Logo ermitteln. Sie müssen nur den oben links und unten rechts Koordinaten des rechteckigen Logos. Mit der gleichen Methode wie oben können Sie die Koordinaten leicht finden.

Wenn Sie alle Koordinaten für jedes Logo herausgefunden haben, ist jetzt alles ganz einfach. Folgen Sie einfach den Attributen für die Karten-Tag und geben Sie alle Koordinaten für jede der gefundenen Formen ein.

<map name="logos">
<area shape="circle" coords="68,56,33" href="http://www.stumbleupon.com/" title="StumbleUpon" alt="StumbleUpon" />
<area shape="rect" coords="220,19,306,54" href="http://www.youtube.com/" title="Youtube" alt="Youtube" />
<area shape="rect" coords="367,32,516,84" href="http://www.google.com/" title="Google" alt="Google" />
<area shape="rect" coords="556,12,639,115" href="http://www.wikipedia.com/" title="Wikipedia" alt="Wikipedia" />
<area shape="rect" coords="128,62,244,114" href="http://www.skype.com/" title="Skype" alt="Skype" />
<area shape="rect" coords="301,103,444,136" href="http://www.yahoo.com/" title="Yahoo" alt="Yahoo" /> <area shape="rect" coords="301,103,444,136" href="http://www.yahoo.com/" title="Yahoo" alt="Yahoo" />
<area shape="rect" coords="25,158,135,207" href="http://www.ebay.com/" title="eBay" alt="eBay" /> <area shape="rect" coords="25,158,135,207" href="http://www.ebay.com/" title="eBay" alt="eBay" />
<area shape="rect" coords="180,147,271,175" href="http://www.flickr.com/" title="Flickr" alt="Flickr" /> <area shape="rect" coords="180,147,271,175" href="http://www.flickr.com/" title="Flickr" alt="Flickr" />
<area shape="rect" coords="299,166,379,208" href="http://www.digg.com/" title="Digg" alt="Digg" />
<area shape="circle" coords="500,184,32" href="http://wordpress.org/" title="Wordpress.org" alt="Wordpress.org" />
<area shape="rect" coords="599,142,667,209" href="http://www.blogger.com/" title="Blogger" alt="Blogger" />
<area shape="default" nohref="nohref" title="Default" alt="Default"/>
</map>

Für die Verknüpfung von benutzerdefinierten Formen können Sie das Attribut poly shape verwenden. Definieren Sie einfach diese wichtigen Koordinaten und es wird eine präzisere Form bilden Hot Spot Bereich für den Link.

[tut demo=”http://www.webmousedesign.com/examples/image-map/” download=”http://www.webmousedesign.com/examples/image-map/image-map.zip”]

Schlussfolgerung

Geben Sie diese Image Karte ein Versuch, wenn Sie mehrere Links auf ein einzelnes Bild erstellen müssen.

Copyright © 2022 webmousedesign.de
crossmenu