Показать сообщение отдельно
  #8 (permalink)  
Старый 20.07.2017, 10:50
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

DjFuntik,
<!DOCTYPE html>

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <style>
  IMG{
    border-width:0px;
    margin:3px;
    align:center;
  }

  .tool_tip{
    border-right:1px solid;
    border-top:1px solid;
    visibility:hidden;
    font:900 15px tahoma;
    border-left:2px solid;
    border-bottom:2px solid;
    letter-spacing:2px;
    position:absolute;
  }
  </style>
  <script>

ToolTip.offsetX = -(10 + 400 + 10);
ToolTip.offsetY = 17;

var arrT = [], arrImg = [];

function ToolTip(obj, text) {
    if (!obj || obj.nodeType != 1) throw "Illigal argument exception";
    var tip = document.createElement("DIV");
    arrT.push(tip);
    tip.className = "tool_tip";
    tip.innerHTML = "<CENTER><FONT size=+3>" + text + "</FONT><BR><IMG height=400 width=400 src='" + text + ".jpg'><IMG height=400 width=400 src='" + text + ".jpg'></CENTER>";
    tip.style.top = 10;
    tip.style.left = 10;
    document.body.appendChild(tip);
    obj.onmouseout = function(ev) {
        tip.style.visibility = "hidden"
    };
    obj.onmousemove = function(ev) {
        tip.style.visibility = "visible";
        if (window.event) ev = window.event;
        if (ev.clientX + 20 + tip.offsetWidth + 18 > document.body.clientWidth) ToolTip.offsetX = -tip.offsetWidth - 20;
        else ToolTip.offsetX = 20;
        if (ev.clientY + 10 + tip.offsetHeight + 0 > document.body.clientHeight) ToolTip.offsetY = -tip.offsetHeight - 10;
        else ToolTip.offsetY = 10;
        tip.style.left = ev.clientX + document.body.scrollLeft + ToolTip.offsetX;
        tip.style.top = ev.clientY + document.body.scrollTop + ToolTip.offsetY
    }
}
var colon = new Array;

function proc(js) {
    for (var i = 0; i < arrT.length; i++) {
        arrT[i].parentNode.removeChild(arrT[i]);
        arrImg[i].parentNode.removeChild(arrImg[i])
    }
    arrT = [], arrImg = [];
    switch (js) {
        case "62":
            colon = ["66","А","Б","В","Г","Д"];
            break;
        case "96":
            colon = ["98","Д","Б","В","Г","А"];
            break;
        case "01":
            colon = ["04","А","Г","В","Б","Д"];
            break
    }
    
    for (var i = 1; i < colon.length; i++) {
        var img = document.createElement("img");
        arrImg.push(img);
        img.src = colon[i];
        ts.appendChild(img);
        ToolTip(img, colon[i])
    }
};
  </script>

  <title></title>
</head>

<body>
  <img src='screens1.jpg' onclick="proc('62')">
  <img src='screens2.jpg' onclick="proc('96')">
  <img src='screens3.jpg' onclick="proc('01')">

  <div id='ts'></div><script>proc('62')</script>
</body>
</html>
Ответить с цитированием