Resim Üzerine Koordinatla Link Verme (HTML Map)

Html dilinde resim üzerine istediğiniz yere link verebilmeniz için geliştirilen bu sistem işinizi gayet kolaylaştıracak.

HTML Map tekniğiyle haritalar yanı sıra geometrik bir çok şekil için linkler verip html php  olarak resmi kaydedip rahatlıkla kullanabileceksiniz.

Aşağıdaki siteyi kullanarak üzerinde link vereceğiniz resmi yükleyin ve link vereceğiniz yerleri seçin koordinatları alın yada sayfayı öylece kaydedin..

http://imagemap-generator.dariodomi.de/

 

HTML Code: <img>, <map> & <area>

The clickable area can be rectangles shape=”rect”, polygons shape=”poly” or circles shape=”circle”.

Shape-Values are coordiate-pairs. Every pair have a X and a Y value (from left/top of an image) separated with a comma. Every pair is as well separated with a comma.

  • Rectangle: Set four coordinates. x1,y1,x2,y2
  • Polygon: Set as many coordinates as you want (a multiple of two)
  • Circle: One coordinate-pair and second value a radius. x1,y1,radius

HTML Imagemap Demo Code with x / y

  1. <img src=“teaser.jpg” usemap=“#Teaser” alt=“” />
  2. <map name=“Teaser” id=“Teaser”>
  3.    <area alt=“” href=“#” coords=“x1,y1,x2,y2” shape=“rect” />
  4.    <area alt=“” href=“#” coords=“x1,y1,x2,y2,x3,y3 […] “ shape=“poly” />
  5.    <area alt=“” href=“#” coords=“x1,y1,radius” shape=“circle” />
  6. </map>

Use the <area> href-attribute to set links. It’s also important to link the <img> with the <map> using usemap-attribute within the image. These value of the attribute must be the map’s name-attribute.

For using this software, you just need to click into your uploaded image. So quickly forget the HTML code you’ve learned before 😉

^