|
|
|
Вернуться назад
|
|
|
| Дата: 17 Января 2006 | Альтернативный текст на JavaScript | Добавил: Frobit |
|
Иногда бывает нужно сделать так что б при наведении на изображение или какой либо объект пользователю выдавался какой либо дополнительный текст. Можно конечно использовать стандартный alt, но в ряде случаев он не подходит.
И тут на помощь нам приходит язык сценариев JavaScript.
В CSS есть такое свойство объекта как display, которое по умолчанию имеет значение inline. Если же значение display – none, то объект временно удаляется из документа.
Так как перед нами стоит задача показывать текст когда курсор в фокусе и не показывать когда курсор не в фокусе, то мы и будем менять значение этого(display) свойства.
Создадим div:
<div id="AdvAltText" style="display:none;position:absolute">
Здесь будет текст
</div>
И создадим две функции одну для показа другую для скрытия этого div’a. С помощью идентификатора AdvAltText мы узнаем какой именно элемент нам нужно скрывать/показывать.
function ShowAdvAltText (){
document.getElementById('AdvAltText').style.display = 'inline';
}
function HideAdvAltText (){
document.getElementById('AdvAltText').style.display = 'none';
}
Если задача стоит показать или скрыть альтернативный текст только для одного атрибута то можно обойтись существующим сценарием, но на практике такого не бывает, поэтому нам необходима функция которая бы меняла текст внутри div’a AdvAltText
function ChangeText() {
eval("document.getElementById('"+ChangeText.arguments[0]+
"').innerHTML='"+ChangeText.arguments[1]+"'");
}
Функция ChangeText принимает два аргумента. Первый это идентификатор объекта. Второй это текст, который необходимо поместить в этот объект.
Для полного завершения нашего скрипта нам необходимо научиться выводить наш альтернативный текст рядом с тем объектом на который наводят мышью. Для этого улучшим функцию ShowAdvAltText;
function ShowAdvAltText (event){
var x = event.clientX + document.documentElement.scrollLeft;
var y = event.clientY + document.documentElement.scrollTop;
document.getElementById('AdvAltText').style.display = 'inline';
document.getElementById('AdvAltText').style.left = x + 10 + 'px';
document.getElementById('AdvAltText').style.top = y - 10 + 'px';
}
Собственно все, теперь только остается назначить вызов функций. Функции ShowAdvAltText и ChangeText при onmouseover, а HideAdvAltText при onmouseover.
Пример работы |
|
Новости
