鼠标悬停时链接图像

linking images on mouseover

本文关键字：图像 链接 悬停 鼠标      更新时间：2023-09-26

我有一个人帮助我设计我的网站一年前左右，需要修复的东西，看起来是不完整的。我有一个图像，取代了一些文本的鼠标悬停。我需要的是替换的图像是可点击的同一链接，文本指向。例如，鼠标悬停在文本"Portfolio"上，图像就会变成我预加载的图像。点击"作品集"文本将用户带到图片库。我想能够点击图像去相同的地方，点击文本。这是为我实现的代码。

html 

<div class="cmDirectory"><a onMouseover="changeimage(myimages[1],this.href)" href="http://www.example.com">Portfolio</a></div>

html用于鼠标悬停在

上时更改的初始照片
<a href="javascript:warp()"><img class="loader" src="/path/to/initialimage.jpg" name="targetimage" border="0"></a>
javascript 

var myimages=new Array()
var gotolink="#"
function preloadimages(){
for (i=0;i<preloadimages.arguments.length;i++){
myimages[i]=new Image()
myimages[i].src=preloadimages.arguments[i]
}
}
preloadimages("/path/to/image1.jpg",
"/path/to/image2")
function changeimage(towhat,url){
if (document.images){
document.images.targetimage.src=towhat.src
gotolink=url
}
}
function warp(){
window.location=gotolink
}

我是一个编码新手，所以请具体与您的答案。看起来我需要在javascript中添加一些内容来定义每个照片的链接。

修改一下:

<a href="javascript:warp()"><img class="loader" src="/path/to/initialimage.jpg" name="targetimage" border="0"></a>

: 

<a name="img_link" href="javascript:warp()"><img class="loader" src="/path/to/initialimage.jpg" name="targetimage" border="0"></a>

，在JavaScript中替换为:

function changeimage(towhat,url){
if (document.images){
document.images.targetimage.src=towhat.src
gotolink=url
}

: 

function changeimage(towhat,url){
if (document.images){
document.images.targetimage.src=towhat.src
document.img_link.href=url;
}
相关文章：