Хорошей практикой веб-строительства является создание таких гиперссылок (и других активных элементов), которые изменяются при наведении мыши. У гиперссылок, по спецификации W3C, даже существует для этого специальный псевдокласс – hover. С его помощью несложно организовать подсветку для всех ссылок на странице сразу (например, в присоединённом к странице файле style.css):
Сложнее сделать подсветку, если вместо текста в гиперссылке находится картинка. Тогда для «подсветки» необходимы две картинки, одна из которых меняется на другую при наведении мыши. Человеку, не вникающему особо в HTML (например, PHP-программисту) это может показаться таким сложным, что без javascript ну никак не сделаешь. А javascript сам по себе тоже сложный. Так появляются на свет сайты, использующие для подсветки ссылок jQuery. Бывают и просто на javascript. Например, так: делаются два элемента div с id "p1" и "p1_b" с атрибутами onmouseover onmouseout каждый, и две функции:
И всё прекрасно работает (http://ir2.ru/static/hover/hover1.htm). Правильнее, конечно, было бы писать не document.all, а document.getElementById, но оно и так прекрасно работает. Как оказалось, даже в Опере и в Мозилле (FF).
Намного естественней делать подсветку ссылок (даже с картинками) всё-таки на CSS. Для каждого элемента с картинкой тогда надо будет прописать правила вида:
И вот что получится: http://ir2.ru/static/hover/hover3.htm. Заметны два недостатка: 1) при наведении мыши картинка меняется не мгновенно, а с задержкой, требующейся для загрузки нового изображения; 2) в ИЕ картинка вообще не меняется. Ну, а чего же вы хотели: HTML-документ без doctype преподнесёт вам ещё не один сюрприз. Всегда ставьте валидный (правильный, соответствующий рекомендациям W3C) doctype! В нашем случае не надо крутого HTML5 или XHTML, вполне достаточно будет
<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN' 'http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd'>
А первый недостаток никакой хитростью не исправишь, кроме как простой предварительной загрузкой всех необходимых картинок в невидимом режиме (preload) – создадим невидимый элемент div и поместим туда картинки, которые будут сменять основные при наведении мыши. И у нас получится что-то вроде http://ir2.ru/static/hover/hover4.htm.
Там, правда, мы ввели ещё одно упрощение, и теперь всё будет работать даже без doctype: мы убрали элемент div с фоновой картинкой, в котором находилась ссылка, и сделали для самой ссылки фоновую картинку, установив заодно для элементов a правило display:block;.
Это, последнее решение, в общем-то можно было бы считать идеальным. Но бывают ситуации, когда для более удобного программирования всё-таки требуется javascript. Это, например, ситуация "расширения" проекта, когда требуется добавить ещё одну ссылку в меню (или несколько ссылок). Для новых ссылок придётся писать руками новые правила CSS, с указанием наименований новых файлов фоновых картинок – что служит дополнительным источником человеческих ошибок.
Так у нас получится http://ir2.ru/static/hover/hover2.htm. Там, конечно, мы учли все усовершенствования, найденные выше (типа preload), и добавили новое: ни к чему удвоения элементов, если можно просто поменять у картинки атрибут src (это, конечно, требует некоторого знания регулярных выражений – и знания того факта, что на javascript с ними можно работать). Правила CSS несколько упростятся, так как мы не используем в этом примере фоновые картинки для ссылок (и не надо задавать явно ширину и высоту элементов).
Напоследок создадим HTML-документ, в "меню" которого можно добавлять новые ссылки с картинками внутри, даже без указания свойств onmouseover: http://ir2.ru/static/hover/hover5.htm. Единственное требование – если простая картинка имеет имя name, то изменённая (при наведении мыши) должна иметь имя вида name_b. Заметим, что для обеспечения простоты дальнейшего программирования (и чистоты кода) HTML, размер javascript (файл http://ir2.ru/static/hover/hover5.js) вырастает в размерах катастрофически (в 4 раза). Так что хрен его знает – может, всё-таки лучше делать подсветку на CSS?..
obj.src = obj.src.replace(/\.png$/, 'тут укажи путь_b.png')
Подскажите как в строке obj.src = obj.src.replace(/\.png$/, '_b.png') поменять расположение картинки например в папку img
===========================
Например, (если миниатюры хранятся в папке small_img) так:
obj.src = obj.src.replace(/^small_img/, 'big_img')