رویداد onmouseover
مثال (رویداد onmouseover)
اجرا کردن یک تابع جاوااسکریپت هنگامی که نشانگر موس بر روی یک عکس وارد می شود:
<img onmouseover="bigImg(this)" src="smiley.gif" alt="Smiley">
خودتان امتحان کنید »
در انتهای این صفحه، مثال های بیشتری آورده شده است.
تعریف و کاربرد
رویداد onmouseover هنگامی روی می دهد که نشانگر موس، بر روی یک عنصر یا فرزند آن، وارد شود.
نکته: این رویداد اغلب در کنار رویداد onmouseout استفاده می شود. رویداد مذکور هنگامی اتفاق می افتد که کاربر نشانگر موس را از یک عنصر خارج کند.
پشتیبانی مرورگرها
| Event | |||||
|---|---|---|---|---|---|
| onmouseover | بله | بله | بله | بله | بله |
نحوه استفاده
در HTML:
<element onmouseover="myScript">امتحان کنید
در جاوااسکریپت:
object.onmouseover=function(){myScript};امتحان کنید
استفاده از متد addEventListener()، در جاوااسکریپت:
object.addEventListener("mouseover", myScript);امتحان کنید
نکته: متد addEventListener()، در Internet Explorer 8 و ورژن های قدیمی تر آن پشتیبانی نمی شود.
جزئیات تکنیکی
| Bubbles: | بله |
|---|---|
| Cancelable: | بله |
| Event type: | MouseEvent |
| Supported HTML tags: | تمام عناصر html به جز: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, and <title> |
| DOM Version: | Level 2 Events |
مثال - خودتان امتحان کنید
مثال (رویداد onmouseover)
این مثال تفاوت بین سه رویداد onmousemove و onmouseenter و onmouseover را نشان می دهد.
<div onmousemove="myMoveFunction()">
<p id="demo">I will demonstrate onmousemove!</p>
</div>
<div onmouseenter="myEnterFunction()">
<p id="demo2">I will demonstrate onmouseenter!</p>
</div>
<div onmouseover="myOverFunction()">
<p id="demo3">I will demonstrate onmouseover!</p>
</div>
<p id="demo">I will demonstrate onmousemove!</p>
</div>
<div onmouseenter="myEnterFunction()">
<p id="demo2">I will demonstrate onmouseenter!</p>
</div>
<div onmouseover="myOverFunction()">
<p id="demo3">I will demonstrate onmouseover!</p>
</div>
خودتان امتحان کنید »
مرجع کلیه رویدادهای JavaScript
- نوشته شده توسط احسان عباسی
- بازدید: 10284
دیدگاه‌ها
سلام. من میخوام با جاوا اسکریپت زمانی که ماوس ، روی المنت قرار میگیره یک کلاس بهش اضافه بشه و زمانی که ماوس از روی اون کنار میره یک کلاس دیگه بهش اضافه بشه...
سلام
از متد toggle در جاوااسکریپت استفاده کنید:
function myFunction() {
var element = document.getEle mentById("myDIV ");
element.classList.toggle("mystyle");
}
عالی بود.
سلام. من اگه بخام وقتی ماوس روی عکسی قرار میگیره بدون اینکه کلیک کنم همون عکس نمایش داده بشه باید کد رو چطور بنویسم؟
سلام
www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onmouseover
سلام
میخاستم بپرسم ممکن هست که تو ایم موس اور ها برای عکس افکت گذاشت؟
که مثلا عکس رنگی باشه وقتی موس روش میره سیاه و سفید بشه؟
بله چنین امکانی وجود داره. شما می تونید ابتدا یه عکس رنگی در پس زمینه ی یک div قرار دهید و سپس با جاوااسکریپت، با استفاده از دستور onmouseover به هنگام over شدن عکس سیاه و سفید را تنظیم کنید.