Показать сообщение отдельно
  #19 (permalink)  
Старый 24.04.2013, 09:27
Профессор
Отправить личное сообщение для tsigel Посмотреть профиль Найти все сообщения от tsigel
 
Регистрация: 12.12.2012
Сообщений: 1,398

<body> 
        <div style="border: 1px solid gray; position: absolute; left: 0; top: 0; width: 402; height: 402;" onmousemove="x = event.x; y = event.y" onmouseout="x = y = 0"> 
            <script> 
                var n = 5;
                var x = 0, y = 0;
                var r = new Array(100, 100, 100, 100, 100);
                
                for (var i = 0; i < n; i++) document.writeln("<img id = div" + i + " style = 'border: 0px; position: absolute; left: 100; top: 100; width: 200; height: 200;' src = " + i + "_" + n + ".png>");
                
                window.setInterval("tick()", 10);
                
                function tick() {
                    var i = (Math.ceil(Math.atan2(x - 200, y - 200) / Math.PI / 2 * n) + n) % n;
                    var s = Math.sqrt((x - 200) * (x - 200) + (y - 200) * (y - 200));
                    if (s < r[i])
                        setRad(i, Math.min(r[i] + 3, 200));
                }
                
                function reset() {
                    for (var i = 0; i < n; i++)
                        setRad(i, 100)
                }
                
                function setRad(i, rad) {
                    r[i] = rad;
                    with (document.getElementById("div" + i).style) {
                        left = top = 200 - r[i];
                        width = height = 2 * r[i];
                    }
                }
            </script><img id="div0" style="border: 0px; position: absolute; left: 100px; top: 100px; width: 200px; height: 200px;" src="0_5.png">
<img id="div1" style="border: 0px; position: absolute; left: 199px; top: 0px; width: 200px; height: 200px;" src="http://tsigelization.narod.ru/temp/1_5.png">
<img id="div2" style="border: 0px; position: absolute; left: 1px; top: 0px; width: 200px; height: 200px;" src="http://tsigelization.narod.ru/temp/2_5.png">
<img id="div3" style="border: 0px; position: absolute; left: 197px; top: 199px; width: 200px; height: 200px;" src="http://tsigelization.narod.ru/temp/3_5.png">
<img id="div4" style="border: 0px; position: absolute; left: -1px; top: 200px; width: 200px; height: 200px;" src="http://tsigelization.narod.ru/temp/4_5.png">
 
        </div> 
        <input type="button" onclick="reset()" value="Reset" style="position: absolute; left: 10; top: 410"> 
     
</body>


Оформляйте свои задачи так. Никому не охота лазить в ваши архивы. Расставить картинки чтобы получился круг можно с помощью css. Дальше все зависит от того на сколько точно вам нужно выполнить наведение. Если вас устраивает погрешность при наведении (я имею в виду ту область тега img где нет картинки, а просто фон), то можно сделать 4 функции с hover. Или 2 функции.
Ответить с цитированием