Question
I want something to happen when the sound image is clicked,ive seen alot about this mouseresponse function but cant seem to get it working. Im brand new to this so my code may be a bit disgusting.
https://stackoverflow.com/questions/23146071
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian<html>
<head>
<title>Lunchtime Assasin</title>
<script type="application/javascript" language="javascript">
window.onload = draw;
var background = new Image();
background.src = "background.png";
var logo = new Image();
logo.src = "LOGO.png";
var play = new Image();
play.src = "play.png";
var sound = new Image();
sound.src = "sound.png";
var audio = new Audio('music.mp3');
function draw() {
var canvas = document.getElementById("canvas1");
var ctx = canvas.getContext("2d");
ctx.drawImage(background,0,0);
ctx.drawImage(logo,225,150);
ctx.drawImage(play,295,300);
ctx.drawImage(sound,650,5);
audio.play();
}
</script>
<style>
body,html{
margin:0px;
padding:0px;
}
</style>
</head>
<body>
<div align='center'>
<canvas id="canvas1" width="700" height="950"></canvas>
</div>
</body>
Solution
Create the sound image like so:
var sound = document.createElement('img');
sound.src = "sound.png";
Append this new image to the body (of wherever you want):
document.body.appendChild(sound);
Do something if the image is clicked:
sound.onclick = function(){
alert('it was clicked!');
}
See a working fiddle here: http://jsfiddle.net/y8th4/
OTHER TIPS
Play is the variable or new object you have defined before, so i think you are calling audio.Play(); function in the end where audio should have that function available to be called. may be you could search for how to add the methods to the objects and make play method available for audio to be called.
Maybe you can add an event listener to 'background', 'logo', 'play', 'sound' and 'audio'. if they have not been loaded, then can't be draw on canvas.
Since you are using canvas, things might be a bit more difficult. If you are familiar with how canvas works, it doesn't track the position of drawn objects, you have to separately. If you want the user to be able to to interact with the image, I'd recommend using some jQuery with something that might look like this:
$(element).attr('id', 'sound')
$(element).css('top',650 + 'px').css('left',5 + 'px');
$('#sound').append($element);
I'd also recommend adding an event listener to the object like so:
document.getElementById('sound').addEventListener('click', audio.play());
Ok, so you need to check if the cursor in the area of sound image, you need to add event listener and check if during the click it in the area...
Something like that:
// add after the draw function code
window.addEventListener('click', function (event) {
var cursor = {x: event.clientX, y: event.clientY},
canvas = document.getElementById("canvas1");
var cPos = {x: canvas.offsetLeft, y: canvas.offsetTop};
var rPos = {x: cursor.x - canvas.offsetLeft, y: cursor.y -canvas.offsetTop};
if (rPos.x > 295 && rPos.y > 300 &&
rPos.x < 295 + sound.clientWidth && rPos.y < 300 + sound.clientHeight) {
audio.pause();
}
});
Please Refer to this for the detail understanding of event Listening
https://developer.mozilla.org/en-US/docs/Web/API/EventTarget.addEventListener
This is great!
