資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何在 JavaScript 中使用滑鼠事件顯示影像懸停效果？
本教程將教會我們如何在 JavaScript 中使用滑鼠事件顯示影像懸停效果。影像懸停是指當用戶將滑鼠懸停在影像上時，更改影像樣式或整個影像。
為了構建吸引人的使用者介面，開發人員經常會在網站和應用程式中新增影像懸停功能。在這裡，我們將瞭解如何以不同的方式應用影像懸停。
滑鼠懸停時更改影像樣式
在這種方法中，為了建立影像懸停效果，我們將使用 JavaScript 的onmouseover 和onmouseout 事件。當用戶將滑鼠指標移到影像上時，它將更改影像的樣式，而當用戶將滑鼠指標移出影像時，將對影像應用預設樣式。
語法
使用者可以按照以下語法在懸停時更改影像樣式。
使用 JavaScript onmouseover 和 onmouseout 事件
object.onmouseover = function(){myScript};
object.onmouseout = function(){myScript};使用 addEventListener() 方法
object.addEventListener("mouseover", myScript);
object.addEventListener("mouseout", myScript);演算法
步驟 1 - 透過 ID 訪問影像元素。
let deomImage = document.getElementById("demo");步驟 2 - 將 onmouseover 事件分配給影像元素 deomImage。
deomImage.onmouseover = function() {
document.demo.style = "height:200px;width:200px";
});步驟 3 - 將 onmouseout 事件分配給影像元素 deomImage。
deomImage.onmouseout = function() {
document.demo.style = "height:100px;width:100px;"
});事件
onmouseover - 每當使用者將滑鼠懸停在影像元素上時，都會呼叫此事件。
onmouseout - 當用戶將滑鼠指標移出影像時，將觸發此事件。
示例
使用 JavaScript onmouseover 和 onmouseout 事件
在以下示例中，我們建立了影像元素併為影像提供了預設寬度和高度。我們向影像元素添加了“onmouseover”事件，以便在使用者將滑鼠懸停到影像上時應用不同的樣式。此外，當用戶將游標指標移出影像元素時，我們應用了“onmouseout”事件以應用預設樣式。
<!DOCTYPE html>
<html>
<body>
<h2> Image rollover with mouse event. </h2>
<h4> Rollover on the below image to change the styles of the image. </h4>
<img src="https://tutorialspoint.tw/python_pillow/images/tutorials_point.jpg" style="height:100px;width:100px;" id="demo" name="demo" alt="demo Image">
<script>
let deomImage = document.getElementById("demo");
deomImage.onmouseover = function() {deomImage.style = "height:200px; width:200px";};
deomImage.onmouseout = function() {deomImage.style = "height:100px; width:100px";};
</script>
</body>
</html>當您將滑鼠懸停在影像上時，影像的尺寸會增大，而當用戶將滑鼠指標移出影像時，影像的尺寸會減小。
示例
使用 addEventListener() 方法
以下示例演示瞭如何使用 addEventListener() 方法顯示影像懸停效果。此示例顯示與上述示例中相同的視覺效果。
<html>
<head>
<title> Show image rollover with mouse event. </title>
</head>
<body>
<h2> Showing image rollover with mouse event. </h2>
<h4> Rollover on the below image to change the styles of the image. </h4>
<img src="https://tutorialspoint.tw/python_pillow/images/tutorials_point.jpg" style="height:100px;width:100px;"
id="demo" name="demo" alt="demo Image">
<script>
let deomImage = document.getElementById("demo");
deomImage.addEventListener( "mouseover", function () {
document.demo.style = "height:200px; width:200px";
});
deomImage.addEventListener( "mouseout", function () {
document.demo.style = "height:100px; width:100px;"
})
</script>
</body>
</html>在以上輸出中，使用者可以看到，當他們將滑鼠懸停在影像上時，影像的尺寸會增大，而當用戶將滑鼠指標移出影像時，影像的尺寸會減小。
滑鼠懸停時更改影像
在以上方法中，我們只是在使用者將滑鼠懸停在影像上時更改了影像樣式。在本節中，我們將學習如何在使用者將滑鼠指標移到影像上時更改影像，並在使用者將滑鼠指標移出影像時將其設定為預設影像。
演算法
步驟 1 - 透過 ID 訪問影像。
步驟 2 - 使用 addEventListener() 方法將 "mouseover" 事件附加到影像元素。
步驟 3 - 使用 addEventListener() 方法將 "mouseout" 事件附加到影像元素。
示例
在以下示例中，我們將更改影像的“src”屬性的值，以在滑鼠懸停時替換影像。我們使用了上述 mouseover 和 mouseout 事件來實現我們的目標。
<html>
<head>
<title> Show image rollover with mouse event . </title>
</head>
<body>
<h2> Show image rollover with mouse event. </h2>
<h4> Rollover on the below image to change the image. </h4>
<img src="https://tutorialspoint.tw/python_pillow/images/tutorials_point.jpg" style="height:100px;width:100px;"
id="demo" name="demo" alt="demo Image">
<script>
let deomImage = document.getElementById("demo");
deomImage.addEventListener( "mouseover", function () {
document.demo.src = "https://tutorialspoint.tw/static/images/logo-footer-b.png";
});
deomImage.addEventListener( "mouseout", function () {
document.demo.src = "https://tutorialspoint.tw/python_pillow/images/tutorials_point.jpg"
});
</script>
</body>
</html>在以上輸出中，當用戶將滑鼠懸停在影像上時，影像將被更改。
對多個影像應用懸停事件
在本節中，我們將建立一個具有兩個引數的自定義函式。一個是影像 ID，另一個是影像 src，當事件觸發時，我們希望用它替換當前影像源。當滑鼠懸停和滑鼠移出事件觸發時，我們將呼叫一個函式，並將影像 ID 和新的影像源 URL 作為引數傳遞。
示例
這樣，使用者可以透過編寫更少的程式碼行來對多個影像應用影像懸停效果。
<html>
<head>
<title> Show image rollover with mouse events. </title>
</head>
<body>
<h2> Show image rollover with mouse event. </h2>
<h4> Rollover on any image change the default image. </h4>
<img src="https://tutorialspoint.tw/python_pillow/images/tutorials_point.jpg"
OnMouseOver="mouseRollover('demo1','https://tutorialspoint.tw/static/images/logo-footer-b.png')"
OnMouseOut="mouseRollover('demo1','https://tutorialspoint.tw/python_pillow/images/tutorials_point.jpg')"
style="height:100px;width:100px;" id="demo1" alt="demo Image">
<img src="https://tutorialspoint.tw/python_pillow/images/tutorials_point.jpg"
OnMouseOver = "mouseRollover('demo2','https://tutorialspoint.tw/static/images/logo-footer-b.png')"
OnMouseOut = "mouseRollover('demo2','https://tutorialspoint.tw/python_pillow/images/tutorials_point.jpg')"
style="height:100px; width:100px;" id="demo2" alt="demo Image">
<script>
function mouseRollover( imageId, imageSrc ) {
let image = document.getElementById( imageId );
image.src = imageSrc;
}
</script>
</body>
</html>結論
在本教程中，我們瞭解了使用滑鼠事件實現影像懸停的不同方法。第一種方法是基本方法，其中我們只更改了影像的樣式。第二種方法僅在我們需要對單個影像應用滑鼠懸停時使用。當用戶需要對多個影像應用滑鼠懸停時，建議使用第三種方法。
8K+ 瀏覽量
