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

请耐心等待我是学习javascript的新手（自学）！我通常是一个从我的网页浏览器上自己找到答案，但到目前为止我还没有找到任何资源来解释如何完成以下步骤：使用onmouseover将文本超链接更改为图像超链接？

所以，基本上我想要做的就是改变这个（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”，而使用相同的图像超链接。

这似乎是一个非常简单的问题，但我不知道足以确定我想要做什么甚至是可能的。如果这不可能，那我就想知道任何一种方式; P。提前致谢！

来源

2012-09-08 Jesse Baker

使用jQuery是一个选项？ – davidbuzatto

@davidbusatto：我还没有学过jQuery，所以没有大声笑。如果我需要学习jQuery来做到这一点，请让我知道。我不想浪费任何时间。 –

你不需要学习jquery，但是如果你想尝试它，我已经包含了一个低于 –

如果你确定与使用jQuery，你可以使用.html()和.hover()

http://jsfiddle.net/u8fsU/

来源

2012-09-08 02:12:58

我认为我的网络浏览器可能是一个错误。我检查了小提琴，当我将鼠标悬停在“扬声器”上时就消失了。没有图像:(。 –

这可能是你的浏览器没有及时加载图像，它会被缓存在我的浏览器中，但不会在你的浏览器中，IE7仍然可以使用这个功能 –

好吧，这听起来像我需要学习jQuery 。非常感谢你的帮助！ –

尝试这样的事情让你开始（不完整的，也没有测试的解决方案）：

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属性和方法。

来源

2012-09-08 02:04:06 ziesemer

的jquery选项，它看起来会工作......但它甚至不改变SPEAKERS？我的网络浏览器能成为一个因素吗？我正在使用IE7？ –

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

回答

相关问题