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

Автор темы: Rassol2
ID темы: 698
Информация:
Тема содержит 18 сообщения, была просмотрена 5881 раз.
Просмотр темы
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 перед изменениями | Указывайте свою версию в подписи/профиле.
Ежели кто забанен за спам, но не считает себя ботом: можете сообщить мне об этом, все будет хорошо.

PolarLab - вход для подопытных
 
Web
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 перед изменениями | Указывайте свою версию в подписи/профиле.
Ежели кто забанен за спам, но не считает себя ботом: можете сообщить мне об этом, все будет хорошо.

PolarLab - вход для подопытных
 
Web
mrlasking
Psc, посмотри внимательно код функции и ее применение в формировании ссылки и покажи рандом.

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

PolarLab - вход для подопытных
 
Web
mrlasking
Psc, я же его не навязываю) сам не приемлю джаваскрипт в решении таких задач.

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

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

PolarLab - вход для подопытных
 
Web

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

Перейти на форум:
Похожие темы
Топ 5 пользователей форума
Alex Alex (1,172)   Zaxap Zaxap (1,078)   Vova Vova (877)   Pisatel Pisatel (678)   util util (666)