使用純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有關，並且用反斜杠轉義不起作用：從google img中刪除onmouseover和onmouseout屬性，為其指定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>