Как выделить текст и изображение в разных div при наведении курсора

Я хотел бы добиться того же эффекта, что и на следующем веб-сайте:

http://www.kpf.com/projectlist.asp?T=4

При наведении курсора на изображение соответствующий текст выделяется, и наоборот.

Я нашел решение JavaScript на форуме. Я скопировал решение ниже:

код раздела

<div style="width:400;height:500;" onmouseover="hightlight()" onmouseout="removehightlight()"><span id="textspan" >This is a test div to show mouseover</span><img id="imgsrc" src="/images/test.gif" /></div>

javascript

<script language="javascript">
function hightlight() 
{   
document.getElementById("textspan").style.color = "blue";
document.getElementById("imgsrc").style.border = "1px solid blue";
//document.getElementById("textspan").setStyle("color","blue");
//document.getElementById("imgsrc").setStyle("border","1px solid blue");
}
function removehightlight() 
{
document.getElementById("textspan").style.color = "black";
document.getElementById("imgsrc").style.border = "0px solid blue";
}    
</script>

Однако это решение предназначено для изображения и текста в одном и том же div. Мое изображение и текст находятся в двух отдельных разделах, например:

javascript

function hightlight() 
{
document.getElementById("textspan").style.text = "underline";
document.getElementById("imgsrc").style.border = "5px solid #005596";
}
function removehightlight() 
{
document.getElementById("textspan").style.text = "none";
document.getElementById("imgsrc").style.border = "5px solid white";
}

текст

<div id="left-menu" >
<div align="right">
<p><!-- #BeginLibraryItem "/Library/left-projects-category.lbi" --> <span class="left-title">Category</span><!-- #EndLibraryItem --><br />
<span class="left-sub">Residential</span><br />
<a href="#" class="btn-list"><span id="textspan" onmouseover="hightlight()" onmouseout="removehightlight()">11 Gurney Drive</span><br /></a>
<a href="#" class="btn-list"><span id="textspan" onmouseover="hightlight()" onmouseout="removehightlight()">78 LAD</span><br /></a>
</p>
</div>
</div>

изображение

<div style="float:left; margin:90px 0 0 305px; padding:0 0 100px 0; height:auto;">
<img src="../../images/completed-projects/thumbnails/11-gurney-drive.jpg" width="215" height="170" id="imgsrc" style="border:5px solid white" onmouseover="hightlight()" onmouseout="removehightlight()"/>
<img src="../../images/completed-projects/thumbnails/78-lad.jpg" width="215" height="171" id="imgsrc" style="border:5px solid white" onmouseover="hightlight()" onmouseout="removehightlight()"/>
/div>

МОИ ПРОБЛЕМЫ

Давайте назовем 11 Gurney Drive – Text1 и 11-gurney-drive.jpg – Image1
78 LAD – Text2 и 78. -lad.jpeg - Изображение2.

Мои проблемы:

При наведении курсора на Текст1 он выделяет и Текст1, и Изображение1 — хорошо.
При наведении курсора на Текст2 он выделяет Текст2 и Изображение1 — он должен выделять Текст2 и Изображение2.
При наведении курсора на Изображение1 он выделяет только Изображение1 — он должен выделять Текст1 и Изображение1.
При наведении курсора мыши на Изображение2 выделяется только Изображение1 — должны выделяться Текст2 и Изображение2.

У меня очень мало опыта в настройке Javascript; попробовал погуглить getElementbyId, но все это могло быть и на греческом языке.

Редактировать

Я забыл упомянуть, что пытался добавить второй уникальный идентификатор элемента с именами textspan2 и imgsrc2, но это, похоже, не сработало. Что я сделал:

javascript

function hightlight() 
{
document.getElementById("textspan").style.text = "underline";
document.getElementById("imgsrc").style.border = "5px solid #005596";
document.getElementById("textspan2").style.text = "underline";
document.getElementById("imgsrc2").style.border = "5px solid #005596";
}
function removehightlight() 
{
document.getElementById("textspan").style.text = "none";
document.getElementById("imgsrc").style.border = "5px solid white";
document.getElementById("textspan2").style.text = "none";
document.getElementById("imgsrc2").style.border = "5px solid white";
}

текст

<div id="left-menu" >
<div align="right">
<p><!-- #BeginLibraryItem "/Library/left-projects-category.lbi" --> <span class="left-title">Category</span><!-- #EndLibraryItem --><br />
<span class="left-sub">Residential</span><br />
<a href="#" class="btn-list"><span id="textspan" onmouseover="hightlight()" onmouseout="removehightlight()">11 Gurney Drive</span><br /></a>
<a href="#" class="btn-list"><span id="textspan2" onmouseover="hightlight()" onmouseout="removehightlight()">78 LAD</span><br /></a>
</p>
</div>
</div>

изображение

<div style="float:left; margin:90px 0 0 305px; padding:0 0 100px 0; height:auto;">
<img src="../../images/completed-projects/thumbnails/11-gurney-drive.jpg" width="215" height="170" id="imgsrc" style="border:5px solid white" onmouseover="hightlight()" onmouseout="removehightlight()"/>
<img src="../../images/completed-projects/thumbnails/78-lad.jpg" width="215" height="171" id="imgsrc2" style="border:5px solid white" onmouseover="hightlight()" onmouseout="removehightlight()"/>
/div>

javascript text image highlight getelementbyid
person Hasanah    schedule 28.12.2010    source источник
comment
Идентификатор должен быть уникальным для каждой страницы, поэтому getElementById() выбирает первый найденный. Попробуйте изменить идентификатор для второй страницы.   -  person Mironor    schedule 28.12.2010

Ответы (1)


arrow_upward
5
arrow_downward

getElementById — один из тех вызовов, которые действительно делают то, что говорят. :-) Он получает элемент DOM по его атрибуту id. Поскольку id должен быть уникальным, он дает вам один конкретный элемент, с которым вы затем можете взаимодействовать (например, задавая его свойства стиля).

Таким образом, часть вашей проблемы заключается в том, что у вас есть два элемента с идентификатором «textspan» и два элемента с идентификатором «imgsrc», что означает, что браузер будет делать что-то неопределенное, потому что вы не можете этого сделать.

В обработчике событий this будет указывать на элемент, на который вы поместили обработчик. Таким образом, в ваших функциях highlight и removeHighlight вы можете использовать this (а не getElementById) для получения ссылки на img элементы DOM. Остаются только текстовые.

Вы можете использовать соглашение об именах (например, "textspan1" и "imgsrc1", "textspan2" и "imgsrc2"), чтобы обработчики выглядели так:

function hightlight() 
{   
    var textid = this.id.replace("imgsrc", "textspan");
    var text = document.getElementById(textid);

    text.style.color = "blue";
    this.style.border = "1px solid blue";
}
function removehightlight() 
{
    var textid = this.id.replace("imgsrc", "textspan");
    var text = document.getElementById(textid);

    text.style.color = "black";
    this.style.border = "0px solid blue";
}

... или вы можете использовать атрибут (скажем, data-text) в тегах img, который дает идентификатор связанного с ним текстового поля; вы можете получить атрибут из элемента DOM следующим образом:

var textid = this.getAttribute("data-text");

Пользовательские атрибуты недействительны в HTML4 и более ранних версиях, но я никогда не встречал браузер, в котором бы возникали проблемы с ними. В HTML5 и более поздних версиях у вас могут быть настраиваемые атрибуты, если они начинаются с data-, как указано выше. Поэтому, если проверка является частью вашей рабочей практики (и обычно это хорошая идея), вы можете начать использовать тип документа HTML5, если только у вас нет особой причины оставаться с предыдущим (например, вам неудобно использовать тип документа для версии HTML5, которая еще даже не достигла стадии рекомендации кандидата). Многие из нас достаточно счастливы, чтобы двигаться дальше.

this не является элементом, которым вы подключаете обработчики. Я забыл, я давно не использовал способ DOM0 для подключения обработчиков (onmouseover=). Но ниже работает:

Или, из-за того, как вы прикрепляете обработчики, вы можете передать аргумент в функции, сообщающий им, с каким из них они имеют дело:

function hightlight(index) 
{   
    var img  = document.getElementById("imgsrc" + index);
    var text = document.getElementById("textspan" + index);

    text.style.color = "blue";
    img.style.border = "1px solid blue";
}
function removehightlight(index) 
{
    var img  = document.getElementById("imgsrc" + index);
    var text = document.getElementById("textspan" + index);

    text.style.color = "black";
    img.style.border = "0px solid blue";
}

... где ваши атрибуты onmouseover и onmouseout меняются на:

onmouseover="hightlight(1);" onmouseout="removehightlight(1);"
onmouseover="hightlight(2);" onmouseout="removehightlight(2);"

Вот живой пример.

Примечание: код, который вы нашли, использует события mouseover и mouseout. Имейте в виду, что они совсем не делают того, что вы ожидаете, и это может вас укусить, хотя конкретный способ их использования в основном хорош (вам делаем больше работы, чем нужно, но это нормально). Но предположим, что ваша разметка немного изменилась:

<a href="#" class="btn-list"><span id="textspan" onmouseover="hightlight()" onmouseout="removehightlight()">11 <strong>Gurney</strong> Drive</span><br /></a>

Теперь в диапазоне есть элемент, в котором вы наблюдаете за этими событиями. Это означает, что когда мышь пользователя перемещается слева направо, вы увидите серию событий mouseover, когда мышь перемещается по тексту "11(пробел)", после чего ваш код увидит событие mouseout, когда мышь перемещается на слово «Герни». Почему это происходит? Потому что мышь переместилась за пределы элемента span и в элемент strong. Затем он сразу же увидит еще один mouseover, потому что мышь перемещается по элементу strong, а событие mouseover поднимается вверх по DOM, поэтому мы видим его на span. Это может вызвать мерцание при перемещении мыши в элемент strong и обратно.

В Internet Explorer есть события mouseenter и mouseleave, которые больше подходят для того, что вы делаете, но кому нужны события, ограниченные только одной маркой браузера? Ну, большинство хороших библиотек JavaScript эмулируют эти события даже в браузерах, которые не поддерживают их изначально, что приводит меня к...

Не по теме 1:

Если вы только начинаете работать с JavaScript в браузерах, небольшое предупреждение: существует ряд несоответствий и неудобных ситуаций в браузерах (если это слово), которые такие библиотеки, как jQuery, Прототип, YUI, Closure или любой из нескольких может помочь вам. Для того, что вы делаете в этом вопросе, энх, они не принесут огромной ценности. Но для более сложных вещей они могут сэкономить вам много времени и усилий, используя хорошую работу, которую сделали многие другие до вас. Как, например, эмуляция mouseenter и mouseleave в браузерах, которые их не поддерживают. :-) Я точно знаю, что и jQuery, и Prototype делают это за вас, и я подозреваю, что другие тоже.

Не по теме 2:

Это "изюминка", а не "изюминка". Если кому-то понадобится позже поддержать ваш код, эта опечатка (которая является последовательной и, следовательно, не является ошибкой!) вполне может сбить их с толку. Отдельно стандартной практикой (которую вы можете игнорировать!) является использование слов в CamelCase в именах функций, поэтому removeHighlight вместо removehightlight. ПОМОЩЬ.

person T.J. Crowder    schedule 28.12.2010
comment
Большое спасибо за столь развернутый ответ. Я ценю вашу живую демонстрацию, в которой я могу изучать код и проводить собственные тесты. Я вижу, что мне нужно еще многому научиться, так как часть ответа для меня все еще греческая, но мне, наконец, удалось решить проблемы, и я в восторге от результата. Я не могу отблагодарить вас достаточно! :) - person Hasanah; 28.12.2010