HotSpot/codigo.js at master · simpsonito/HotSpot · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
/**
 * Created by adib on 13/09/14.
 */
window.addEventListener("load", ajustar, false);
window.addEventListener("resize", ajustar, false);
function ajustar(){
    //console.log("ajustado");
    var zonaSensible = document.getElementsByClassName("zonaSensible")[0];
    var imagen = document.getElementById("imagenFondo");
    var hoverable = zonaSensible.getElementsByClassName("hoverable")[0];
    var areas = zonaSensible.getElementsByClassName("showme");
    //console.log(hoverable.offsetWidth, zonaSensible.offsetWidth);
    if(hoverable.offsetWidth > zonaSensible.offsetWidth){
        var porcentaje = zonaSensible.offsetWidth / hoverable.offsetWidth;
        hoverable.style.cssText = "-webkit-transform: scale(" + porcentaje + ", " + porcentaje + ");" +
            "-moz-transform: scale(" + porcentaje + ", " + porcentaje + ");" +
            "-ms-transform: scale(" + porcentaje + ", " + porcentaje + ");" +
            "transform: scale(" + porcentaje + ", " + porcentaje + ");";
        var compensacion = 1/porcentaje;
        for(var i=0; i < areas.length; i++){
            areas[i].style.cssText = "-webkit-transform: scale(" + compensacion + ", " + compensacion + ");" +
                "-moz-transform: scale(" + compensacion + ", " + compensacion + ");" +
                "-ms-transform: scale(" + compensacion + ", " + compensacion + ");" +
                "transform: scale(" + compensacion + ", " + compensacion + ");";
        }
    } else {
        hoverable.style.cssText = "";
        for(var i=0; i < areas.length; i++){
            areas[i].style.cssText = "";
        }
    }
}

window.addEventListener("load", activarMenu, false);
function activarMenu(){
    //console.log("activando");
    var botones = document.getElementsByClassName("puntoSensible");
    var infos = document.getElementsByClassName("informacion");
    for(var i=0; i<botones.length; i++){
        botones[i].cajaInfo = infos[i];
        botones[i].addEventListener("mouseover", activarPunto, false);
        botones[i].addEventListener("mouseout", desactivarPunto, false);
    }
    function activarPunto(e){
        this.cajaInfo.style.display = "inline";
        console.log(this.cajaInfo.offsetWidth, this.cajaInfo.offsetHeight);
        this.cajaInfo.style.cssText = "display:inline; left: " + (this.offsetLeft-this.cajaInfo.offsetWidth/2)+"px; top: " + (this.offsetTop-this.cajaInfo.offsetHeight)+ "px;";
    }
    function desactivarPunto(e){
        this.cajaInfo.style.display = "none";
    }
    function is_touch_device() {
        return 'ontouchstart' in window;
    }
}
/*
*
 -moz-
 -ms-
 -webkit-transform: scale(0.8,0.8);
 -webkit-transform-origin: 0 0;
*
* */