Question

请耐心等待我学习javascript（自学）全新！我通常只是通过网页浏览找到自己的答案，但到目前为止，我还没有找到任何解释如何完成以下内容的资源：

所以，我基本上只想改变这个（HTML）：

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

使用javascript

到图像。

图像与html和js保存在同一文件夹中。据我所知，使用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";
 }

为清楚起见，我想做的就是使用'onmouseover'将文本（“SPEAKERS”）更改为图像，同时在过程中使用相同的超链接。

这似乎是一个非常简单的问题，但我不知道是否有可能确定我想做什么。如果不可能那么好，我只想知道两种方式; P。提前谢谢！

Answer 1

尝试这样的事情来帮助你入门（不是一个完整的，也不是经过测试的解决方案）：

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);
}

请参阅https://developer.mozilla.org/en-US/docs/Gecko_DOM_Reference以获取对某些可用DOM属性和方法的良好参考。

Answer 2

如果您对使用jquery感到满意，可以使用.html()和.hover()

http://jsfiddle.net/u8fsU/

使用onmouseover将文本超链接更改为图像超链接？

2 个答案: