Pages

Ads 468x60px

Friday, April 11, 2014

clickable map


Take a look at the image below.It is clickable!Play around a little bit.





Gredece




Germany


France


Italy


England





You need this piece of code to create an image like the one above.


First copy this code and add it into you head section.
<!--map highlight-->
<script src='https://dl.dropboxusercontent.com/s/e72eyj3cqi1yf1i/wz_jsgraphics.js' type='text/javascript'/>
<script src='https://dl.dropboxusercontent.com/s/m5f0lfhltt2jgr9/mapper.js' type='text/javascript'/>
<!--end of map highlight-->


Then the html part.
<div>
<img alt="" border="0" class="mapper" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhw1YxGQgFv4UKegqqeHDRdGzvVhIqbVB2XSvwsiwN8X9dBdWD9Jn37_t5FmcpAP1iYjOMlsB1vskRbuDjSEF0Z6YbhcpBqnQGb3c2K2ZfMdb7-9BRnk_5zoXP42g6cJfToSk5Y9vBa7os/s1600/EUROPE3.png" height="600" id="Image-Maps-Com-image-maps-2014-04-11-062518" orgheight="600" orgwidth="720" usemap="#image-maps-2014-04-11-062518" width="720" />
<map id="ImageMapsCom-image-maps-2014-04-11-062518" name="image-maps-2014-04-11-062518">


<!--Greece-->
<area alt="Greece" coords="448,473.14288330078125,444,468.14288330078125,438,476.14288330078125,432,479.14288330078125,424,476.14288330078125,418,476.14288330078125,413,482.14288330078125,409,484.14288330078125,404,485.14288330078125,401,488.14288330078125,396,489.14288330078125,392,494.14288330078125,387,494.14288330078125,385,499.14288330078125,382,505.14288330078125,379,512.1428833007812,377,516.1428833007812,373,513.1428833007812,372,517.1428833007812,379,524.1428833007812,385,522.1428833007812,385,531.1428833007812,382,538.1428833007812,389,543.1428833007812,406,557.1428833007812,420,562.1428833007812,426,566.1428833007812,431,576.1428833007812,440.14286041259766,576.1428833007812,441.14286041259766,584.1428833007812,453.14286041259766,577.1428833007812,459.14286041259766,574.1428833007812,466.14286041259766,574.1428833007812,468.14286041259766,568.1428833007812,479.14286041259766,562.1428833007812,486.14286041259766,552.1428833007812,489.14286041259766,545.1428833007812,484.14286041259766,542.1428833007812,476.14286041259766,546.1428833007812,469.14286041259766,544.1428833007812,459.14286041259766,531.1428833007812,454.14286041259766,520.1428833007812,453.14286041259766,517.1428833007812,452.14286041259766,509.14288330078125,455.14286041259766,508.14288330078125,449.14286041259766,505.14288330078125,440.14286041259766,501.14288330078125,439.14286041259766,492.14288330078125,440.14286041259766,490.14288330078125,440.14286041259766,488.14288330078125" href="http://www.glossesweb.com/2011/06/oi-dialektoi-thw-ellhnikhs.html" shape="poly" style="outline: none;" target="_self" title="Greece"></area>


<!--Germany-->
<area alt="Germany" coords="239,286,241,295,241,302,237,305,229,306,224,312,224,321,223,324,222,333,216,335,215,342,211,350,215,360,216,367,220,376,232,379,230,392,228,398,237,401,242,400,253,404,265,403,272,401,281,398,287,394,293,383,283,372,280,358,286,353,293,351,303,350,304,344,302,334,298,323,297,320,294,310,294,300,285,296,285,290,275,295,266,300,265,292,260,296,253,290,248,287" href="http://www.glossesweb.com/2011/08/germanikh-glwssa.html" shape="poly" style="outline: none;" target="_self" title="Germany"></area>

<!--France-->
<area  alt="France" title="France" href="http://www.glossesweb.com/2011/10/gallikh-glwssa.html" shape="poly" coords="227,400,231,384,235,378,222,373,210,365,205,364,197,358,188,349,181,342,171,343,168,355,157,361,154,363,145,365,141,358,132,359,134,373,123,372,117,367,107,372,101,379,112,387,122,396,131,415,128,436,121,454,131,467,144,471,156,474,165,481,177,479,179,468,188,464,201,469,214,469,224,464,229,454,222,447,222,440,219,434,223,423,216,416,211,420,215,411" style="outline:none;" target="_self"     />

<!--Italy-->
<area  alt="Italy" title="Italy" href="http://www.glossesweb.com/2011/04/italian.html" shape="poly" coords="250,500,241,501,236,505,231,506,236,519,232,534,243,536,248,532,287,556,304,565,320,569,324,562,324,549,335,542,339,536,346,532,347,520,338,512,341,507,353,513,359,509,349,501,334,495,325,489,324,483,313,481,300,469,294,457,283,448,284,437,284,431,294,428,292,418,292,413,276,408,267,413,260,417,251,420,245,426,235,420,227,426,222,427,221,435,216,439,220,451,231,460,238,453,245,452,256,457,259,471,257,475" style="outline:none;" target="_self"     />

<!--England-->
<area  alt="England" title="England" href="http://www.glossesweb.com/2011/10/ekmathsh-agglikwn.html" shape="poly" coords="169,189,161,195,147,210,144,218,133,219,121,218,108,227,106,237,111,257,108,267,98,273,95,283,105,283,114,283,120,288,121,302,118,313,110,321,123,331,112,335,99,346,110,347,119,349,124,343,137,346,149,347,161,347,170,342,171,336,167,332,172,326,178,319,173,310,164,305,162,291,154,280,152,266,145,257,152,247,155,235,147,233,139,230,149,224,155,213,166,201,170,194" style="outline:none;" target="_self"     />

</map>
</div>

Orange is the Url of your main image.Yellow are the coordinates and green is target url.

Where to get the coordinates.
The coordinates are of this form coords='x1,y1,x2,y2,x3,y3...'

Now where can one get the coordinates of a shape.

You can do that either manually with Paint by placing the cursor where you want and marking the coordinates.Repeat process until you get all of them.That way requires painstaking work.

The second way is by using a programm such as Photoshop or doing it online is websites like this.

No comments:

Post a Comment

 

Sample text

Sample Text