تغيير الصورة على الماوس

Question

لدي صفحة HTML / CSS بسيطة، حيث أظهر صورة.

الآن عندما يقوم المستخدم بتحرك الماوس على الصورة، أود تبديل الصورة إلى بعض الصورة الأخرى.
عند مغادرة منطقة الصورة، يجب إظهار الصورة القديمة مرة أخرى.

كيف يمكنني تحقيق ذلك؟ سيكون الإصدار الذي يعمل بدون جافا سكريبت أفضل.

شكرا لك مقدما!

Answer 1

يمكنك استخدام CSS لتغيير صورة الخلفية للعنصر عند تحريكه. ال hover يتم دعم الطبقة الزائفة في معظم العناصر في المتصفحات الأخيرة، ولكن أن تكون متوافقة مع الوراء (Internet Explorer 6)، تحتاج إلى استخدام علامة مرساة ل hover للعمل.

الحدث OnClick في الرابط هو مجرد شيء يحدث إذا قمت بالنقر فوقه، فلا يوجد لديه أي شيء مع تأثير تحوم للقيام به. يمكنك بالطبع القيام بشيء ما عند النقر فوق الصورة، إذا أردت.

لغة البرمجة:

<a href="#" id="picture" onclick="return false;"></a>

CSS:

#picture {
   display: block;
   width: 200px;
   height: 200px;
   background-image: url(firstimage.gif);
   border: none;
   text-decoration: none;
}
#picture:hover {
   background-image: url(hoverimage.gif);
}

Answer 2

هذه يبدو موجزا إلى حد ما مكتوب جيدا (ملاحظة: لن تعمل حلول التمديد CSS على IE6.)

Answer 3

<img src="https://pbs.twimg.com/profile_images/677544618326556672/WID2m1_a.png" onmouseout="this.src='https://pbs.twimg.com/profile_images/677544618326556672/WID2m1_a.png'" onmouseover="this.src='https://pbs.twimg.com/profile_images/638751551457103872/KN-NzuRl.png'" alt="image" width="50px" height="50px">