MouseOver在畫布中的多個圖像中
[英]MouseOver in multiple images in canvas
問題描述
當我在畫布中有多個圖像時，mouseOver事件有一個小問題。 我做了一個簡單的示例，其中包含2張圖像，這些圖像在鼠標結束時會發生變化。 但是我只希望更改一個圖像，更確切地說是將鼠標完全移到上面的圖像。 有人能幫助我嗎？ 謝謝：
這是我寫的基本代碼：
<html>
<head>
<script>
var images = [{
a : 'http://images1.wikia.nocookie.net/masseffect/images/thumb/1/18/Morinth002.png/613px-Morinth002.png',
b : 'http://images.wikia.com/masseffect/images/5/55/Samara_biotics.png'
}, {
a : 'http://i.imgur.com/bxopz.jpg',
b : 'http://1.bp.blogspot.com/-rLy6D22E_MA/TxGhdN4tQOI/AAAAAAAABDY/5daaYdNkLOc/s1600/yvonne4.jpg'
}]
//----------------------------------
// setImageOne
//----------------------------------
/**
* Coloca as imagens iniciais no canvas.
*/
function setImageOne() {
var canvas = document.getElementById('myCanvas').getContext('2d');
var image = new Image();
image.src = images[0].a;
var image1 = new Image();
image1.src = images[1].a;
image.onload = function() {
canvas.drawImage(image, 0, 0, 300, 250);
canvas.drawImage(image1, 300, 0, 300, 250);
};
}
//----------------------------------
// setImageTwo
//----------------------------------
/**
* Coloca as imagens finais no canvas.
*/
function setImageTwo() {
var canvas = document.getElementById('myCanvas').getContext('2d');
var image = new Image();
image.src = images[0].b;
var image1 = new Image();
image1.src = images[1].b;
image.onload = function() {
canvas.drawImage(image, 0, 0, 300, 250);
canvas.drawImage(image1, 300, 0, 300, 250);
};
}
</script>
</head>
<body onload="setImageOne" onmousedown="return false;">
<canvas id="myCanvas" width="600" height="250" onmouseover="setImageTwo()" onmouseout="setImageOne()"></canvas>
</body>
1 個解決方案
解決方案1
0 已采納 2012-03-09 23:12:49
大愛露 求職信，請與我們聯系，並告訴我們：“您可以在Facebook上找到自己的名字，或在Facebook上找到您的名字，或將其發送給我們。：pegaro val ores depois eu posto aqui：
<head>
<script>
var images = [{
a : 'http://images1.wikia.nocookie.net/masseffect/images/thumb/1/18/Morinth002.png/613px-Morinth002.png',
b : 'http://images.wikia.com/masseffect/images/5/55/Samara_biotics.png'
}, {
a : 'http://i.imgur.com/bxopz.jpg',
b : 'http://1.bp.blogspot.com/-rLy6D22E_MA/TxGhdN4tQOI/AAAAAAAABDY/5daaYdNkLOc/s1600/yvonne4.jpg'
}]
//----------------------------------
// setImageOne
//----------------------------------
/**
* Coloca as imagens iniciais no canvas.
*/
function setImageOne() {
var canvas = document.getElementById('myCanvas').getContext('2d');
var image = new Image();
image.src = images[0].a;
var image1 = new Image();
image1.src = images[1].a;
image.onload = function() {
canvas.drawImage(image, 0, 0, 300, 250);
canvas.drawImage(image1, 300, 0, 300, 250);
};
}
//----------------------------------
// setImageTwo
//----------------------------------
/**
* Coloca as imagens finais no canvas.
*/
function setImageTwo(x) {
var canvas = document.getElementById('myCanvas').getContext('2d');
var image = new Image();
image.src = images[0].b;
var image1 = new Image();
image1.src = images[1].b;
if(x<301){
canvas.drawImage(image, 0, 0, 300, 250);
var image1 = new Image();
image1.src = images[1].a;
canvas.drawImage(image1, 300, 0, 300, 250);
}else{
var image = new Image();
image.src = images[0].a;
canvas.drawImage(image, 0, 0, 300, 250);
canvas.drawImage(image1, 300, 0, 300, 250);
}
}
</script>
</head>
<body onload="setImageOne" onmousedown="return false;">
<canvas id="myCanvas" width="600" height="250" onmousemove="setImageTwo(event.pageX)" onmouseout="setImageOne()"></canvas>
</body>`
Tkinter畫布中的多個圖像
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.