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

回答

相关问题