MYSQL
PHP
HTML
CSS
JS

Javascript как изменить src (путь) изображения

Src позволяет задать элементу путь к контенту. Самый простой способ его изменить (без jQuery), это указать явно:
?
1
2
3
4
5
<img id='myImage' src='/1.png' />
 
<script>
  document.getElementById("myImage").src="/2.png";
</script>
Сразу для нескольких элементов:
?
1
2
3
4
5
6
7
8
9
10
11
12
13
<img id='myImage1' src='/1.png' />
<img id='myImage2' src='/1.png' />
<img id='myImage3' src='/1.png' />
 
<script>
   window.addEventListener("load", function load() {
      var imgs=["myImage1", "myImage2", "myImage3"];
 
      imgs.forEach(function(elementId){
         document.getElementById(elementId).src='/2.png';
      });
   }, false);
</script>
С помощью jQuery:
?
1
$(".myImages").attr("src", "/1.png");
С помощью jQuery при наведении:
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<img class='myImages' src="/images/news/130--15-09-17--11-28-00.jpg"  style="width: 50%" />
<img class='myImages' src="/images/news/104-lovely-mountain.jpg" style="width: 50%" />
 
<script>
   $(".myImages").on("mouseover", function(event) {
      var img1 = "/images/news/130--15-09-17--11-28-00.jpg";
      var img2 = "/images/news/104-lovely-mountain.jpg";
 
      $(this).attr(
         "src",
         $(this).attr("src") ===img1 ? img2 : img1
      );
      event.preventDefault();
      return false;
   });
</script>
Наведи на курсор на изображения:
Спасибо за внимание.
Если статья Вам показалась незаконченной или Вы знаете как её улучшить, пожалуйста сообщите мне e@gohtml.ru

Случайные уроки по этой теме:

Таймер. setTimeout и setInterval Cookie в JS Блог на ReactJS #3. Redux, Middleware, json-server, fetch Canvas с нуля. Аналоговые часы на JS Условные операторы в JavaScript
↑