dddd
Saturday, April 12, 2014
Friday, April 11, 2014
clickable map
Take a look at the image below.It is clickable!Play around a little bit.
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-->
<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>
<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.
Subscribe to:
Posts (Atom)
