Skip to main content

One Image with Multiple Links

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

RSS FeedTwitterFacebookGoogle


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

Popular posts from this blog

Gradle project sync failed. Basic functionality (e.g, editing, debugging) will not work properly.

Gradle is an open source build tool which help us to accelerate developer productivity. Go to Gradle Services website(http://services.gradle.org/distributions/) and download the latest version Download the latest version gradle-4.7-rc-1-all.zip ( Latest version while writing this article) and you can download greater than 4.7 if available and make sure the zip file contains "all" keyword (gradle-*.*-rc-*-all.zip). Go to your download location and unzip the downloaded file Android Studio > File >  Settings > Build, Execution, Deployment  Gradle Project-level settings -> Select Use local gradle distribution -> Select the unzip folder of downloaded gradle version -> Click OK button to exit from the Settings window. Please Wait until Gradle build completes and your problem have been resolved.   If gradle build failed, follow few more steps to get resolved Final step to resolve this error Go to your project -> Gradle script -...

Foofle.com is a Alternate Way to visit Google.com

Google the internet search engine giant have bought so many domain for Google.com which are very similar to Google keywords. When i was typing Google in keyboard i made a spell mistake then i hit the enter button at the time i got the Google page but i know i have made a mistake then i started thinking how this Google is very smart.The Google looked the very nearer Keywords in keyboard and registered their domain which are very nearer to their Google Keyword similarly i tried other one also, Here is the list of alternate ways to visit Google.com without typing them. http://www.gogole.com http://www.foofle.com http://www.googlr.com http://www.gogle.com Check It out By your self.

Feed Burner Is Not Updating your Blog Articles - TroubleShoot

Issue : Your feed filesize is larger than 512K. You need to reduce its size in order for FeedBurner to process it. Tips for controlling feed file size with Blogger can be found in Tech Tips on FeedBurner Forums, our support site . Feed burner tool only keeps the last 30 recent articles, articles images and adsense (If you have enable this) and all this things should be within 512K Size then there is no problem for you and if its exceeds the limit more than 512K then Feed burner will stop updating your feeds. How to Troubleshoot this Feed Issue Go to Feedburner.com and click on the feedlink >Navigate to Troubleshootize Tab > Click the Resync Now Button. If you see the above issue then here is a solution for you Edit your feed details from this http://myblogname.com/atom.xml or http://myblogname.com/feeds/posts/default to like this http://myblogname.com/feeds/posts/default?max- results=15 Save the feed details and again go to troubleshootize Tab > Click the Resyn Now button and...