Question

I am currently working on a project that similar to http://www.beoplay.com/Products/BeoplayA9#under-the-hood using Javascript, HTML5 and CSS3. I manage to create the slider effect and adding the plus button to the multi layers of canvas (4 layers: the bottom image, the top image, the text display and the arrow slider). My problem is the mouse over for the plus button and displaying the text layer. I need to access the bottom layer to access the plus sign. How can I accomplish this? I am completely new at 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 init 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 displayInfo 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")}

The image size is fixed to 1024px by 768 px.

Answer 1

You can achieve that by tracking the position of your mouse with respect to the entire page:

var mouseX = 0;
var mouseY = 0;

$('body').mousemove(function(e) {
  mouseX = e.pageX;
  mouseY = e.pageY;
}

And comparing that to the position of your buttons by, first, determining where the arrows are:

var whereIsMyArrow = $('#arrow').offset();

And then conditioning a behavior when the mouse is on top of the arrow:

if ((mouseX>=whereIsMyArrow.left)&&<br>(mouseX<=(whereIsMyArrow.left+$('#arrow').width())&&
   (mouseY>=whereIsMyArrow.top)&&<br>(mouseY<=(whereIsMyArrow.top+$('#arrow').height())){
   //do something
}

Make sure that the conditional is inside the .mousemove(e) event.