Javascript onmouseover смена фонового изображения - PullRequest
Новая
       17

Javascript onmouseover смена фонового изображения

0 голосов
/ 24 декабря 2018

Я пытаюсь реализовать это средство смены фона из , удаленного после правки , в мой личный блог, который находится только на моем компьютере (не загружается в Интернет), но я не знаю, для чего нужны jsэто?Как мне добавить его в свой блог?Я знаю, что есть: 

<body style="background-image : url();">

в html-файле, за которым следуют: 

<img src="" onmouseover="document.body.style.backgroundImage = 'url()';" width="20" height="20">

Есть ли что-нибудь еще кроме js?

Редактировать: Кажетсяэто работает только с 12x12 GIF-файлов?Когда я размещаю свои собственные изображения в местах URL, изменение bg не будет работать.

2-е редактирование: я обнаружил проблему.У меня были свои имена не правильно названы.

Ответы [ 2 ]

0 голосов
/ 24 декабря 2018

Ваш код будет работать нормально.Нет необходимости в любом другом коде JS.

0 голосов
/ 24 декабря 2018

Вот что-то, что переключается между двумя изображениями на фоне div. 

let images = ['https://www.gstatic.com/webp/gallery/3.jpg','https://www.gstatic.com/webp/gallery/1.jpg'];
var currentImage = 1;

let myDiv = document.getElementById("myBackground");
myDiv.addEventListener('mouseover', function(event) { 
  currentImage = currentImage == 0 ? 1 : 0;
  event.target.style.backgroundImage = `url('${images[currentImage]}')`;
});
#myBackground {
  background-image: url('https://www.gstatic.com/webp/gallery/1.jpg');
  height: 300px;
  width: 300px;
  border: 2px; solid red;
}
<div id="myBackground"></div>

Это версия, использующая только CSS, но ограниченная наведением мыши, сбрасывается при выходе из элемента. 

    #myBackground {
      background-image: url('https://www.gstatic.com/webp/gallery/1.jpg');
      height: 300px;
      width: 300px;
      border: 2px; solid red;
    }
    
    #myBackground:hover {
      background-image: url('https://www.gstatic.com/webp/gallery/2.jpg');
    }
<div id="myBackground"></div>

Вот версия, которая добавляет класс в CSS при наведении курсора. 

let myDiv = document.getElementById("myBackground");
myDiv.addEventListener('mouseover', function(event) { 
  event.target.classList.add('myOverride');
});
        #myBackground {
          background-image: url('https://www.gstatic.com/webp/gallery/1.jpg');
          height: 300px;
          width: 300px;
          border: 2px; solid red;
        }
        
        #myBackground.myOverride {
          background-image: url('https://www.gstatic.com/webp/gallery/2.jpg');
        }
<div id="myBackground"></div>
...