Question

Please bear with me I am brand new to learning javascript (self taught)! I am usually one to find answers on my own from just web browsing but so far I haven’t found any resources explaining how to accomplish the following:

So, basically all I want to do is change this (HTML):

<a href="link.html"id="speaker"onmouseover="showImage()"onmouseout="goBack()">SPEAKERS</a>

to an image by using javascript.

The image is kept in the same folder as the html and the js.
Here is as far as I know to go with the javascript:

function showImage()
 {   
 picture = new Image(100,100);
picture.src = "icon2.png";
document.getElementById("speakers").innerHTML = picture.src;
  }

function goBack()
 {   
 document.getElementById("speakers").innerHTML="SPEAKERS";
 }

For clarity, all I would like to do is change the text (“SPEAKERS”) to an image using ‘onmouseover’ while using the same hyperlink in the process.

It seems like a very simple problem but I don’t know enough to determine if what I want to do is even possible. If it’s not possible that’s fine, I would just like to know either way ;P. Thanks ahead of time!

Answer 1

If you’re ok with using jquery, you could use .html() and .hover()

http://jsfiddle.net/u8fsU/