Element.innerHTML
innerHTML sets or gets the HTML syntax describing the element's
descendants
innerHTML
means the HTML that comes between the start and end HTML tags. Images don't have innerHTML
I am not sure what you want to achieve.
If you want to have a text displayed onmouseover
, you can use the title
attribute to do that.. for example:
<img src="smiley.gif" alt="Smiley face" title="Hello" />
If you are trying to replace the image with text on onmouseover
... then as an example (only to show the possibilities), the following code will hide the image & display a text onmouseover
and make the image visible & remove the text onmouseout
(although not very satisfactorily IMHO, more work has to be done on the code to improve it)
Please note: There shouldn't be any gap between the image tag and the span for this particular code to work. Also, a negative margin-left
added to the span element can make it appear over the location of the image.
<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';
}
Good luck
:)