javascript--改變圖像的innerHTML

所以我只是問了一個問題，我已經打了另一個路障。非常感謝stackoverflow社區最近幫助我:)javascript--改變圖像的innerHTML

每當我看到人們改變一些標記的innerHTML，他們使用document.getElementByID（id）.innerHTML。我的圖片沒有ID，也不想給他們每個人一個ID。

這裏是我的代碼：

function clickImages() 
{ 
var images = document.getElementsByTagName("img"); 
for(var i = 0; i < images.length; i++) 
{ 
    var delegate = function() { hover(this); }; 

    images[i].onmouseover = delegate; 
} 
} 

function hover(img) 
{ 
img.innerHTML = "Text!"; 
}

似乎的innerHTML並不像它的工作;當我將鼠標懸停在圖像上時沒有任何變化

在此先感謝！讓我知道如果我能澄清！

來源

2014-04-15 13rave

你試圖改變alt文本或IMG title屬性？這個'hover'函數你想要對圖像做什麼？ –

圖片元素沒有任何內容，所以他們沒有任何innerHTML。 – RobG

哦，我試圖顯示文字而不是圖像。我想這是有道理的。哎呀:) – 13rave

一個圖像本身就是一個被替換的元素，所以沒有innerHTML來代替。

基於您的評論，如果你想相鄰HTML添加到圖像，你可以這樣做：

img.insertAdjacentHTML('afterend', 'HTML code');

你也可以改變「afterend」到「beforebegin」如果你想添加HTML在圖像之前。

寫在圖像本身上會更加複雜，並且需要在透明背景上放置另一個元素，或者使用圖像本身作爲另一個元素的背景或各種其他類似技術。

來源

2014-04-15 04:27:02

有沒有辦法讓我改變圖像來說文字，或者在圖像上寫文字？ – 13rave

你可以做'img.parentNode.replaceChild（document.createTextNode（'text'），img）;' – RobG

非常感謝你！我明白現在好多了！ :) – 13rave

Element.innerHTML

的innerHTML設置或獲取描述元素的後裔

innerHTML HTML語法指來開始和結束HTML標籤之間的HTML。圖像沒有innerHTML

我不知道你想達到什麼。

如果你想有一個文本顯示onmouseover，你可以使用title屬性來做到這一點。例如：

<img src="smiley.gif" alt="Smiley face" title="Hello" />

如果你想用文字來代替上onmouseover圖像...那麼作爲一個例子（只顯示的可能性），下面的代碼會隱藏圖像&顯示文本onmouseover，使圖像可見&刪除文本onmouseout（雖然不是很令人滿意恕我直言，更多的工作，必須對代碼進行以改善它）

請注意：此特定代碼的圖像標籤和跨度之間不應有任何差距。此外，添加到span元素的負margin-left可以使其顯示在圖像的位置上。

<img onmouseover="toText(this)" onmouseout="toImage(this)" src="smiley.gif" alt="Smiley" /><span style="visibility: hidden; margin-left: -30px;">Show Text</span> 

function toText(img) { 

img.style.visibility = 'hidden'; 
img.nextSibling.style.visibility = 'visible'; 
} 

function toImage(img) { 

    img.style.visibility = 'visible'; 
    img.nextSibling.style.visibility = 'hidden'; 
}

好運 :)

來源

2014-04-15 05:13:45 erosman

javascript--改變圖像的innerHTML

回答

相關問題