Просмотр темы
Смена картинки при наведении мышю
|
|
Rassol2 |
Опубликовано 30.06.2011 12:37
|
![]() Пользователь ![]() Сообщений: 65 Зарегистрирован: 20.10.2010 22:06 |
поделитесь html кодом который осуществляет смену картинки при наведении на неё мишю. тоесть была картинка 1.gif навел мышку заменилась на 2.gif за ранние спасибо. |
|
|
jikaka |
Опубликовано 30.06.2011 12:46
|
![]() Супер Администратор ![]() Разработчики ![]() Сообщений: 4849 Зарегистрирован: 26.07.2010 12:10 |
гуглить пробовал?![]() |
|
|
Djakonda |
Опубликовано 30.06.2011 15:13
|
![]() Начинающий ![]() Сообщений: 41 Зарегистрирован: 31.10.2010 18:44 |
Вот дружище попробуй...<a href="/твоя.страница.html"><img src="/папка с картинкой/сама картинка.png" alt="" onmouseover="this.src='/папка с картинкой/другая картинка2.png'" onmouseout="this.src='/папка с картинкой/первая картинка.png'" /></a> Я очень извиняюсь, но по себе знаю как неприятно слышать фразу ГУГЛ В ПОМОЩь! |
|
|
Polarfox |
Опубликовано 30.06.2011 16:48
|
![]() Администратор ![]() Разработчики ![]() Группа поддержки ![]() Сообщений: 3387 Зарегистрирован: 20.08.2010 14:03 |
Я бы на css сделал, тк это удобней, наши товарищи дезигнеры знают как, но решили что это будет сложно, я думаю.
Всегда делайте backup перед изменениями | Указывайте свою версию в подписи/профиле. | Вся бесплатная тех. поддержка только на форуме
|
|
|
mrlasking |
Опубликовано 26.08.2011 00:51
|
![]() Начинающий ![]() Сообщений: 36 Зарегистрирован: 30.10.2010 21:34 |
Зависит от того, какой функционал тебе нужен: Если нужна кнопка: http://makecode.r...s-sprites/ Если нужна смена на не связанные картинки: в хед кидаешь function changePic(element, src) { ссылки оформляешь: <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>" );
|
|
|
profdesigner |
Опубликовано 26.08.2011 06:38
|
![]() Начинающий ![]() Сообщений: 21 Зарегистрирован: 25.08.2011 07:33 |
Я бы тебе посоветовал ставить css который сдвигает изображение, а вернее jQuery. Т.е при наведении на картинку, он сдвигает её, показывая вторую часть фото. Это позволяет пользователю не ждать загрузки 2-й картинки при наведении. Вот мой проект на котором организован данный эффект. http://peoplestyl... Вот страничка в которой можешь посмотреть исходный код и скопировать jQuery плагин и фото http://peoplestyl...index.html www.Profdesigner.com - создание сайтов в Петрозаводске
|
|
|
jikaka |
Опубликовано 26.08.2011 06:57
|
![]() Супер Администратор ![]() Разработчики ![]() Сообщений: 4849 Зарегистрирован: 26.07.2010 12:10 |
а если скрипты отключены? по мне так лучше спрайтами сделать, т.е. на голом CSS |
|
|
profdesigner |
Опубликовано 26.08.2011 07:21
|
![]() Начинающий ![]() Сообщений: 21 Зарегистрирован: 25.08.2011 07:33 |
Это идеальный вариант jikaka, но может не всегда презентабельно чем jQuery... По сути jQuery слайдеры основаны на спрайтах.
www.Profdesigner.com - создание сайтов в Петрозаводске
|
|
|
jikaka |
Опубликовано 26.08.2011 07:27
|
![]() Супер Администратор ![]() Разработчики ![]() Сообщений: 4849 Зарегистрирован: 26.07.2010 12:10 |
которые при отключенных скриптах в браузере будут расплываться как тузики в грелке![]() |
|
|
profdesigner |
Опубликовано 26.08.2011 08:27
|
![]() Начинающий ![]() Сообщений: 21 Зарегистрирован: 25.08.2011 07:33 |
где-то придется рисковать.![]() www.Profdesigner.com - создание сайтов в Петрозаводске
|
|
|
mrlasking |
Опубликовано 26.08.2011 11:05
|
![]() Начинающий ![]() Сообщений: 36 Зарегистрирован: 30.10.2010 21:34 |
profdesigner, ну я в своем ответе, перед вашим, и написал - в зависимости от задачи поставленной выбирается способ реализации, и дал 4 варианта решения![]() ... else document.write( "Ваш браузер не поддерживает JavaSсript<br>" );
|
|
|
profdesigner |
Опубликовано 26.08.2011 11:10
|
![]() Начинающий ![]() Сообщений: 21 Зарегистрирован: 25.08.2011 07:33 |
Да, mrlasking, просто пошел искать код... Не сомтрел твой код перед отправкой.
www.Profdesigner.com - создание сайтов в Петрозаводске
|
|
|
Polarfox |
Опубликовано 26.08.2011 16:51
|
![]() Администратор ![]() Разработчики ![]() Группа поддержки ![]() Сообщений: 3387 Зарегистрирован: 20.08.2010 14:03 |
- это рандом. Просто рандом, появится первой новая картинка - будет менять её. Если уж даете советы - давайте без костылей? Есть http://devguru.com/technologies/javascript/17445.asp getElementById и собственно иды уникальные. Ну хотя бы есть имена. Всегда делайте backup перед изменениями | Указывайте свою версию в подписи/профиле. | Вся бесплатная тех. поддержка только на форуме
|
|
|
mrlasking |
Опубликовано 26.08.2011 17:07
|
![]() Начинающий ![]() Сообщений: 36 Зарегистрирован: 30.10.2010 21:34 |
Psc, посмотри внимательно код функции и ее применение в формировании ссылки и покажи рандом. Если уж умничаем - то хотя бы читаем сначала. ... else document.write( "Ваш браузер не поддерживает JavaSсript<br>" );
|
|
|
Polarfox |
Опубликовано 26.08.2011 19:13
|
![]() Администратор ![]() Разработчики ![]() Группа поддержки ![]() Сообщений: 3387 Зарегистрирован: 20.08.2010 14:03 |
Меня смутил безумный вид ее. А других стилей решения не было?
Всегда делайте backup перед изменениями | Указывайте свою версию в подписи/профиле. | Вся бесплатная тех. поддержка только на форуме
|
|
|
mrlasking |
Опубликовано 26.08.2011 19:54
|
![]() Начинающий ![]() Сообщений: 36 Зарегистрирован: 30.10.2010 21:34 |
Psc, я же его не навязываю) сам не приемлю джаваскрипт в решении таких задач. Но если человек спросил, а я отвечаю, то я обязал себя перечислить все варианты решения. Там над js кодом ссылочка на очень интересную статью, где подробно описано - как сделать смену картинки замечательным css-ом, спрайтами и превосходным jQuery ![]() ![]() ... else document.write( "Ваш браузер не поддерживает JavaSсript<br>" );
|
|
|
bitmaster |
Опубликовано 30.09.2012 08:10
|
![]() Новичок ![]() Сообщений: 2 Зарегистрирован: 28.09.2012 18:34 |
Я вообще преверженец спрайтов , и вообще в основном у меня все иконки , иконки смены и так далее от всего сайта обычно нахадятся на одном рисунке .. ибо все картинки грузяться одним потоком что не мало важно . погугли что такое спрайт и как его есть . если что помогу. ![]() |
|
|
Polarfox |
Опубликовано 30.09.2012 11:38
|
![]() Администратор ![]() Разработчики ![]() Группа поддержки ![]() Сообщений: 3387 Зарегистрирован: 20.08.2010 14:03 |
Вот и я про то, даже гуглить не нада, в гугле все спрайтами сделано.
Всегда делайте backup перед изменениями | Указывайте свою версию в подписи/профиле. | Вся бесплатная тех. поддержка только на форуме
|
|
Поделиться этой темой | |
Социальные закладки: |
![]() ![]() ![]() ![]() ![]() ![]() |
URL: | |
BBcode: | |
HTML: |
Перейти на форум: |