Multiple Selection Link in Single Image Using Map Area Tag

Multiple Selection Link in Single Image Using Map Area Tag

Multiple Selection Link in Single Image Using Map Area Tag

HTML Image Map has been around this while, but then very few site pages are utilizing it with regards to a single picture with different connections. It’s truly convenient and quick for website specialists or engineers to make numerous “Problem areas” connecting inside a solitary picture, without cutting any picture for connecting.

For example, your customer has given you a rundown of patrons and he needs each of the logo to be connected to the support’s site page on his site. You might need to experiment with Image Map, it will make your occupation substantially less demanding.

Live Demo   Download Source Code

index.php

<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">

	<title>Multiple Selection Link in Single Image Using Map Area Tag</title>

	<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>

<body>

	<div id="wrap">
		<h1 style="text-align: center;">Multiple Selection Link in Single Image Using Map Area Tag</h1>
		
		<a href="https://www.lisenme.com/" title="Back to Tutorial">Back to tutorial</a>
		
		<img src="images/weblogo.jpg" alt="" usemap="#logos" />
	
		<map name="logos">
			<area shape="circle" coords="68,56,33" href="http://www.facebook.com/" target="_blank" title="facebook" alt="facebook" />
			<area shape="rect" coords="220,19,306,54" href="http://www.youtube.com/" target="_blank" title="Youtube" alt="Youtube" />
			<area shape="rect" coords="367,32,516,84" href="http://www.google.com/" target="_blank" title="Google" alt="Google" />
			<area shape="rect" coords="556,12,639,115" href="http://www.wikipedia.com/" target="_blank"  title="Wikipedia" alt="Wikipedia" />
			<area shape="rect" coords="128,62,244,114" href="http://www.skype.com/" target="_blank" title="Skype" alt="Skype" />
			<area shape="rect" coords="301,103,444,136" href="http://www.yahoo.com/" target="_blank" title="Yahoo" alt="Yahoo" />
			<area shape="rect" coords="25,158,135,207" href="http://www.ebay.com/" target="_blank" title="eBay" alt="eBay" />
			<area shape="rect" coords="180,147,271,175" href="http://www.flickr.com/" target="_blank" title="Flickr" alt="Flickr" />
			<area shape="rect" coords="299,166,379,208" href="http://www.digg.com/" target="_blank" title="Digg" alt="Digg" />
			<area shape="circle" coords="500,184,32" href="http://wordpress.org/" target="_blank" title="Wordpress.org" alt="Wordpress.org" />
			<area shape="rect" coords="599,142,667,209" href="http://www.blogger.com/" target="_blank" title="Blogger" alt="Blogger" />
			
		</map>
	</div>
	
</body>
</html>

Style.css

body {
	background:#fff; 
	color: #000000; 
	font:12.35px Georgia, Arial, "Lucida Grande", Verdana, sans-serif;
}

a:link, a:visited {
	color:#0054a6;
	text-decoration:none; 
}

a:hover {
	text-decoration:underline;
}

p {
	margin:15px 0;
}

h1 {
	font-size:20px;
	margin-bottom:20px; 
}

#wrap {
	margin:10px auto;
	width:900px;
}

#wrap img {
	display:block;
	margin:0 auto; 
}

 

 

You May Also Like

About the Author: Ranjith Kumar A

0 0 votes
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x