tornar a região clicável na tela para alterar a imagem
Por favor me ajude:
crie regiões clicáveis na tela abaixo que eu possa atribuir onmousedown = events to. Eu sei como fazer isso com DIVs invisíveis, mas acho que há uma maneira mais elegante de fazer isso em telas que eu não conheço.
quando clico em uma das regiões, quero passar um nome de imagem para uma função para que ela altere a imagem que está sendo exibida para outra imagem e, em seguida, altere-a de volta no processo.
se você me mostrar apenas uma região e um exemplo de mousedown / mouseup eu posso fazer o resto ... obrigado.
<!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>