0 / 0 / 0
Регистрация: 05.12.2017
Сообщений: 3
1

При наведении на ссылку меняется изображение

25.10.2018, 14:23. Показов 1159. Ответов 4
Метки нет (Все метки)

Author24 — интернет-сервис помощи студентам
Как сделать чтоб при наведении мышки на ссылку менялась картинка

Вот ссылка на сайт где это реализовано, слева меню - справа картинка, при наведении мышки на пункт меню изменяется цвет на картинке.
https://www.richelieu.com/us/e... PerPage=48
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
25.10.2018, 14:23
Ответы с готовыми решениями:

Как сделать так чтобы при наведении мышки на ссылку div менялось изображение при использовании z-index
Здравствуйте, уважаемые участники форума! Подскажите мне, пожалуйста, как сделать так чтобы кнопка...

При наведении на изображение,изображение должн немного затемнится и + по центру изображения треугольник
Вот допустим у меня 3 картинки: нужно чтоб при наведении на любую из них,затемнялось и картинка...

Рамка при наведении на изображение - изображение скачет, как сделать, чтобы они не изменяли позицию?
Хочу сделать рамку при наведении на изображение, но изображение скачет, как сделать, чтобы они не...

При наведении на ссылку меняется фон другого дива
Задача: При наведении на ссылки (id1;id2;id3) менять фон у родительского дива (fon) с...

4
Модератор
Эксперт HTML/CSS
2270 / 1651 / 650
Регистрация: 07.08.2016
Сообщений: 3,965
25.10.2018, 15:05 2
Цитата Сообщение от mik-pavel Посмотреть сообщение
при наведении мышки на пункт меню изменяется цвет на картинке.
Скриптом отлавливается наведение на пункт меню и вызывается функция в которую передается определенный параметр. В функции, в зависимости от принятого параметра, меняется атрибут src у картинки. Т.е. по умолчанию показывается одна картинка, навели на пункт меню - показалась другая. Для каждого из пунктов меню прописана своя картинка.
0
0 / 0 / 0
Регистрация: 05.12.2017
Сообщений: 3
25.10.2018, 15:11  [ТС] 3
а подробнее можно?
0
Модератор
Эксперт HTML/CSS
2270 / 1651 / 650
Регистрация: 07.08.2016
Сообщений: 3,965
25.10.2018, 15:23 4
Куда подробнее то? Или вам код нужен? Так его пример вы можете сами посмотреть на том сайте. В любом случае его нужно будет переписывать под ваши нужды.
0
0 / 0 / 0
Регистрация: 26.10.2018
Сообщений: 3
26.10.2018, 14:41 5
В первую очередь я рекомендую вам научиться пользоваться поисковыми ресурсами, это же для экономии вашего времени. И даже на этом форуме есть решение данной проблемы.

По принципу:
HTML5
1
2
3
4
<img id="image" alt="ris1.jpg" src="/pic/ris1.jpg" usemap="#myMap" width="200" height="300" />
<map name="myMap" id="myMap">
        <area href="[[~62]]" id="personage" shape="poly" coords="109, 80, 115, 77, 121, 77, 127, 80, 131, 83, 122, 83, 116, 84" class="" />
</map>
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
<script type="text/javascript" src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="/js/jquery.maphilight.js"></script>
<script type="text/javascript">
$(function() {
        $('.map').maphilight();
var area = document.getElementById('personage'),
  image = document.getElementById('image');
area.addEventListener('mouseover', function(){
  image.src="/pic/ris2.jpg";
});
});
</script>
Источник: Как сделать, чтобы картинка менялась при наведении не на всю картинку, а лишь на часть ее?

Без использования JS первое что приходит в голову это наложение фотографий, но не лучший вариант.
0
26.10.2018, 14:41
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
26.10.2018, 14:41
Помогаю со студенческими работами здесь

При наведении мыши на изображение заголовок меняется
Создайте страницу HTML. В центре поместите заголовок, под ним рисунок. Если навести мышь на...

Изображение меняется на другое при наведении мыши
Как такое можно сделать в abobe flash cs 5. И поподробнее. Плиз. Добавлено через 4 часа 23...

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

при наведении картинка меняется...
Помогите разобрать скрипт: 1 &lt;script type=&quot;text/javascript&quot; language=&quot;JavaScript&quot;&gt; 2 function...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
5
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2024, CyberForum.ru