الكثير من أصحاب الصفحات يسألون دائماً عن أسلوب تبديل الصورة عند مرور المؤشر عليها، أو ما يسمى تبديل الأزرار أو الصور، والبعض يأخذ برنامج Java Script ويضعه في منطقة Head ثم يضع شفرة أخرى للجافا ويضعها للصورة المراد عمل التأثير عليها! طبعاً هذا العمل يتكرر مع كل صورة في الصفحة فتخيلوا حجم النص الذي تحتاج عمله لصفحة فيها 5 أو 10 رسمات!!
هذا أسلوب بسيط جداً ولا يحتاج لخبرة كبيرة تعلمته لوحدي ومع الخطأ وتصحيح الخطأ وصلت للحل الصحيح عن طريق لغة HTML فقط
هذا هو الكود
كود:
<IMG
onmouseover='src="******2.gif"'
onmouseout='src="******1.gif"'
src="******1.gif">
دعونا نشرح هذا النص قليلاً
طبعاً السطر الأول هو وسم الصورة img
onmouseovr هنا تخبر المتصفح عندما يكون مؤشر الماوس على الصورة فمصدر الصورة src يتغير ليعطيك تأثير الزر المطلوب، بمعنى ان عليك أن تقوم بعمل صورتين أحدهما الأولى العادية والثانية هي المتغيرة عند مرور مؤشر الماوس عليها.
onmouseout هنا تخبر المتصفح بإعادة الصورة الأولى بعد ابتعاد مؤشر الماوس عن الصورة، وإذا لم تضع هذا النص فإن الصورة الثانية ستبقى ولن تحصل على التأثير المطلوب.
السطر الثاني هو مصدر الصورة، أي تضع مكان ****** اسم الملف، وهو الصور الأولى التي يراها المتصفح، وكذلك هي الصورة نفسه التي يجب أن تضعها لأمر onmouseout
أتمنى أنكم فهمتم هذا الدرس!
