2los4u Posted August 20, 2016 Share Posted August 20, 2016 Hi everyone.- I have downloaded a example of a HTML5 canvas menu, it works ok, but, the buttons have a alert message and i want to change that so that each button could open a new web page, the problem i find is that i dont know how to create a id for each button at code i know that with html you can acheve this but i need it to be with code, can someone please help me, heres also the code, thanks source.zip Link to comment Share on other sites More sharing options...
davej Posted August 20, 2016 Share Posted August 20, 2016 Go to line 184 of fire_menu.js and add something like this... //alert(buttons[i].text + ' was pushed'); switch (i){ case 0: location.assign('page1.html'); break; case 1: location.assign('page2.html'); break; case 2: location.assign('page3.html'); break; case 3: location.assign('page4.html'); break; default: alert('[' + buttons[i].text + ' unknown]'); break; } --updated 8/23-- Link to comment Share on other sites More sharing options...
dsonesuk Posted August 20, 2016 Share Posted August 20, 2016 Why not use what's already available add extra parameter 'url' // Button object function Button(x, y, w, h, state, image, text, url) { this.x = x; this.y = y; this.w = w; this.h = h; this.state = state; this.imageShift = 0; this.image = image; this.text = text; this.url = url;} // Prepare 3 different buttons buttons.push(new Button(0, 10, 245, 62, 'normal', buttonImage, 'button #1', 'page1.html')); buttons.push(new Button(250, 10, 245, 62, 'normal', buttonImage, 'button #2', 'page2.html')); buttons.push(new Button(500, 10, 245, 62, 'normal', buttonImage, 'button #3', 'page3.html')); buttons.push(new Button(750, 10, 245, 62, 'normal', buttonImage, 'button #4', 'page4.html')); // Onmouseup event handler canvas.onmouseup = function(e) { var mouse = getMousePosition(e).sub(new vector2d(canvas.offsetLeft, canvas.offsetTop)); for (var i = 0; i < buttons.length; i++) { // Reset states for buttons if (mouse.x > buttons.x && mouse.x < buttons.x + buttons.w && mouse.y > buttons.y && mouse.y < buttons.y + buttons.h) { //alert(buttons.text + ' is pushed'); location.assign(buttons.url); } buttons.state = 'normal'; buttons.imageShift = 0; } }} Link to comment Share on other sites More sharing options...
2los4u Posted August 22, 2016 Author Share Posted August 22, 2016 Thanks.- Very good advice of both, i hope this would help others too, i have acomplished this with a if (i==0) and then using the for loop but your code is more well written thanks very much Link to comment Share on other sites More sharing options...
2los4u Posted August 22, 2016 Author Share Posted August 22, 2016 Yes it works with both suggestions, but when you click on a button it doesnt change the web page imediatley, i could also achive it but the performance or whatever you call it is bad.. anyway thanks !!!! Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now