OnMouseOver

[kookie09]

hey, I want to be able to change text to an image when the user puts thier mouse over it, is this possible without using another image instead of text?? Anyone know how?

[Webforumz Staff]

There's a couple ways to do it, one would be to use the onmouseover event on a div containing the text, then use .innerHTML to change the contents of the div to an image, and back again for the mouseout.

[kookie09]

could you give me a sample code possibly?? I'm still a bit confused.

[Webforumz Staff]

This is about a medium complex way to do it.

This goes in the HEAD:

Code: Select all

<script type="text/javascript">
	function swapimg(d,i) {
		this.innerHTML = '[img]' + i + '[/img]';
	}
	function swaptext(d,s) {
		this.innerHTML = s;
	}
</script>

This in the BODY:

Code: Select all

<div id="d1" onmouseover="swapimg('d1','myimage.gif');" onmouseout="swaptext('d1','Something');">Something</div>

[kookie09]

Thanks a TON.. now that I see it its coming back to me.. works GREAT!

[avitar.net]

a better way is to instead just hide the Div element, that way your borwser does not need to redraw/or redownload the image as in the case of bad rollovers.