HOW TO CREATE A PROFESSIONAL ADVERTISING BANNER USING IMAGE MAPPING
Hello readers i have bring to you another interesting post on how you can use image mapping to create professional advertising banners You might have seen a lot of web advertisements which says “click
here to earn”, “click here to run” and so on. But no matter if you click
on the “click here” area or any part of the whole web banner, it
eventually leads you to the same page. The designs of the banners looks
really impressive, but you can make something more impressive using the
HTML image map technique. Most of the webmasters or online advertising
programs will not allow you to do this but there will be some webmasters
who will allow you to place your banner with multiple links on their
site. Mostly, webmasters who allows direct paid advertising on their
site. Well, some might charge more. Don’t blame me for that.
Image map is actually an easy method which allows us to add multiple links on a single image where by using the default image tag, we are only allowed to add one link. But, by using the <map> tag, we can add multiple links to separate parts of the image simply by mentioning the coordinates of the respective area.
Learn more about image map here.
In this post, I won’t explain about the thing “image map” much because I have already input a link of this topic to take you through the tutorial and later am going to explain how you can use Dreamweaver to achieve this image mapping too. So, make sure you visit the above link to clear your concept of image map. Through this post, I will only give you the basic idea on how you can make professional looking advertising banners using the image map technique. There is also no need to add any CSS.
First of all, let us write down the basic HTML tag for adding an image.
<img src="your-image-link.jpg" alt="my-ad-banner" usemap="#ad-banner"/>
You
might have noticed the tag [usemap=”#ad-banner”]. That’s the tag which
needs to be added on the image tag to make our image map work. And below
is our map code along with the respective coordinates for the separate
links.<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZZb_tMGh5IgRVaasVfARuMzSexbLoQtm4FHthQ6KJyrUVKcJX6wODqyn0rlztrPgUV_jgA9avFM92caq64C1IC3W_ezu9v3UXWeBrlaSIHwDOfeiqoL6UT2x6VaX4Q1I4-cGlygtn2Xs/s1600/Untitled-2.png" alt="Image mapping" width="495" height="108" border="0" usemap="#Map">
<map name="Map" id="Map">
<area shape="rect" coords="277,63,309,91" href="https://facebook.com/naijagistl" alt="facebook">
<area shape="rect" coords="314,63,343,92" href="https://twitter.com/9jagistland" alt="twitter">
<area shape="rect" coords="349,63,377,90" href="9jagistland.blogspot.com" alt="linkeind">
<area shape="rect" coords="385,63,414,90" href="https://plus.google.com/116218702897519682942" alt="google+">
<area shape="poly" coords="81,67,86,62,139,62,144,71,145,82,139,90,86,92,79,81" href="http://9jagistland.blogspot.com/2015/03/free-bulk-sms-platform.html" alt="How to create a bulk sms website in minutes">
</map>
This is the output of the mapping
Don't forget to subscribe for our daily updates to receive more......
I am the CEO of 9JAGISTLAND.My name is Adedeji Timothy and my co-owner is Oyekola Damilare.This blog is born out of our passion to educating to people in all aspect of internet life.We are enthusiastic about writing posts and articles online.
Write your views on this post and share it. ConversionConversion EmoticonEmoticon