Technical guides & Users manualsContains all sorts of manuals
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.
|
Previous topic :: Next topic |
Author |
Message |
tellmewhy Administrateur
Offline
Joined: 27 Dec 2006 Posts: 524
|
Posted: 30/07/2009 18:19:20 Post subject: HTML Code - Image maps explained |
|
|
Most modern browsers support client-side image maps. Here is an example client-side 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
|
Posted: 30/07/2009 19:05:30 Post subject: HTML Code - Image maps explained |
|
|
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.
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 |
|
|
|
|