<html>
<head>
<script type="text/javascript">
window.onload = function () {
var arayLink = document.getElementsByTagName('a'),
totalLink = arayLink.length;
while (totalLink--) {
arayLink[totalLink].addEventListener('mouseover', havejpg, false);
}
function havejpg (e) {
var div = document.createElement('div');
if (e.target.href.match(/jpg$/)) { //Проверяем, что в имени файла по ссылке расширение .jpg
// alert('Ссылка содержит буквы jpg');
x = e.clientX;
y = e.clientY;
div.style.position = 'absolute';
div.style.left = x + 20; // Координаты дива X и Y не забываем указать еденицы измерения,
div.style.top = y + 20; // например 40px или 20%
div.style.background = 'green'; // Див с зеленой заливкой ))
div.appendChild(document.createTextNode('Я обычный текст')); // Добавим текст в див
document.body.appendChild(div);
// Функция удаляет новый див
function deleteDiv () {
document.body.removeChild(div); // Удаление дива
// Удаляем обработчик события "уход курсора с элемента" текущей ссылки
e.target.removeEventListener('mouseout', deleteDiv, false);
}
// Добавим обработчик события "уход курсора с элемента" текущей ссылки, будет вызвана функцыя deleteDiv
e.target.addEventListener('mouseout', deleteDiv, false);
}
// else {
// alert('Ссылка не содержит буквы jpg');
// }
}
}
</script>
</head>
<body>
<a href="img.jpg"> Ссылка 1 </a><br />
<a href="my.txt"> Ссылка 2 </a><br />
<a href="here.mp3"> Ссылка 3 </a><br />
<a href="you.jpg"> Ссылка 4 </a><br />
<a href="i.png"> Ссылка 5 </a><br />
</body>
</html>