I am currently working on a project similar to http://www.beoplay.com/Products/BeoplayA9#under-the-hood using Javascript, HTML5 and CSS3. I managed to create a slider effect and add a plus button to several layers of the canvas (4 layers: lower image, upper image, text display and arrow slider). My problem is the mouse for the plus button and displaying the text layer. I need to access the bottom layer to access the plus sign. How can i do this? I am brand new in Javascript and HTML5.
HTML code:
<div id="container"> <div id="arrow_container" ondrop="drop(event)" ondragover="allowDrop(event)"> <div id="arrow_button" draggable="true" ondragstart="drag(event)"></div> </div> <span class="text_box"></span> <canvas id="top_canvas" onmouseover="displayInfo(event)"><img id="img_top" src="images/Technical_ONE_front.jpg" alt="device" /></canvas> <canvas id="plus_canvas"><img id="img_plus" src="images/Plus.png" alt="plus" /></canvas> <img id="img_bottom" src="images/Technical_ONE_back.jpg" alt="skeleton" /> </div>
Javascript initialization code:
$("#arrow_button").css({"position":"relative", "top":"730px", "left":"497px"}); $("#top_canvas").css({"top":"5px"}); var canvas = document.getElementById( "top_canvas" ); var plus_canvas = document.getElementById( "plus_canvas" ); var ctx = canvas.getContext( "2d" ); var plus_ctx = plus_canvas.getContext( "2d" ); var top_img = document.getElementById( "img_top" ); var bottom_img = document.getElementById( "img_bottom" ); var plus_img = document.getElementById( "img_plus" ); canvas.width = plus_canvas.width = top_img.width; canvas.height = plus_canvas.height = top_img.height; ctx.fillStyle = "#FFFFFF"; plus_ctx.fillStyle = "#FFFFFF"; ctx.fillRect( canvas.width / 2, 0, canvas.width, canvas.height ); plus_ctx.fillRect( 0, 0, plus_canvas.width, plus_canvas.height ); ctx.beginPath(); ctx.moveTo(canvas.width / 2, 0); ctx.lineTo(canvas.width / 2, canvas.height); ctx.lineTo(canvas.width, canvas.height); ctx.lineTo(canvas.width, 0); plus_ctx.beginPath(); plus_ctx.moveTo(0, 0); plus_ctx.lineTo(0, plus_canvas.height); plus_ctx.lineTo(plus_canvas.width, plus_canvas.height); plus_ctx.lineTo(plus_canvas.width, 0); ctx.clip(); ctx.drawImage( top_img, 0, 0 ); plus_ctx.drawImage( bottom_img, 0, 0 ); for( var i = 0; i < 3; i++ ){ if( i == 0 ){ plus_ctx.drawImage( plus_img, 511, 344 ); } else if( i == 1 ){ plus_ctx.drawImage( plus_img, 360, 348 ); } else if( i == 2 ){ plus_ctx.drawImage( plus_img, 501, 621 ); } }
Javascript display code:
var highlight_one = new Image(); var highlight_two = new Image(); var highlight_sound = new Image(); highlight_one.src = "../images/Highlight_one_over.png"; highlight_two.src = "../images/Highlight_two_over.png"; highlight_sound.src = "../images/Highlight_sound_over.png"; init(); if( e.clientX >= 511 && e.clientX <= 526 && e.clientY >= 344 && e.clientY <= 359 ){ plus_ctx.drawImage( highlight_one, 0, 0 ); html = "<p>Blah Blah Blah</p>"; } else if( e.clientX >= 360 && e.clientX <= 375 && e.clientY >= 348 && e.clientY <= 363 ) { plus_ctx.drawImage( highlight_sound, 0, 0 ); html = "<p>La Di Da</p>"; } else if( e.clientX >= 501 && e.clientX <= 516 && e.clientY >= 621 && e.clientY <= 336 ) { plus_ctx.drawImage( highlight_two, 0, 0 ); html = "<p>Lorem Ipsum</p>"; } $('.text_box').html(html);
CSS code:
* {margin:0} #container{width:1024px; height:768px; position:relative} #img_top, #top_canvas{position:absolute; z-index:3} #img_plus, #plus_canvas{position:absolute; z-index:1} #img_bottom, #img_top{width:1024px; height:768px} .text_box{top:0; left:0; width:1024px; height:768px; padding:20px; position:absolute; z-index:2} #arrow_container{position:absolute; width:1024px; height:768px; top:0; z-index:4} #arrow_button{width:30px; height:30px; background-image:url("../images/arrows.png")}
Image size is fixed up to 1024 pixels by 768 pixels.