0

I have this crazy problem, we are migrating to Bootstrap

My java script code create 2 canvas over an image and insert into div; mouse over(blue) and click (red) draws on canvas.

Some code:

<div id="map_container">
<canvas id="myCanvas2" style="z-index: 301; left: 0px; top: 1079px;" width="960px" height="560px"></canvas>
<img id="map_img" src="img/PlantaBaja.svg" alt="Edificio Nuevo Planta Baja" usemap="#blueprint_map" style="width: 960px; height: 560px; z-index: 1; position: relative;">
<map id="blueprint_map" name="blueprint_map">...</map>
<canvas id="myCanvas" style="z-index: 302; left: 0px; top: 1079px;" width="960px" height="560px"></canvas>
</div>

They have the same position, but its not working.

No Bootstrap: No Bootstrap

Bootstrap: Bootstrap

Seems to load right, them change after a second.

Community
  • 1
  • 1
Aaron Castillo Alpizar
  • 14
  • 4

1 Answers1

0

Finally I make my code work. I use a div like a wrapper, set the position on relative and width in 100% on css class, and also style="height: ###px"; code will replacer ### with img heigth. Also set the style position absolute to map_container div finally all the content has top 0 left 0 y position absolute and z-index I need to put map image over but not visible to get the job done.

<div id="canvas-wrapper" class="canvas-wrapper" style="height: 560px;">
    <div id="map_container" style="position: absolute;">
        <img src="img/PlantaBaja.svg" id="map_img" alt="Edificio Nuevo Planta Baja" usemap="#blueprint_map" style="z-index: 303; position: absolute; opacity: 0; filter: alpha(opacity=0)">
        <canvas id="myCanvas2" style="position: absolute; z-index: 301; left: 0px; top: 0px;" width="960px" height="560px"></canvas>
        <canvas id="myCanvas" style="position: absolute; z-index: 302; left: 0px; top: 0px;" width="960px" height="560px"></canvas>
        <img src="img/PlantaBaja.svg" id="map_img" alt="Edificio Nuevo Planta Baja">
        <map id="blueprint_map" name="blueprint_map">
            <area id="area1" shape="rect" onmouseover="myHover(this);" onmouseout="myLeave();" coords="25,127,75,202" alt="Baño de hombres" title="Baño de hombres" onclick="setLocation(1);">
            ...
        </map>
    </div>
</div>

JS

var div = byId('canvas-wrapper');

var x, y, w, h;

// get it's position and width+height
x = 0; //img.offsetLeft;
y = 0; //img.offsetTop;
w = img.clientWidth;
h = img.clientHeight;
div.setAttribute('style', 'height: ' + h + 'px;');

Conclusion: if you need use z-index on bootstrap you will need define relative wrapper with absolute elements.

Aaron Castillo Alpizar
  • 14
  • 4