Забыли пароль?
Запросите новый здесь.

Автор темы: Rassol2
ID темы: 698
Информация:
Тема содержит 18 сообщения, была просмотрена 6587 раз.
Просмотр темы
PHP-Fusion Russia » Веб-разработка » HTML и CSS
 Распечатать тему
Смена картинки при наведении мышю
Rassol2
поделитесь html кодом который осуществляет смену картинки при наведении на неё мишю.

тоесть была картинка 1.gif навел мышку заменилась на 2.gif

за ранние спасибо.
 
jikaka
гуглить пробовал?
Google Search Смена картинки при наведении мышки
 
Web
Djakonda
Вот дружище попробуй...

Скачать исходники  Код
<a href="/твоя.страница.html"><img src="/папка с картинкой/сама картинка.png"  alt="" onmouseover="this.src='/папка с картинкой/другая картинка2.png'" onmouseout="this.src='/папка с картинкой/первая картинка.png'" /></a>




Я очень извиняюсь, но по себе знаю как неприятно слышать фразу ГУГЛ В ПОМОЩь!
 
Polarfox
Я бы на css сделал, тк это удобней, наши товарищи дезигнеры знают как, но решили что это будет сложно, я думаю.
Всегда делайте backup перед изменениями | Указывайте свою версию в подписи/профиле. | Вся бесплатная тех. поддержка только на форуме
 
mrlasking
Зависит от того, какой функционал тебе нужен:

Если нужна кнопка: http://makecode.r...s-sprites/

Если нужна смена на не связанные картинки:
в хед кидаешь
Скачать исходники  Код
function changePic(element, src) {
var img = element.getElementsByTagName("IMG")[0];
img.src = src;
return;
}



ссылки оформляешь:
Скачать исходники  Код
<a href="#" onmouseover="changePic(this, 'курсор на картинке.png')" onmouseout="changePic(this, 'картинка.png')"><img src="картинка.png" border="0"></a>





P.S.
Psc, если уже говорить об удобстве то лучше jquery :)
... else document.write( "Ваш браузер не поддерживает JavaSсript<br>" );
 
Web
profdesigner
Я бы тебе посоветовал ставить css который сдвигает изображение, а вернее jQuery. Т.е при наведении на картинку, он сдвигает её, показывая вторую часть фото. Это позволяет пользователю не ждать загрузки 2-й картинки при наведении.

Вот мой проект на котором организован данный эффект. http://peoplestyl...
Вот страничка в которой можешь посмотреть исходный код и скопировать jQuery плагин и фото http://peoplestyl...index.html
www.Profdesigner.com - создание сайтов в Петрозаводске
 
jikaka
а если скрипты отключены?
по мне так лучше спрайтами сделать, т.е. на голом CSS
 
Web
profdesigner
Это идеальный вариант jikaka, но может не всегда презентабельно чем jQuery... По сути jQuery слайдеры основаны на спрайтах.
www.Profdesigner.com - создание сайтов в Петрозаводске
 
jikaka
которые при отключенных скриптах в браузере будут расплываться как тузики в грелкеag
 
Web
profdesigner
где-то придется рисковать.ds
www.Profdesigner.com - создание сайтов в Петрозаводске
 
mrlasking
profdesigner, ну я в своем ответе, перед вашим, и написал - в зависимости от задачи поставленной выбирается способ реализации, и дал 4 варианта решенияad Включая голый цсс и жикверьку)
... else document.write( "Ваш браузер не поддерживает JavaSсript<br>" );
 
Web
profdesigner
Да, mrlasking, просто пошел искать код... Не сомтрел твой код перед отправкой.
www.Profdesigner.com - создание сайтов в Петрозаводске
 
Polarfox
Скачать исходники  Код
element.getElementsByTagName("IMG")[0];


- это рандом. Просто рандом, появится первой новая картинка - будет менять её.

Если уж даете советы - давайте без костылей? Есть http://devguru.com/technologies/javascript/17445.asp getElementById и собственно иды уникальные.
Ну хотя бы есть имена.
Всегда делайте backup перед изменениями | Указывайте свою версию в подписи/профиле. | Вся бесплатная тех. поддержка только на форуме
 
mrlasking
Psc, посмотри внимательно код функции и ее применение в формировании ссылки и покажи рандом.

Если уж умничаем - то хотя бы читаем сначала.
... else document.write( "Ваш браузер не поддерживает JavaSсript<br>" );
 
Web
Polarfox
Меня смутил безумный вид ее. А других стилей решения не было?
Всегда делайте backup перед изменениями | Указывайте свою версию в подписи/профиле. | Вся бесплатная тех. поддержка только на форуме
 
mrlasking
Psc, я же его не навязываю) сам не приемлю джаваскрипт в решении таких задач.

Но если человек спросил, а я отвечаю, то я обязал себя перечислить все варианты решения. Там над js кодом ссылочка на очень интересную статью, где подробно описано - как сделать смену картинки замечательным css-ом, спрайтами и превосходным jQuery ab

az
... else document.write( "Ваш браузер не поддерживает JavaSсript<br>" );
 
Web
bitmaster
Я вообще преверженец спрайтов , и вообще в основном у меня все иконки , иконки смены и так далее от всего сайта обычно нахадятся на одном рисунке .. ибо все картинки грузяться одним потоком что не мало важно . погугли что такое спрайт и как его есть . если что помогу. bv
 
Polarfox
Вот и я про то, даже гуглить не нада, в гугле все спрайтами сделано.
Всегда делайте backup перед изменениями | Указывайте свою версию в подписи/профиле. | Вся бесплатная тех. поддержка только на форуме
 

Поделиться этой темой
Социальные закладки: Vkontakte Odnoklassniki Mail.ru Facebook Google Tweet This
URL:
BBcode:
HTML:

Перейти на форум:
Похожие темы
Темы Форум Ответов / Просмотров Последние сообщения
Галочка согласия при отправке формы  →  HTML и CSS 1 / 498 04.02.2024 11:36
Ошибка при создании панели  →  Ошибки, баги 6 / 1721 29.01.2021 21:58
Почему при нажатии на кнопку срабатывает проверка полей?  →  HTML и CSS 1 / 4066 05.11.2020 10:33
Прикольные картинки  →  Юмор 102 / 42848 09.04.2019 13:52
Работа разных тем оформления при разных разрешениях  →  HTML и CSS 2 / 1492 05.03.2019 09:08
В разных статьях "краткого содержания" картинки "налазят" друг на друга  →  Ошибки, баги 5 / 1698 14.01.2019 13:09
Возможно ли при помощи тестов (вопросов) проверить совместимость М и Ж?  →  Разное 2 / 3152 04.11.2018 17:24
Проблема при установке  →  Установка и настройка системы 11 / 4429 18.09.2018 14:28
Важно! 2 месяца бесплатно, при продлении или заказе dedicated сервера! Акция!  →  Хостинг 0 / 1821 07.06.2018 04:37
Где можно увеличить размер загружаемой картинки?  →  Установка и настройка системы 2 / 1608 10.03.2018 09:35
Топ 5 пользователей форума
Zaxap Zaxap (1,090)   Vova Vova (877)   Pisatel Pisatel (678)   util util (666)   SchreiBear SchreiBear (625)