Technical guides & Users manuals Forum Index

Technical guides & Users manuals
Contains all sorts of manuals

 FAQFAQ   SearchSearch   MemberlistMemberlist   UsergroupsUsergroups   RegisterRegister 
 ProfileProfile   Log in to check your private messagesLog in to check your private messages   Log inLog in 



 Bienvenue - Welcome 
Welcome to the tellmewhy technical forum.
Yopu have an interesting guide, you have some knowledge to share ?
Here you can post it.

Your knowledge will be shared.
All together we know it better.
HTML Code - Image maps explained

 
Post new topic   Reply to topic    Technical guides & Users manuals Forum Index -> Technical guides & Users manuals -> HTML - Code (Tips and tricks for building a website)
Previous topic :: Next topic  
Author Message
tellmewhy
Administrateur

Offline

Joined: 27 Dec 2006
Posts: 524

PostPosted: 30/07/2009 18:19:20    Post subject: HTML Code - Image maps explained Reply with quote

Most modern browsers support client-side image maps.
Here is an example client-side image map:









Image Map

In the HTML source, this client-side image map consists of two parts:

  • The MAP and AREA elements to associate the image areas with URLs.
    The Name attribute of the MAP element names the image map.

  • The IMG element to embed the image in the page with an Ismap attribute and the Usemap attribute set to the name of the image map.


Code:
<MAP Name="mymap">
<AREA Shape="circle" Coords="70,84,51" Href="http://www.december.com">
<AREA Shape="rect" Coords="25,180,125,280" Href="http://www.december.com/html/">
<AREA Shape="poly" Coords="153,106,186,225,340,193,315,81,304,167" Href="http://www.december.com/works/tour.html">
<AREA Shape="rect" Coords="420,19,478,278">
<AREA Shape="circle" Coords="499,299,100" Href="http://www.cnn.com/">
<AREA Shape="default" Coords="0,0,500,300" Href="http://www.december.com/john/">
</MAP>

<IMG Src="../images/imagemap.gif" Width="500" Height="300" Alt="Image Map" Usemap="#mymap">
Back to top
tellmewhy
Administrateur

Offline

Joined: 27 Dec 2006
Posts: 524

PostPosted: 30/07/2009 19:05:30    Post subject: HTML Code - Image maps explained Reply with quote

Code:
<html>
<head>
<title>Imagemap test</title>
</head>
<body bgcolor="#dfdfff">
<h>Test imagemap</h1>
This is the test imagemap.<p>
<a href="http://www.pa.msu.edu/cgi-bin/imagemap/~perkins/imagemap/test/trial_image.map">
<img src="boxes.gif" width="200" height="200" alt="[test imagemap]" border="0" usemap="#clientside"></a>
<map name="clientside">
<area shape="rect" href="/~perkins/imagemap/test/green.html" coords="5,5,75,71">
<area shape="rect" href="/~perkins/imagemap/test/border.html" coords="1,1,79,75">
<area shape="rect" href="/~perkins/imagemap/test/red.html" coords="0,104,112,199">
<area shape="rect" href="/~perkins/imagemap/test/yellow.html" coords="115,115,131,182">
<area shape="rect" href="/~perkins/imagemap/test/blue.html" coords="114,0,199,111">
<area shape="rect" href="/~perkins/imagemap/test/cyan.html" coords="80,80,98,98">
<area shape="rect" href="/~perkins/imagemap/test/magenta.html" coords="134,111,185,164">
<area shape="rect" href="/~perkins/imagemap/test/black.html" coords="122,183,199,199">
<area shape="default" href="/~perkins/imagemap/test/whitearea.html">
</map>
<p>
It should work as a client-side imagemap on graphical browsers which support that feature, and as
a server-side imagemap on the rest. Most non-graphical browsers won't get
much out of it, though very recent versions of Lynx will give the option of
displaying the possible links within the imagemap as a menu similar to
those found in HTML "forms".
<p>
<a href="testmap_code_annotated.html">Source code for this page, with
commentary, is available.</a>
</body>
</html>




Imagemap test


Test imagemap
This is the test imagemap.



[test imagemap]













It should work as a client-side imagemap on graphical browsers which support that feature, and as
a server-side imagemap on the rest. Most non-graphical browsers won't get
much out of it, though very recent versions of Lynx will give the option of
displaying the possible links within the imagemap as a menu similar to
those found in HTML "forms".


Source code for this page, with
commentary, is available.


Back to top
Display posts from previous:   
Post new topic   Reply to topic    Technical guides & Users manuals Forum Index -> Technical guides & Users manuals -> HTML - Code (Tips and tricks for building a website) All times are GMT
Page 1 of 1

 

 
Jump to:  

Index | Getting a forum | Free support forum | Free forums directory | Report a violation | Cookies | Charte | Conditions générales d'utilisation
Powered by phpBB © 2001, 2005 phpBB Group