Turn spoiler button into a image button

[airesofwar]

I'm sure there is a way to use a image for this button instead of the simple button it is now. Can anyone show me the proper code to use to add a image instead?

<div id="spoiler1">CONTENT TO HIDE</div><button title="Click to show/hide content" type="button" onclick="if(document.getElementById('spoiler1') .style.display=='') {document.getElementById('spoiler1') .style.display='none'}else{document.getElementById('spoiler1') .style.display=''}">BUTTON TEXT</button>

[thescientist]

CSS? Or you could try putting an image tag within the button tags. Might be cleaner to move the function out of the HTML tags and into a script tag in the head or externally.

[airesofwar]

CSS? Or you could try putting an image tag within the button tags. Might be cleaner to move the function out of the HTML tags and into a script tag in the head or externally.

Well I am using it on a wordpress site inside the post and widgets. I am not very good with javascript and I'm really trying to stay away from using it externally. How would insert the image tag into the javascript code? Could you give me a example please.

[justsomeguy]

You can just replace the button tag with an image tag. Image tags can have onclick events also.

[airesofwar]

Alright guys thanks for your help I figured it out. Kind of feel a little dumb for asking now >_< Final code I used

<div id="spoiler1">CONTENT TO HIDE</div><button onclick="if(document.getElementById('spoiler1') .style.display=='') {document.getElementById('spoiler1') .style.display='none'}else{document.getElementById('spoiler1') .style.display=''}" title="Click to show/hide content" type="button"><img src="IMAGE URL" /></button>