< meta name="viewport" content="width=device-width, initial-scale=1" >

ابزار لینکدار کردن قسمتی از عکس

ابزار مپ تک یکی از ابزارهای بسیار جالب و زیباست که شما میتوانید قسمتهایی از عکس خود را لینکدار کنید تا با کلیک روی قسمتی از عکس به لینک مربوطه انتقال یابد.

خب برای ادامه ابتدا عکس خود را در سایتهای اپلود اپلود کرده و لینک ان را در زیر وارد نمایید و روی فلش کلیک کنید تا ساخت لینک شروع شود.

اطلاعات بیشتر!

انتخاب فایل از سیستم

تعویض با فلش اپلود اپلود

رفتن به عکس

یا قرار دادن لینک عکس خود

پس از انتخاب تصویر شما میتوانید مختصات نقشه یا همان لینک عکسهای خودرا اضافه کنید و کد htmlتولید شده ان را در سایت و و بلاگ خود استفاده کنید.

ابزار لینکدار کردن قسمتی از یک عکس

این ابزار بسیار مفید توسط کدبازان ترجمه و برای استفاده شما عزیزان در سایت قرار داده شده.

برای هر چه بهتر شدن ابزار انتقاد و پیشنهاد در باره ابزار یادتون نره

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 ;)

Maps & Newsletter with Imagemaps

Imagemaps are defined with HTML 3.2. Nowadays every Web-Browser and Mail-Client supports the <map>-tag without having problems.

Popular applications are newsletter and e-mails with large teaser and landingpages, banner or world- / country-maps on websites.

Browser-Support

  • Internet Explorer 6+
  • Mozilla Firefox
  • Google Chrome
  • Apple Safari

Mail-Clients

  • Outlook
  • Thunderbird
  • Apple Mail

For more infos, visit your best friend Wikipedia: Wikipedia: Image map.

About this Imagemap Tool

This Software generates HTML Imagemaps and <area>-tags by clicking in an uploaded image.

Usage:

  • Upload or link an image
  • Click into the image to set coordinates
  • Copy the Imagemap HTML code

About me

Hi folks, My name is http://codebazan.ir, web developer and freelance programmer based in Hamburg, Germany. I personally use this software for developing Newsletter and Landingpages.

In some kinds of HTML, for example email templates, I don't have the opportunity to use special CSS hacks. It's better to use many images with a lot of links via image maps.

I'm really sorry for problems in previous versions, I apologize for that. If you have questions or find bugs, don't be shy to send me an email to . I'm also happy for getting some feedback :)

ابزار لینکدار کردن عکس
کدبازان سایت کامل و جامع برای
انتشار انواع کدهای سایت
ابزارهای کاربردی میباشد. info@codebazan.ir
Copyright © 2016 by