| |
 61.9 Кб |
|
| | Здравствуйте, я снова к вам за помощью.
в прикрепленном файле находятся: index.htm, style.css и папка images.
Задача такая: сделать так, чтобы при наведении на картинку "услуги"(например), картинка услуги меняла свой цвет на другой. Другими словами, при наведении на картинку, эта картинка должна заменяться другой. Возможно ли такое? | |
| |
|
|
| |
|
|
| |
для: Ксения_954
(07.08.2007 в 19:39)
| | | привожу пример
<img src="картинка1" onmousover="this.src='картинка2'" onmouseout="this.src='картинка1' " /> | |
| |
|
|
| |
|
|
| |
для: yawa
(07.08.2007 в 19:44)
| | | Такой пример хорош для изображений на локальной машине, но не всегда хорош для изображений размещенных в сети. | |
| |
|
|
| |
|
|
| |
для: yawa
(07.08.2007 в 19:44)
| | | я не разобралась куда это вставить...:( | |
| |
|
|
| |
|
|
| |
для: Ксения_954
(07.08.2007 в 21:45)
| | | посмотрите пример по работе с изображениями на css:
изменение картинки при наведении | |
| |
|
|
| |
|
|
| |
для: Ксения_954
(07.08.2007 в 21:45)
| | | То что вам предлагает yawa никуда не всталяйте, если вы уже читали ссылку AlexSol, то видимо уже знаете почему. В дополнение к CSS реализации, еще пример смены картинки при наведении мыши, он реализован на JS. В архиве конкретно для вашей страницы. Для его реализации вам потребуется приготовить изображения, которыми будут заменяться исходные. В заголовок вашего файла index.htm помещен скрипт. В его начале конструкция:
if(document.images) {
pic1off = new Image();
pic1off.src = "images/1.jpg";
pic1over = new Image();
pic1over.src = "images/1_1.jpg";
pic2off = new Image();
pic2off.src = "images/2.jpg";
pic2over = new Image();
pic2over.src = "images/2_2.jpg";
}
|
это кеширование изображений. В эту конструкцию вы должны аналогично добавить (прописать) и другие изображения, которые должны изменяться. Изображениям нужно добавить имя, как указано здесь:
<img src="images/1.jpg" alt="Главная страница" name="pic1">
|
Для первого это будет pic1, затем pic2 и т.д. В якорь для картинки добавляются события:
<a href="main.htm" onmouseout="onoff('pic1','off')"
onmouseover="onoff('pic1','over')">
|
где вы должны указать имя картинки. Имена естественно могут быть произвольные, главное - указать их соответсвенно в событиях и JS-коде.
Для реализации этого, я подготовил два произвольных изображения, какие вам необходимо изменять мне не изввестно, но если вы будете использовать JS-реализацию, то думаю вам разобраться будет легко, так как это самый наглядный вариант JS-решения.
Используя изображения для ссылки не забывайте указывать для них атрибут alt, либо title для якоря, в противном случае, если у пользователя будет отключен показ изображений, ему трудно будет ориентированться в ваших ссылках. | |
| |
|
|
| |
|
|
| |
для: sim5
(08.08.2007 в 06:36)
| | | а теперь полный(с предварительноу загрузкой картинок)
<img src="картинка1" style="display:none">
<img src="картинка2" style="display:none">
<img src="картинка1" onmousover="this.src='картинка2'" onmouseout="this.src='картинка1' " />
так он предварительно загружает картинки, но не отображает их, а потом они уже занесенны в темп и просто переключаются
но лучше сделайте так, как советует sim5 | |
| |
|
|
| |
|
|
| |
для: yawa
(08.08.2007 в 11:47)
| | | Лучше всетаки делать на CSS :) | |
| |
|
|
