Bu gönderi, JavaScript'te fareyle üzerine gelindiğinde görüntüyü değiştirme prosedürünü gösterecek.
JavaScript'te Fareyle Üzerine Gelince Bir Görüntü Nasıl Değiştirilir?
Fareyle üzerine gelindiğinde görüntüyü değiştirmek için “ fareyle üzerine gelindiğinde ' Etkinlik. Fare/imleç bir HTML öğesinde veya alt öğelerinden birinde hareket ettirildiğinde, onmouseover olayı tetiklenir.
Örnek 1: JavaScript'te Fareyle Üzerine Geldiğinizde Görüntüyü Değiştirin
Bir HTML dosyasında, resmi bir web sayfasında göstermek için etiketini kullanın. “ fareyle üzerine gelindiğinde ” fare resmin üzerine geldiğinde JavaScript işlevini çağıracak olay:
< görüntü kimliği = 'menuImg' kaynak = '1.jpg' fareyle üzerine gelindiğinde = '(bunun üzerine gelin);' />
Bir JavaScript dosyasında, bir işlev tanımlayın ' üzerine gelin ” parametresi ile “ img ”. Tanımlanan işlevde, fareyle üzerine gelindiğinde gösterilecek görüntüyü ayarlayın:
işlev üzerine gelin ( img )
{
img. kaynak = '2.jpg'
}
Gördüğünüz gibi, çıktıda mevcut görüntünün üzerine geldiğimizde aniden değişiyor:
Örnek 2: Vurgulu Görüntüyü Değiştir
Yukarıdaki örnekte, fare görüntünün üzerine getirildiğinde görüntü değişir ve aynı görüntü kalır. Şimdi, bu örnekte, fare görüntünün dışına çıktığında ilk görüntü yeniden görünecektir. Bu etkiye geçiş efekti denir. Bu amaçla kullanacağımız “ fareyle üzerine gelindiğinde ' ve ' onmouseout ”HTML özellikleri:
< görüntü kimliği = 'menuImg' kaynak = '1.jpg' fareyle üzerine gelindiğinde = '(bunun üzerine gelin);' onmouseout = 'hoverOut(bu)' />
“ fareyle üzerine gelindiğinde ”, “ vurgulu() ” işlevi sırasında, “ onmouseout 'olay, işlevi çağırır' hoverOut() ”:
işlev hoverOut ( img ) {img. kaynak = '1.jpg'
}
Çıktı, fare görüntünün üzerindeyken görüntünün başarıyla değiştirildiğini ve fare görüntünün dışına çıkarken değiştirildiğini gösterir:
Bu, fareyle üzerine gelindiğinde değişen görüntüyle ilgiliydi.
Çözüm
Fareyle üzerine gelindiğinde görüntüyü değiştirmek için “ fareyle üzerine gelindiğinde ' Etkinlik. Geçiş efekti için “ fareyle üzerine gelindiğinde ” özelliği ile “ onmouseout ' Etkinlik. Fare/imleç bir öğe veya onun çocuklarından biri üzerinde hareket ettirildiğinde onmouseover olayı tetiklenirken, fare/işaretçi bir öğenin dışına taşındığında onmouseout olayı gerçekleşir. Bu gönderide, JavaScript'te fareyle üzerine gelindiğinde görüntüyü değiştirme prosedürünü gösterdik.