10 апреля, 2014 
Alexjc Появилась задача сделать всплывающую подсказку при наведении на рисунок путём появления у курсора скрытого div кода.
Пишем скрипт определения координат мыши.
|
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 |
<script language="JavaScript"> <!-- // Пишем функцию, определяющую координаты function defPosition(event) { var x = y = 0; if (document.attachEvent != null) { // Internet Explorer & Opera x = window.event.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft); y = window.event.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop); } else if (!document.attachEvent && document.addEventListener) { // Gecko x = event.clientX + window.scrollX; y = event.clientY + window.scrollY; } else { // Do nothing } return {x:x, y:y}; } // Простая проверка // С помощью document.write выведем координаты прямо в окно браузера // Они будут обновлять при движении мыши document.onmousemove = function(event) { var event = event || window.event; //document.getElementById('help').innerHTML = "x = " + defPosition(event).x + ", y = " + defPosition(event).y; //Здесь координаты присваиватся положению слоя относительно окна и к координате х плюсуется 15 пикселов, чтоб курсор не был на подсказке. document.getElementById('help').style.left = defPosition(event).x + 15 + "px"; document.getElementById('help').style.top = defPosition(event).y + "px"; } //Функция, которая делает видимым наш слой и вкладывает в него необходимый текст. function helpBox(title, text) { //Вкладываем текст document.getElementById('helpTitle').innerHTML = title; document.getElementById('helpText').innerHTML = text; //Делаем видимым\невидимым if(document.getElementById('help').style.display == 'none'){ document.getElementById('help').style.display = 'block'; }else{ document.getElementById('help').style.display = 'none'; } } // --> </script> |
Далее прописываем CSS стили для нашего скрытого слоя.
|
1 2 3 4 5 6 7 8 |
<style> .helpBox{background:#fff;border:1px solid #666;width:200px;} .helpTitle{background: #fff;width:100%;color:#000;} .helpText{padding:5px;} </style> <div id="help" class="helpBox" style="display:none;position:absolute;"><p id="helpTitle" class="helpTitle">Title</p><p id="helpText" class="helpText">Help text</p></div> |
И наша картинка при наведении на которую появляется наша подсказка.
|
1 |
<img src="vasha_kartinka.jpg" width="25" onMouseOver="helpBox('Заголовок', 'Текст подсказки')" onMouseOut="helpBox()"/> |
I got an idea specifically, that hitler had been manipulated into attacking russia by a british agent who had penetrated the pay for essays berlin government.
Posted in 