JavaScript ( الدرس الرابع عشر ) : JavaScript Image Maps

aroma · 07-10-2008, 07:29 AM

خرائط الصور في HTML

سبق أن تعلمنا في HTML ان خرائط الصور هي صورة بمناطق ( نقاط ) قابلة للنقر .

و كل نقطة من هذه النقاط مرتبطة برابط الكتروني. و بمجرد الضغط على نقطة منها تنتقل الى الرابط .
:
مثال :

المثال التالي يوضح طريقة عمل خريطة الصور في HTML

كل نقطة من نقاط الصور ..مرتبطة بـ " رابط "

كود PHP:

   
 
<img src ="planets.gif"

width ="145" height ="126"

alt="Planets"

usemap ="#planetmap" />

<map id ="planetmap"

name="planetmap">

<area shape ="rect" coords ="0,0,82,126"

  href ="sun.htm" target ="_blank"

  alt="Sun" />

<area shape ="circle" coords ="90,58,3"

  href ="mercur.htm" target ="_blank"

  alt="Mercury" />

<area shape ="circle" coords ="124,58,8"

  href ="venus.htm" target ="_blank"

  alt="Venus" />

</map>

و النتيجة

اضافة بعض خصائص الجافا سكريبت

ببإمكاننا إضافة بعض الأحداث داخل وسم area في داخل خريطة الصورة

وسم area يقبل أحداث كـ

onClick ..( نقر )

onDblClick ( النقر المزدوج )

onMouseUp, ( ابعاد الماوس من على الصورة )

onMouseOver ( التأشير عل صورة محددة ) ,

onKeyPress,
onKeyDown,
onKeyUp,

onFocus, ( التركيز ع عنصر )

and onBlur events. (في هذا الحدث لا يكون العنصر هو محور التركيز )

onMouseMove, ( ابعاد الماوس من على الصورة)

onMouseOut ( عدم تحديد الصورة المطلوبة)

بعد اضافة خصائص الجافا سكريبت يصبح المثال السابق بهذه الصورة

كود PHP:

  <html>

<head>

<script type="text/javascript">

function writeText(txt)

{

document.getElementById("desc").innerHTML=txt;

}

</script>

</head>

<body>

<img src="planets.gif" width="145" height="126"

alt="Planets" usemap="#planetmap" />

 
<map id ="planetmap" name="planetmap">

<area shape ="rect" coords ="0,0,82,126"

onMouseOver="writeText('The Sun and the gas giant

planets like Jupiter are by far the largest objects

in our Solar System.')"

href ="sun.htm" target ="_blank" alt="Sun" />

 
<area shape ="circle" coords ="90,58,3"

onMouseOver="writeText('The planet Mercury is very

difficult to study from the Earth because it is

always so close to the Sun.')"

href ="mercur.htm" target ="_blank" alt="Mercury" />

 
<area shape ="circle" coords ="124,58,8"

onMouseOver="writeText('Until the 1960s, Venus was

often considered a twin sister to the Earth because

Venus is the nearest planet to us, and because the

two planets seem to share many characteristics.')"

href ="venus.htm" target ="_blank" alt="Venus" />

</map> 

 
<p id="desc"></p>

 
</body>

</html>

* تم بحمد الله


Ma3ali Tube	Be Happy	الجـوال	Ma3ali flickr	الغرفة الصوتية	البطاقات	الصـوتيـات	مركز التحميل	مجلة أجيال

أدوات الموضوع
مشاهدة صفحة طباعة الموضوع أرسل هذا الموضوع إلى صديق
انواع عرض الموضوع
العرض العادي الانتقال إلى العرض المتطور الانتقال إلى العرض الشجري

07-10-2008, 07:29 AM	#1
aroma	JavaScript ( الدرس الرابع عشر ) : JavaScript Image Maps خرائط الصور في HTML سبق أن تعلمنا في HTML ان خرائط الصور هي صورة بمناطق ( نقاط ) قابلة للنقر . و كل نقطة من هذه النقاط مرتبطة برابط الكتروني. و بمجرد الضغط على نقطة منها تنتقل الى الرابط . : مثال : المثال التالي يوضح طريقة عمل خريطة الصور في HTML كل نقطة من نقاط الصور ..مرتبطة بـ " رابط " كود PHP: `<img src ="planets.gif" width ="145" height ="126" alt="Planets" usemap ="#planetmap" /> <map id ="planetmap" name="planetmap"> <area shape ="rect" coords ="0,0,82,126" href ="sun.htm" target ="_blank" alt="Sun" /> <area shape ="circle" coords ="90,58,3" href ="mercur.htm" target ="_blank" alt="Mercury" /> <area shape ="circle" coords ="124,58,8" href ="venus.htm" target ="_blank" alt="Venus" /> </map>` و النتيجة اضافة بعض خصائص الجافا سكريبت ببإمكاننا إضافة بعض الأحداث داخل وسم area في داخل خريطة الصورة وسم area يقبل أحداث كـ onClick ..( نقر ) onDblClick ( النقر المزدوج ) onMouseUp, ( ابعاد الماوس من على الصورة ) onMouseOver ( التأشير عل صورة محددة ) , onKeyPress, onKeyDown, onKeyUp, onFocus, ( التركيز ع عنصر ) and onBlur events. (في هذا الحدث لا يكون العنصر هو محور التركيز ) onMouseMove, ( ابعاد الماوس من على الصورة) onMouseOut ( عدم تحديد الصورة المطلوبة) بعد اضافة خصائص الجافا سكريبت يصبح المثال السابق بهذه الصورة كود PHP: <html> <head> <script type="text/javascript"> function writeText(txt) { document.getElementById("desc").innerHTML=txt; } </script> </head> <body> <img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap" /> <map id ="planetmap" name="planetmap"> <area shape ="rect" coords ="0,0,82,126" onMouseOver="writeText('The Sun and the gas giant planets like Jupiter are by far the largest objects in our Solar System.')" href ="sun.htm" target ="_blank" alt="Sun" /> <area shape ="circle" coords ="90,58,3" onMouseOver="writeText('The planet Mercury is very difficult to study from the Earth because it is always so close to the Sun.')" href ="mercur.htm" target ="_blank" alt="Mercury" /> <area shape ="circle" coords ="124,58,8" onMouseOver="writeText('Until the 1960s, Venus was often considered a twin sister to the Earth because Venus is the nearest planet to us, and because the two planets seem to share many characteristics.')" href ="venus.htm" target ="_blank" alt="Venus" /> </map> <p id="desc"></p> </body> </html> * تم بحمد الله
aroma


منتديات مسلمة النسائية	مساحة إعلانيه

الذين يشاهدون محتوى الموضوع الآن : 1 ( الأعضاء 0 والزوار 1)

الأعضاء الذين قرؤوا الموضوع منذ 30 يوم ( أيام ) : 0 .
الموضوع لم يُقرأ بعد

JavaScript ( الدرس الرابع عشر ) : JavaScript Image Maps

فريق التعلم الذاتي لبناء المواقع