Topic: Image Went missing when mouseover to image

Hi,

I have a problem when my mouse point to specific element on image, my image is gone. It happened on IE 8. When I tried on Firefox, Safari and other browser, it is working ok.

Could you guy help me to find out what went wrong?

See bellow for the code.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[url]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/url]">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />

  <script src="http://plutoville.staging.elevatedrails.com/javascripts/prototype.js" type="text/javascript"></script>  
</head>

<body>

<div>
  <div><img alt="World" id="question_image" src="http://plutoville.staging.elevatedrails.com/question_images/0000/1278/World.gif" usemap="#question_map" /></div>
  <map id="question_map" name="question_map"><area shape="rect" alt="Indonesia" title="Indonesia" coords="262,104,364,127" onmouseout="mouseOutOfShape(0);" onmouseover="mouseOverShape(0);" onclick="clickShape(0);" href="javascript:registerClick();" target="_self" /><area shape="rect" alt="Canada" title="Canada" coords="36,15,99,44" onmouseout="mouseOutOfShape(1);" onmouseover="mouseOverShape(1);" onclick="clickShape(1);" href="javascript:registerClick();" target="_self" /></map>
</div>

<script src="http://plutoville.staging.elevatedrails.com/javascripts/drawing.js" type="text/javascript"></script>

<!--[if gte IE 8]>
  <script src="http://plutoville.staging.elevatedrails.com/javascripts/excanvas.js" type="text/javascript"></script>
<![endif]-->

<script type="text/javascript">
  
  question_image_1 = $('question_image');  
  shapes = new Array();
  border_shapes = new Array();
  selected_shape_index = null;
  border_style = {stroke:"rgb(255,128,0)", fill:"rgba(255,128,0,0.0)"};
  neutral_style = {stroke:"rgb(255,128,0)", fill:"rgba(255,128,0,0.2)"};
  
  shapes.push(new StyledShape(neutral_style, new Rectangle(262,104,364,127)));
  border_shapes.push(new StyledShape(border_style, new Rectangle(262,104,364,127)));
  
  shapes.push(new StyledShape(neutral_style, new Rectangle(36,15,99,44)));
  border_shapes.push(new StyledShape(border_style, new Rectangle(36,15,99,44)));
  
  draw = function() {
    question_image_1.onload = function() {
      if(!this.complete) {return;}
      drawing_context = drawingContextOfImage(this);
      drawBorders(drawing_context);
    }
    question_image_1.onload();
  }
    
  clickShape = function(index) {
    selected_shape_index = index;
    $('answer_map_area_index').value = index;
    drawing_context = drawingContextOfImage(question_image_1);
    drawBorders(drawing_context);
  }
  
  drawBorders = function(drawing_context) {
    border_shapes.each(function(shape, index) {
      shape.draw(drawing_context)
    });
    if(selected_shape_index != null) {
      shapes[selected_shape_index].draw(drawing_context);
    }
  }
  
  mouseOverShape = function(index) {
    drawing_context = drawingContextOfImage(question_image_1);
    drawBorders(drawing_context);
    if(selected_shape_index != index) {
      shapes[index].draw(drawing_context);
    }
  }

  mouseOutOfShape = function(index) {
    drawing_context = drawingContextOfImage(question_image_1);
    drawBorders(drawing_context);
  }

  draw();
</script>

</body>
</html>

Last edited by yudi.soesanto (2010-11-26 09:31:09)