تصویر محمدعلی اکبری

ایجاد Image map با استفاده از Dreamweaver

در نرم‌افزار Dreamweaver یک صفحه جدید ایجاد کرده و تصویر استان تهران را در آن Insert می‌کنیم. سپس با استفاده از ابزار Polygan Hotspot Tool نواحی مورد نظر را انتخاب کرده و HTML Map را میسازیم.

<img src="tehran-map.jpg" width="520" height="276" usemap="#tehran-map" border="0" id="tehran-map-image" />
<map name="tehran-map" id="tehran-map">
  <area shape="poly" coords="32,128,30,121,33,114,39,109,45,107,52,107,59,107,66,106,74,105,79,105,87,105,91,106,96,106,101,102,107,102,114,102,118,99,126,97,131,98,134,100,139,101,142,99,147,98,155,98,159,95,166,96,168,100,173,103,180,104,180,110,171,112,169,116,169,122,170,128,171,134,166,138,161,144,153,147,148,150,141,152,136,153,131,149,125,146,118,144,112,145,104,144,97,140,92,138,86,137,81,134,72,130,63,129,57,127,48,129,44,129,39,130" href="http://shahriar.sabt.init.ir/fa" alt="Shahriar" />
  <area shape="poly" coords="173,154,177,151,180,148,183,147,188,148,192,145,193,140,199,138,203,136,205,132,207,128,203,125,200,121,196,118,191,118,187,116,183,112,179,109,176,113,171,114,169,119,171,128,170,135,167,139,163,142,159,146,163,150,167,152" href="http://eslam-shahr.sabt.init.ir/fa" alt="Eslamshahr" />
  <area shape="poly" coords="136,156,135,163,139,166,146,165,154,164,160,165,168,164,174,162,175,156,170,152,165,151,161,148,158,145,151,150,142,152" href="http://robat-karim.sabt.init.ir/fa" alt="Robar karim" />
  <area shape="poly" coords="134,165,129,169,126,172,123,179,122,184,120,190,116,193,116,198,119,201,126,201,135,200,142,200,149,203,161,207,177,214,192,218,211,226,219,228,227,229,234,233,237,236,234,218,230,206,225,196,218,184,218,171,224,163,232,155,240,151,244,144,248,143,248,139,246,132,243,124,238,122,233,119,228,123,227,128,222,131,214,130,208,130,205,135,199,139,192,142,191,147,181,148,173,155,174,161,166,165,152,166" href="http://rei.sabt.init.ir/fa" alt="Rei" />
  <area shape="poly" coords="203,58,197,57,192,53,186,49,181,45,175,44,171,46,173,51,174,57,173,62,170,66,164,70,161,73,162,77,160,84,158,89,157,95,163,96,166,97,170,101,177,103,181,105,180,110,187,115,195,118,201,122,207,129,215,129,223,130,227,127,229,121,235,120,240,123,244,123,245,117,250,113,255,116,260,121,263,126,268,128,275,127,280,127,282,120,286,115,288,108,290,102,291,95,288,90,283,83,278,81,277,87,274,91,266,90,258,88,250,86,244,84,237,83,231,82,223,78,214,79,210,80,204,81,201,76,203,68,203,63" href="http://markazi.sabt.init.ir/fa" alt="Tehran" />
  <area shape="poly" coords="204,58,208,53,210,46,214,40,219,34,226,29,229,26,233,27,239,29,244,31,251,33,257,34,262,39,265,45,269,51,274,55,282,57,287,62,283,68,280,73,279,79,278,85,273,91,260,88,250,87,242,83,233,83,224,79,215,78,209,79,203,79,203,68" href="http://shemiran.sabt.init.ir/fa" alt="Shemiran" />
  <area shape="poly" coords="249,144,255,147,261,149,270,149,278,150,285,149,287,143,287,135,285,130,279,128,269,128,264,125,260,120,254,117,248,115,245,123,247,135" href="http://pakdasht.sabt.init.ir/fa" alt="Pakdasht" />
  <area shape="poly" coords="238,237,238,230,236,222,233,211,229,202,223,193,219,186,219,174,223,166,230,159,236,152,242,148,247,143,252,147,259,150,268,150,277,150,285,151,289,152,290,160,290,169,294,175,283,188,282,193,283,200,287,204,292,208,297,214,301,221,307,226,314,228,318,231,314,238,310,244,307,251,303,256,301,262,300,268,291,268,284,264,275,258,268,252,258,247,249,245,241,241" href="http://varamin.sabt.init.ir/fa" alt="Varamin" />
  <area shape="poly" coords="287,65,281,72,279,82,284,84,290,93,291,102,287,111,282,120,281,127,285,132,286,139,286,146,284,150,290,153,293,148,298,145,305,145,310,147,315,151,320,155,327,156,335,154,343,153,349,152,355,152,363,153,367,156,372,158,376,161,376,154,377,147,382,144,387,140,392,139,396,136,402,133,407,130,409,125,409,121,412,116,417,112,420,106,415,100,407,97,399,97,390,98,382,100,374,100,367,95,361,90,352,88,345,86,334,87,328,87,317,87,310,85,303,80,297,73,291,68" href="http://damavand.sabt.init.ir/fa" alt="Damavand" />
  <area shape="poly" coords="376,160,381,156,386,155,390,159,394,162,399,163,403,159,407,155,412,151,414,145,415,140,420,138,426,139,431,136,436,132,444,124,450,117,459,112,472,108,482,106,489,103,490,93,494,87,493,79,485,78,477,77,465,76,460,74,451,69,437,70,429,66,423,61,415,57,407,55,399,56,392,60,385,63,376,64,370,67,350,86,356,88,364,92,372,98,380,100,388,98,396,98,406,97,413,99,418,103,421,107,418,112,413,118,409,123,409,128,401,134,393,139,386,142,380,145,377,152" href="http://firoozkooh.sabt.init.ir/fa" alt="Firoozkooh" />
</map>

افزوردن جلوه‌های ویژه به نقشه

برای افزودن جلوه‌های ویژه به نقشه از jQuery و پلاگین jQuery maphilight استفاده می‌کنیم.

<script src="jquery-1.9.1.min.js"></script>
<script src="jquery.maphilight.min.js"></script>
<script type="text/javascript" >
  $(function() {
    $('#tehran-map-image').maphilight();
  });
</script>
برچسب ها: 

دیدگاه‌ها

تصویر مسعود

مسعود (تایید نشده)

با سلام
من می خواهم با استفاده از جاوا اسکریپت نقشه ای مانند سایت
http://mytehran.ir
ایجاد کنم ولی با وجود تکه کد

$('#tehran').maphilight();


برنامه به درستی کار نمی کند ولی وقتی خط فوق را حذف می کنم برنامه کار می کند.
به نظر شما مشکل کجاست و آیا من برای ایجاد نقشه مورد نظر باید از همین
روش استفاده کنم یا روش دیگری. لطفا بنده را راهنمایی کنید.
با تشکر

<script type="text/javascript" >
        function f1(){
            $("#tehran").fadeOut(1000);
            setTimeout("document.getElementById('tehran').src='tehran-map2.jpg'",1000);
            $("#tehran").fadeIn(1000);
        
             $(function() {
                   // $('#tehran').maphilight();
               });
            
        }
      $(function() {
      // $('#tehran').maphilight();
      });
      

    </script>
</head>

<body>

<div id="div1">
<img  src="tehran-map.jpg" alt="aa" width="520" height="276" border="0" usemap="#tehran-map" id="tehran" />
<map name="tehran-map" id="tehran-map">
  <area shape="poly" coords="225,230" href="#" />
  <area shape="poly" coords="299,272,241,240,237,219,231,205,227,198,222,191,219,178,220,166,228,160,240,152,255,144,269,155,288,155,291,171,285,196,298,209,314,229,315,235"  alt="tehranmap" onclick="f1()"/>
  <area shape="poly" coords="195,149,161,240,131,217,114,203,114,180,122,157,144,147,154,140,162,140,170,141,178,145,183,159,183,186,160,223" href="#" />
</map>
</div>
تصویر محمدعلی اکبری

محمدعلی اکبری

تب console مرورگر خود را بررسی کردید؟

تصویر لیلاعبادی

لیلاعبادی (تایید نشده)

من نقشه ایران را با به شکل بالا دارم فقط میخوام سایز نقشه را تغییر بدم چطور میتونم موقعیت کدهای جی کئوری را تغییر بدم
لطفا راهنمایی فرمایید
باتشکر

تصویر محمدعلی اکبری

محمدعلی اکبری

نقشه را در dreamweaver باز کنید و از ابزار map استفاده کنید.

تصویر مانی.ب

مانی.ب (تایید نشده)

سلام ممد علی! آقا دمت گرم که اینطور دانسته هات رو با همه قسمت می کنی. دستت درد نکنه داداش، خیلی بکار اومد.

تصویر مجید علیزاده

مجید علیزاده (تایید نشده)

با سلام.
لطفا در صورت امکان یک لینک برای دریافت نرم افزار Polygan Hotspot Tool ارائه فرمایید.
با تشکر

تصویر محمدعلی اکبری

محمدعلی اکبری

یکی از ابزارهای داخل Dreamweaver هست.

تصویر namvar

namvar (تایید نشده)

سلام آقاي اكبري ، من براي كارم به يك نقشه مشابه نياز دارم كه روي هر استان كه كليك مي كنيم، يكسري اطلاعات مربوط به اينترنت آن استان را نشان بدهد. آيا شما كار برنامه نويسي هم قبول مي كنيد؟ اين كارم بسيار فوري هستش ممنون مي شوم زود جواب بدين. با تشكر فراوان

تصویر شاهين فيضي

شاهين فيضي (تایید نشده)

دمت گرم خیلی خوب بود

تصویر تالار

تالار (تایید نشده)

سلام
من اینکار رو میخوام برای نقشه تهران انجام بدم. آیا چنین فایلی آماده دارید ؟

تصویر محمدعلی اکبری

محمدعلی اکبری

سلام دوست عزیز، بهره برای تمیز در اومدن کار از svg استفاده کنید. برای اینکه نقشه رو خودتون بسازید هم این مطلب خوبیه:

http://www.sitepoint.com/dynamic-geo-maps-svg-jquery

افزودن نظر جدید