en utilisant onmouseover pour modifier le lien hypertexte de texte dans un lien hypertexte image?

Question

S'il vous plaît supporter avec moi Je suis tout nouveau à l'apprentissage javascript (autodidacte)! Je suis généralement un seul à trouver des réponses par moi-même, mais je n'ai trouvé aucune ressource expliquant comment accomplir ce qui suit:

Donc, tout ce que je veux faire est de changer ceci (HTML):

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

d'une image en utilisant javascript.

L'image est conservée dans le même dossier que le html et le js. Voici autant que je sache, pour aller avec le 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"; 
} 

Pour plus de clarté, tout ce que je voudrais faire est de changer le texte (« SPEAKERS ») à une image en utilisant « onmouseover » en utilisant la même lien hypertexte dans le processus.

Cela semble être un problème très simple mais je ne sais pas assez pour déterminer si ce que je veux faire est encore possible. Si ce n'est pas possible, je voudrais juste savoir de quelle façon; Merci d'avance!

Answer 1

Si vous êtes ok avec l'aide jquery, vous pouvez utiliser .html() et .hover()

http://jsfiddle.net/u8fsU/

Answer 2

Essayez quelque chose comme ça pour vous aider à démarrer (pas une solution complète, ni testée):

var showImage = function(){ 
    var picture = document.createElement("img"); 
    picture.src = "icon2.png"; 
    picture.href = "link.html"; 

    var speakers = document.getElementById("speakers"); 
    speakers.parentNode.replaceChild(speakers, picture); 
} 

S'il vous plaît voir https://developer.mozilla.org/en-US/docs/Gecko_DOM_Reference pour une bonne référence à certaines des propriétés DOM et méthodes disponibles.