переключатель изображения с чистым javascript

Question

, поэтому я пытаюсь сделать наведение курсора только с помощью javascript, чтобы изображение не отображалось для seo. Я сначала установил его в html, чтобы получить css правильно, и я делаю все, что появляется с document.write, так что он может быть сгенерирован с помощью javascript (мои знания js ограничены). поэтому с html я делаю вещи с

<img src="img/brokenarrowwear-googleplus.png" onmouseover="this.src='img/brokenarrowwear-google-circle.png';" onmouseout="this.src='img/brokenarrowwear-googleplus.png';"/> 

но так как он использует «» и «это не работает. Я пробовал делать это как

document.write(' <img src="img/brokenarrowwear-googleplus.png" onmouseover="this.src=' + 'img/brokenarrowwear-google-circle.png' + ';" onmouseout="this.src=' + 'img/brokenarrowwear-googleplus.png' + ';"/> ') 

но это тоже не работало. Кто-нибудь знает, как я могу сделать чистый javascript? Я нашел

$("img.image-1").mouseenter(function() { 
    $(this).replaceWith($('<img src="~/Content/images/prosecutor_tile_b.jpg">')); 
}); 

но я не думаю, что это сработает.

Answer 1

Простой встроенный чистый раствор Javascript:

<script> 
      document.write("<img src=\"http://placehold.it/150x150?text=image1\" onmouseover=\"this.src='http://placehold.it/150x150?text=image2'\" onmouseout=\"this.src='http://placehold.it/150x150?text=image1'\" />");  
</script> 

Текст говорит "image1" и при наведении курсора мыши текст в изображение будет сказать "image2"

Answer 2

Может быть, это может помочь:

<img id="mypic" src="img/brokenarrowwear-googleplus.png" onmouseover='pictureChange(true)' onmouseout='pictureChange(false)'> 

Функциональный рисунокизменениеизмерений:

function pictureChange(change){ 
    If(change==true){ 
     document.getElementById("mypic").src="img/brokenarrowwear-googleplus.png"; 
    }else{ 
    document.getElementById("mypic").src="img/brokenarrowwear-google-circle.png"; 
    } 
} 

Answer 3

Проблема не в скрипте. Я вижу это в источнике скрипта, но я не вижу его в отображаемом html, на самом деле отсутствует весь тег img. Значение У вас есть какой-то тип рендеринга или другой скрипт удалил его.

Давайте посмотрим, связано ли это с встроенным javascript и сбрасыванием с помощью обратных косых черт: удалите атрибуты onmouseover и onmouseout из google img, дайте ему id = "googlelogo" и добавьте следующий скрипт в конце ваше тело:

<script> 
document.getElementById("googlelogo").onmouseover = function() { 
    this.src = "img/brokenarrowwear-google-circle.png"; 
    } 
document.getElementById("googlelogo") .onmouseout = function() { 
    this.src = "img/brokenarrowwear-googleplus.png"; 
    } 
</script>