Learn how you can add multiple anchor links to a single image.Map tag is used to create the multiple links for a single image using their area coordinates.
Here is tutorial for you.
The below four popular icons i.e, rss (or) Atom Feed Icon , Twitter Icon, Facebook Icon and Google Icon all are in single image (Link) but i am separating each icon to have a unique link.
Just hover you cursor on each image and see the browser status to know the links
Explaination
Image Tag with following attribute source, width, height and usemap=#ti (this is important to map multiple links)
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhU0kLF5UV1RxZhIP-5-Ve1NnNKo5Gg6Q6RFaw7gyZ_9qpRfKdolLqKGSD8ybn-24fWj5FfoQIJ_A84TrIU7a9Vaa09c47jptv6c5lMMMAygbAniaRGpzeKG7YRt4e3-ChgeAPSuWPRWWEj/s400/social-connect.png" width="161" height="32" border="0" usemap="#ti" />
Map Tag begins here and you should use map name and id are same as like you mention on image usemap
<map name="ti" id="ti">
Area Tag define the link shape are in rectangle format, Hyper Reference link, Alternate title for the icon and finally coordinates (left,top,right,bottom)
<area shape="rect" coords="0,0,30,32" href="http://feeds.feedburner.com/TechnologyInnovation/xEox" target="_blank" alt="RSS Feed" />
<area shape="rect" coords="38,0,70,32" href="http://twitter.com/hakeemit" target="_blank" alt="Twitter" /><area shape="rect" coords="78,0,110,32" href="http://facebook.com/hakeemit" target="_blank" alt="Facebook" />
<area shape="rect" coords="118,0,150,32" href="http://fusion.google.com/add?feedurl=http%20%20%3A//hakeemit.blogspot.com/feeds/posts/default" target="_blank" alt="Google" />
End of Map Tag
</map>
Here is tutorial for you.
The below four popular icons i.e, rss (or) Atom Feed Icon , Twitter Icon, Facebook Icon and Google Icon all are in single image (Link) but i am separating each icon to have a unique link.
Just hover you cursor on each image and see the browser status to know the links
Explaination
Image Tag with following attribute source, width, height and usemap=#ti (this is important to map multiple links)
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhU0kLF5UV1RxZhIP-5-Ve1NnNKo5Gg6Q6RFaw7gyZ_9qpRfKdolLqKGSD8ybn-24fWj5FfoQIJ_A84TrIU7a9Vaa09c47jptv6c5lMMMAygbAniaRGpzeKG7YRt4e3-ChgeAPSuWPRWWEj/s400/social-connect.png" width="161" height="32" border="0" usemap="#ti" />
Map Tag begins here and you should use map name and id are same as like you mention on image usemap
<map name="ti" id="ti">
Area Tag define the link shape are in rectangle format, Hyper Reference link, Alternate title for the icon and finally coordinates (left,top,right,bottom)
<area shape="rect" coords="0,0,30,32" href="http://feeds.feedburner.com/TechnologyInnovation/xEox" target="_blank" alt="RSS Feed" />
<area shape="rect" coords="38,0,70,32" href="http://twitter.com/hakeemit" target="_blank" alt="Twitter" /><area shape="rect" coords="78,0,110,32" href="http://facebook.com/hakeemit" target="_blank" alt="Facebook" />
<area shape="rect" coords="118,0,150,32" href="http://fusion.google.com/add?feedurl=http%20%20%3A//hakeemit.blogspot.com/feeds/posts/default" target="_blank" alt="Google" />
End of Map Tag
</map>
This Map tag is really useful for blogger to optimize the performance of their website.
note: If you are loading multiple image on your home page then for each image client request and server response this make your loading time more .Use one image and separate them using Image map concept.
Comments
Post a Comment