آموزش نقشه تصویر در جاوا اسکریپت

4 سال پیش

امتیاز دهید post

آموزش نقشه تصویر در جاوا اسکریپت

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

برای ایجاد نقشه تصویری سمت مشتری می توانید از JavaScript استفاده کنید. نقشه های تصویری سمت مشتری توسط ویژگی usemap برای تگ <img /> فعال شده و توسط تگ های ویژه <map> و <area> تعریف می شوند.

تصویری که قرار است نقشه را تشکیل دهد با استفاده از عنصر <img /> به صورت عادی در صفحه قرار می گیرد، با این تفاوت که ویژگی خاصی به نام usemap حمل می کند. مقدار ویژگی usemap مقدار صفت name بر روی عنصر <map> است که شما در شرف ملاقات آن هستید و قبل از آن یک علامت پوند یا هش وجود دارد.

عنصر <map> در واقع نقشه را برای تصویر ایجاد می کند و معمولاً مستقیماً بعد از عنصر <img /> دنبال می شود. این به عنوان ظرفی برای عناصر <area /> عمل می کند که در واقع نقاط قابل کلیک را تعریف می کنند. عنصر <map> فقط یک ویژگی را به همراه دارد ، مشخصه name، نامی است که نقشه را مشخص می کند. به این ترتیب که عنصر <img /> می داند از کدام عنصر <نقشه> استفاده کند.

عنصر <area> شکل و مختصات مشخص کننده مرزهای هر نقطه قابل کلیک را مشخص می کند.

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

&lt;html&gt;   
   &lt;head&gt;
      &lt;title&gt;Using JavaScript Image Map&lt;/title&gt;
      
      &lt;script type = "text/javascript"&gt;
         &lt;!--
            function showTutorial(name) {
               document.myform.stage.value = name
            }
         //--&gt;
      &lt;/script&gt;
   &lt;/head&gt;
   
   &lt;body&gt;
      &lt;form name = "myform"&gt;
         &lt;input type = "text" name = "stage" size = "20" /&gt;
      &lt;/form&gt;
      
      &lt;!-- Create  Mappings --&gt;
      &lt;img src = "/images/usemap.gif" alt = "HTML Map" border = "0" usemap = "#tutorials"/&gt;
      
      &lt;map name = "tutorials"&gt;
         &lt;area shape="poly" 
            coords = "74,0,113,29,98,72,52,72,38,27"
            href = "/perl/index.htm" alt = "Perl Tutorial"
            target = "_self" 
            onMouseOver = "showTutorial('perl')" 
            onMouseOut = "showTutorial('')"/&gt;
         
         &lt;area shape = "rect" 
            coords = "22,83,126,125"
            href = "/html/index.htm" alt = "HTML Tutorial" 
            target = "_self" 
            onMouseOver = "showTutorial('html')" 
            onMouseOut = "showTutorial('')"/&gt;
         
         &lt;area shape = "circle" 
            coords = "73,168,32"
            href = "/php/index.htm" alt = "PHP Tutorial"
            target = "_self" 
            onMouseOver = "showTutorial('php')" 
            onMouseOut = "showTutorial('')"/&gt;
      &lt;/map&gt;
   &lt;/body&gt;
&lt;/html&gt;

<html>

<head>

<title>Using JavaScript Image Map</title>

<!--

function showTutorial(name) {

document.myform.stage.value = name

}

//-->

</script>

</head>

<body>

</form>

<area shape="poly"

coords = "74,0,113,29,98,72,52,72,38,27"

href = "/perl/index.htm" alt = "Perl Tutorial"

target = "_self"

onMouseOver = "showTutorial('perl')"

onMouseOut = "showTutorial('')"/>

<area shape = "rect"

coords = "22,83,126,125"

href = "/html/index.htm" alt = "HTML Tutorial"

target = "_self"

onMouseOver = "showTutorial('html')"

onMouseOut = "showTutorial('')"/>

<area shape = "circle"

coords = "73,168,32"

href = "/php/index.htm" alt = "PHP Tutorial"

target = "_self"

onMouseOver = "showTutorial('php')"

onMouseOut = "showTutorial('')"/>

</map>

</body>

</html>

منبع.

لیست جلسات قبل آموزش جاوا اسکریپت

امتیاز دهید post

نویسنده مطلب saber

آموزش نقشه تصویر در جاوا اسکریپت

آموزش نقشه تصویر در جاوا اسکریپت

لیست جلسات قبل آموزش جاوا اسکریپت

دیدگاه شما

بدون دیدگاه

آموزش نقشه تصویر در جاوا اسکریپت

لیست جلسات قبل آموزش جاوا اسکریپت

دیدگاه شما

برای صرف‌نظر کردن از پاسخ‌گویی اینجا را کلیک نمایید.

بدون دیدگاه