انجمن ایران پی اچ پی
استفاده ار map و area - نسخه قابل چاپ

+- انجمن ایران پی اچ پی
+-- انجمن: کلاینت ساید/Client side (https://forum.iranphp.org/Forum-%DA%A9%D9%84%D8%A7%DB%8C%D9%86%D8%AA-%D8%B3%D8%A7%DB%8C%D8%AF-Client-side)
+--- انجمن: HTML و CSS (https://forum.iranphp.org/Forum-HTML-%D9%88-CSS)
--> +--- موضوع: استفاده ار map و area



استفاده ار map و area - undefined - ۱۳۹۱ خرداد ۲۶

سلام، امروز به این سایت برخورد کردم!
مورد جالب اون نقشه کشور هست.
روش ساده ای که به ذهن من رسید برای پیاده سازیش این بود که برای هر شهر دو تا تصویر داشته باشیم. تصویر زمینه و تصویری که با رفتن ماوس روش باید عوض شه! و در این هنگام فقط position عکس رو تغییر میدم.
سورس اون سایت رو باز کردم اما از این کارا خبری نبود! از map و area استفاده کرده بود. یه سرچی زدم اما چیزی دستگریم نشد. سورس رو هم مقداری بررسی کردم اما به نتیجه ای نرسیدم.
حالا هم نمیدونم روش کارش به چه صورته Sad


RE: استفاده ار map و area - undefined - ۱۳۹۱ خرداد ۲۸

اصلا ربطی به map و area نداشت Big Grin

هنوزم متوجه نشدم که چه جوری اون کارو انجام میده!
اما کلی فسفر سوزوندم، گشتم و در نتیجه با استفاده از جاوا اسکریپت تونستم مشکل رو برطرف کنم.

در حالت اول یک تصویر داریم که با رفتن ماوس روش رنگش با استفاده از جاوا اسکریپت عوض میشه
تقریبا کدش به این صورته، اما هنوز دارم روش کار میکنم

کد:
var canvas = document.getElementById("canvas"),
ctx = canvas.getContext("2d"),
image = document.getElementById("testImage");
ctx.drawImage(image,0,0);
var imgd = ctx.getImageData(0, 0, 128, 128),
    pix = imgd.data,
    uniqueColor = [0,0,255]; // Blue for an example, can change this value to be anything.
// Loops through all of the pixels and modifies the components.
for (var i = 0, n = pix.length; i <n; i += 4) {
      pix[i] = uniqueColor[0];   // Red component
      pix[i+1] = uniqueColor[1]; // Blue component
      pix[i+2] = uniqueColor[2]; // Green component
      //pix[i+3] is the transparency.
}
ctx.putImageData(imgd, 0, 0);
var savedImageData = document.getElementById("testImage");
savedImageData.src = canvas.toDataURL("image/png");



RE: استفاده ار map و area - Y.P.Y - ۱۳۹۱ خرداد ۲۸

پس این چیه؟
bundle/9oXpR/viwii3/images/maps/fr/regions/alsace.gif