mache einen anklickbaren Bereich in der Leinwand, um das Bild zu ändern
Bitte hilf mir:
Erstellen Sie anklickbare Bereiche in der Zeichenfläche darunter, denen ich onmousedown = -Ereignisse zuweisen kann. Ich weiß, wie man das mit unsichtbaren Divs macht, aber ich denke, es gibt eine elegantere Art, es auf Leinwand zu machen, die ich nicht kenne.
Wenn ich auf einen der Bereiche klicke, möchte ich einen Bildnamen an eine Funktion übergeben, damit das angezeigte Bild in ein anderes Bild geändert wird.
wenn du mir nur eine region und ein mousedown / mouseup beispiel zeigst, kann ich den rest erledigen ... danke.
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<canvas id="myCanvas" width="506" height="319" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=new Image();
img.onload = function(){
ctx.drawImage(img,0,0);
};
img.src="firstImage.gif";
</script>
/////////HERE NEED/////////
CREATE CLICKABLE REGION <region>
<region>
onmousedown=changeCanvasImage(secondImage.gif) //change image on click
onmouseup=changeCanvasImage(firstImage.gif) /change it back when done
</region>
</body>
</html>