Как поменять изображение (JavaScript)

Смена картинок при наведении курсора

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

a href="#" onmouseover="document.myImage2.src='img2.gif'" onmouseout="document.myImage2.src='img1.gif'"> img src="img1.gif" name="myImage2" width=160 height=50 border=0>/a>

Смена картинок при наведении курсора
Народ, прошу сильно не ругайте меня, я всего третий день осваиваю javascript. помогите разобраться.

Смена курсора при наведении
Есть код на jQuery, создающий простой спойлер на странице. Недостаток в том, что при наведении на.

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

Смена картинок при наведении на ссылку
Доброго времени суток. Есть такой скрипт: <script> function not()

1. Раз есть «сначала» и «потом», то, значит, между ними имеется какой-то промежуток времени.
И, значит, нужен таймер, по которому и будут сменяться картинки.

2. Конкретная реализация зависит от того — как именно у вас будут поименованы те самые картинки, которых у вас «неограниченное количество».
И также зависит от того — что вы пожелаете делать, когда это самое «неограниченное количество» всё же закончится. Например, наведёт пользователь мышь на ссылку, да и уедет в командировку на месяц. И что в этом случае делать?

a name="#" id="multiImg">img src="pics/avant48.gif" alt="">/a>

#multiImg img {width:160px; height:50px; border=0;}

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

(function(){ var d, allSrc, len, obj, ind, stop; d=document; allSrc=['pics/avant48.gif', 'pics/chrome48.gif', 'pics/firefox48.gif', 'pics/ie48.gif', 'pics/navigator48.gif', 'pics/nichrom48.gif', 'pics/opera48.gif', 'pics/safari48.gif', 'pics/yandex48.gif']; len=allSrc.length; ind=0; onload=function(){ var el=d.getElementById("multiImg"); obj=el.getElementsByTagName("img")[0]; el.onmouseover=over; el.onmouseout=out; }; function over(){ ind=ind+1==len?0:ind+1; obj.src=allSrc[ind]; stop=setTimeout(over, 500); }; function out(){ clearTimeout(stop); obj.src=allSrc[0]; }; })();

да. код рабочий. но почему-то картинки выводятся рандомно. хотелось бы всегда чтобы был 1 порядок вывода картинок. и еще прокрутка очень быстрая. мне бы совсем чуть-чуть по-медленнее. вот дали код по-проще (как мне кажется), но тут скорость уж очень медленная, надо бы по-быстрее. и еще минус, что подключается js файл

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

html> head> script src="http://code.jquery.com/jquery-latest.js">/script> script> $(document).ready(function() < var iid; var imgSrc = ["1.jpg", "2.jpg", "3.jpg"]; var curImg = 0; $("#display").bind('mouseover', function() < iid = setInterval(function() < curImg < imgSrc.length-1 ? ++curImg : curImg = 0; $("#display").attr("src", imgSrc[curImg]); }, 1800); }); $("#display").bind('mouseout', function() { clearInterval(iid); curImg = 0; this.src=imgSrc[0]}); }); /script> /head> body> img width="400px" id="display" src="1.jpg"/>br/> /body> /html>

Источник

Изменение картинки при наведении курсора с помощью javascript

Для того чтобы с помощью javascript создать эффект при котором происходит изменение картинки при наведении курсора необходимо использовать объект, входящий в модель DOM (DOM — объектная модель документа). Суть этой модели в том, что каждому html-контейнеру соответствует объект который имеет:

С помощью этих объектов можно менять значения атрибутов html-контейнеров. Это означает, что можно изменить цвет фона страницы, открыть новое окно или осуществить изменение картинки при наведении курсора в документе. При этом перезагрузки страницы не происходит. Для того чтобы осуществить изменение картинки при наведении курсора необходимо использовать объект images[]. Все объекты в DOM имеют иерархию. Т.е. имеется главный объект (Window) ему подчиняются некоторые объекты, им в свою очередь другие. Для обращения к любому объекту или его свойству указывают через точку полное или частичное его имя, начиная с имени старшего в иерархии. Полное имя объекта, отвечающего за все изображения window.document.images[]. В квадратных скобках задается имя картинки которую мы хотим заменить. Например, на странице имеется картинка . Имя картинки указано в атрибуте name, следовательно, наш объект будет window.document.images[‘MyPicture’]. Далее нужно указать полное имя новой картинки на которую мы хотим заменить текущую. Это делается с помощью свойства объекта src. Форма записи следующая window.document.images[‘MyPicture’].src=’NewPicture.gif’. В данном случае нашему свойству присваевается новая картинка NewPicture.gif. Текущая картинка которая отображается по умолчанию — Picture.gif.

Чтобы применить наш объект с помощью которого происходит изменение картинки при наведении курсора используем два события javascript:

1. onMouseOut — реагирует когда курсор мыши оставляет картинку;
2. onMouseOver — реагирует когда курсор мыши пользователя входит в область картинки.

В кавычках события onMouseOver мы должны указать свойство нашего объекта с помощью которого происходит изменение картинки при наведении курсора onMouseOver=»window.document.images[‘MyPicture’].src=’NewPicture.gif’;». В кавычках события onMouseOut мы должны указать свойство нашего объекта которое возвращает прежнее изображение onMouseOut=»window.document.images[‘MyPicture’].src=’Picture.gif’;».

В результате получим следующий HTML-тег со встроенным при помощи обработчика событий кодом javascript с помощью которого происходит изменение картинки при наведении курсора:

Выглядеть это будет следующим образом:

Источник

Как поменять изображение (JavaScript)

Поменять изображение при наведении на него курсора мыши производится при помощи событий тега — onMouseOver (событие при наведении курсора) и onMouseOut (событие ). После вызова этих событий нужно поменять атрибут изображения src .

Смена изображения при наведении

Например есть изображение (src /images/full/138/»>/images/1/3/138.jpg»), при наведении курсора на изображение должно появится изображение (src /images/full/142/»>/images/1/3/142.jpg»), при отводе курсора должно загружаться первое изображение.

function changeImage(src)

Как поменять изображение (JavaScript)

Наведите курсор на изображение

Категории

Читайте также

• textarea и maxlength (JavaScript)
• JavaScript onReady
• Определить какая клавиша нажата (JavaScript)
• textarea и maxlength 2 (JavaScript)
• Пользователь открыл вкладку (JavaScript)
• Пользователь покинул вкладку (JavaScript)
• Поменять img.src (jQuery)
• Найти img src (PHP)
• Как поменять title (JavaScript)
• Поменять класс (jQuery)
• Textarea поменять значение (jQuery)
• Поменять цвет (jQuery)

Источник

Как сделать смену картинок при наведении (jQuery)

Гиф анимация есть? А если найду?) В этом небольшом уроке мы рассмотрим как создать эффект быстрой смены картинок при помощи jQuery, задав свое время задержки на смену картинки, а двигаться она будет только при наведении курсора на изображение.

Как менять изображения при наведении jQuery

Конечно, этот код можно переписать просто “чтобы запускался при старте страницы” а не для события onhover (или при наведении). Я не знаю какие у вас цели, только не переусердствуйте с анимацией.
Наш HTML:

в тег img мы записываем атрибут data и перечисляем пути к картинкам через запятую, класс для этого тега js-hover – он нам потом понадобится.

Наш javascript код, точнее jQuery 🙂

Часть этого кода нашел на просторах интернета, и чуть улучшил под себя. 750 – значение миллисекунд до смены картинки. В принципе, это единственный параметр который вам тут нужно менять. Не забывайте помещать скрипты в самый низ страницы, но если вы вдруг хотите запихнуть его в head, то не забывайте писать document ready:

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

Хороший вариант, если у вас 2 картинки, цветная и серая. Но опять же – не поленитесь переписать это все под какую-то hover функцию, которая берет данные из атрибута data или data-image или data-src (любые data- названия атрибутов считаются валидными).

автор: Dmitriy

З 2011 року займаюся веб-розробкою. Зараз я – PHP Full Stack Developer.
Обговорити ваш проект, а також дізнатися більше про мене ви можете на цьому сайті:
dev.forwww.com

12 коментаря

Нахожусь в поисках решения проблемы, в которой при загрузки страницы, бывает так, что картинка не загружается и в исходном коде src=”” пусто. Непонятно почему так происходит, но происходит. Может просто следует кеш включить на сайте. Скрипты вынес все в шапку. Думал этот вариант будет работать без перебоев, но нет, временами картинка не подгружается, хотя и скорость ~99мбит на speed тесте…. Всё же взял это скрипт из за класса, иначе все картинки, которые надо, или не надо ищут data src…

Если я вас правильно понял, то вы можете просто проверять в самом скрипте на наличие атрибута src у изображения, и только потом выполнять скрипт:
$(‘.js-hover’).hover(function() if (this.src != false) < /*код скрипта*/>
>);

Он работает полностью. Просто когда резко наводишь курсор мышки на картинку, в момент когда страница толком еще не загрузилась, выскакивают пустые окошки вместо картинок, нажимаю проинспектировать элемент выдаёт в адресе null именно в src src=”http://сайт.net/null” остальные в data все ок, и при удержания курсора он начинает листать кадры, конечно пропуская первую. Думал может глюк в опере, в ie такая же проблема. Скрипты вынес все вниз, что бы тело быстрее грузилось, но нет эффекта. А есть может другой вариант этой реализации? Как можно сформулировать запрос в поиск?

А у вас картинки на вашем сервере находятся? Не проверял как с внешними файлами ведет себя скрипт. Опера, насколько знаю, сейчас использует тот же вебкит движок что и гугл хром, там должно все нормально работать. Ну а ИЕ это вообще другая история :). Другой реализации нет, а поискать бы советовал на англоязычных источниках или stackoverflow – возможно там вы найдете какие-то “jquery on hover function”, “jquery animation on hover” или что-то вроде этого

У меня две оперы, старенькая удобная, проинспектировать что либо, править исходный код, и новая) Картинки на моём хранятся, всего 5 штук получается в среднем каждая 100кб, это 500кб на одном слайде, а слайдов (картинок с меняющими кадрами) на страницах по 20 – 40. Но по идеи 1 картинка должна тут же грузится при наведении, а тут как будто (моё мнение) скрипт начинает раньше времени листать кадры вперёд, даже не успев загрузить первую, в настройках скорость стоит 700. То есть получается при мгновенном наведении курсора на картинку скрипт по умолчанию тут же отправляет некий запрос не успев дать загрузиться основному html. Может такое быть ?

Спасибо, долго искаль подобное решение, но подскажите как сделать смену картинок плавной, может быть с какими-нибудь эффектами

К сожалению в данном варианте не очень удобно будет применять какую-то анимацию, т.к. тег img остается на месте, а мы меняем только значение его атрибута src, отвечающий за путь к картинке. Большинство вариантов анимации связано с скрытием, появлением, или же изменение размеров элемента. Как мне кажется, для анимации нужно менять и HTML и немного править скрипт, причем важно чтобы анимация не прерывалась т.к. это наведение. Увы у меня нет под рукой готового решения, так бы я вам его скинул 🙂

В любом случае – спасибо, но к скрипту есть претензии у валидатора “Error: Attribute data not allowed on element img at this point.”. Я понимаю, что валидатор – нытик, но все же что-то пошло не так, надеюсь это не критично

А попробуйте добавить через дефис что-то еще, например data-images, и в скрипте не забудьте поменять. Насколько я помню, валидатор такие атрибуты за ошибку считать не будет 🙂

Dmitriy
26.02.2016 в 17:43
а можно ссылку? мне так будет легче понять проблему
.
.
.
К сожалению наверно нельзя) Сайт с неприличным содержанием на тему 18…
Могу скинуть на почту, если у вас более менее либеральные взгляды на всемирную паутину))

Источник