Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.57/21: Рейтинг темы: голосов - 21, средняя оценка - 4.57
0 / 0 / 0
Регистрация: 14.01.2017
Сообщений: 7

Изменение картинки при наведении на ссылку

28.02.2013, 10:10. Показов 4278. Ответов 3
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Допустим, есть таблица всего с двумя ячейками: в одной должна меняться картинка, в другой 3 ссылки. Как сделать так, что бы при наведении курсора в одной ячейке менялась картинка в другой? Максимум что нашел в гугле - это всплывающая картинка, а нужна в теле страницы в определенном месте. Решаемо?


http://img13.imageshost.ru/img... ddb78f.gif
0
Лучшие ответы (1)
Programming
Эксперт
39485 / 9562 / 3019
Регистрация: 12.04.2006
Сообщений: 41,671
Блог
28.02.2013, 10:10
Ответы с готовыми решениями:

Изменение стилей картинки при наведении курсора на ссылку
Здравствуйте. Столкнулся с проблемой, необходимо чтобы изображение телефона поднималось при наведении на ссылку внизу. Пробовал прописывать...

Увеличение картинки при наведении на ссылку
Добрый день! Ситуация такая: есть два div'а (путь будут id = 1 и id = 2) внутри третьего (id = conteiner). Внутри дива 1 - картинка (тег...

Увеличение картинки при наведении на ссылку
Имеется такой вот код. Картинка представленна ссылкой, которая увеличивается при наведении. И имеется текстовая дублирующая ссылка. ...

3
Эксперт JSЭксперт HTML/CSS
2436 / 1115 / 312
Регистрация: 23.06.2011
Сообщений: 3,529
28.02.2013, 10:52
Лучший ответ Сообщение было отмечено как решение

Решение

это не кошерно, но быстро, скрипту не чего делать в html
HTML5
1
2
3
4
5
6
7
8
9
10
11
<table border="1" cellpadding="0" cellspacing="0">
<tr><td>
<img src="pics/ie48.gif" alt="" id="pic">
</td><td>
 
<a href="#" onmouseover="document.getElementById('pic').src='pics/ie48.gif';">зеленый</a>
<br>
<a href="#" onmouseover="document.getElementById('pic').src='pics/iron48.gif';">зеленый</a>
<br>
<a href="#" onmouseover="document.getElementById('pic').src='pics/yandex48.gif';">зеленый</a>
</td></tr></table>
3
0 / 0 / 0
Регистрация: 14.01.2017
Сообщений: 7
28.02.2013, 12:13
newJS, ну, в принципе, гениально. )
0
2 / 2 / 2
Регистрация: 04.01.2013
Сообщений: 24
25.03.2013, 01:42
А как при этом же изменять класс ссылок? В моем случае вместо ссылок простой текст и хотелось бы поменять его стиль, что б выделить активный, к которому отображается картинка. Я нашел реализацию типо такого:
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<table border="1" cellpadding="0" cellspacing="0">
<tr><td rowspan="3">
<img src="pics/picture.jpg" alt="" name="pict">
</td>
 
<td id="b1" class="on">
<p onmouseover="on('b1'); off('b2'); off('b3'); pict.src='pics/picture1.jpg';">Первая картинка</p>
</td>
<td id="b2" class="off">
<p onmouseover="off('b1'); on('b2'); off('b3'); pict.src='pics/picture2.jpg';">Вторая картинка</p>
</td>
<td id="b3" class="off">
<p onmouseover="off('b1'); off('b2'); on('b3'); pict.src='pics/picture3.jpg';">Третья картинка</p>
</td></tr></table>
Но при выше написанном коде оно не работает =( Подскажите как его дополнить, что б менялись классы, пожалуйста.
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
inter-admin
Эксперт
29715 / 6470 / 2152
Регистрация: 06.03.2009
Сообщений: 28,500
Блог
25.03.2013, 01:42
Помогаю со студенческими работами здесь

Смена положения картинки при наведении на ссылку
Дана текстовая ссылка с картинкой (изогнутая линия). Изображение располагается над ссылкой. Нужно сделать так, чтобы при наведении...

При наведении курсора на ссылку - появление небольшой картинки рядом с курсором
Всем привет! Такая проблема, нужно чтобы при наведении курсора на ссылку, рядом с курсором, к примеру снизу и справа от него, появлялась...

Изменение строки состояния (внизу браузера) при наведении на ссылку
Здравствуйте, понастроили браузеров... есть у меня на странице код: &lt;p&gt;Можно так: &lt;a...

Изменение картинки при наведении на нее курсора мыши
Задание : Нужно в таблицу поместить картинку , размер ячейки 30*30 к примеру. При наведении на нее , изображение должно увеличиться . ...

Изменение размера картинки при наведении на нее курсора
Здравствуйте!!! Подскажите как сделать изменение размера картинки (в моем случае фото) при наведении на него курсора мыши????


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

Или воспользуйтесь поиском по форуму:
4
Ответ Создать тему
Новые блоги и статьи
SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами
8Observer8 20.02.2026
Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .
Конвертировать закладки radiotray-ng в m3u-плейлист
damix 19.02.2026
Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .
Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI
Eddy_Em 18.02.2026
Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .
Камера Toupcam IUA500KMA
Eddy_Em 12.02.2026
Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .
И ясному Солнцу
zbw 12.02.2026
И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.
«Знание-Сила»
zbw 12.02.2026
«Знание-Сила» «Время-Деньги» «Деньги -Пуля»
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров
8Observer8 12.02.2026
Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .
SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image)
8Observer8 11.02.2026
Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru