猪窝

终于进入激动人心的第四章了，从本章开始，需要接触大量的实例分析及效果实现。

今天带来的就是如何实现点击页面的文字链接来更换图片的展示及文字的内容。用CSS也可以实现，但是用JavaScript实现可以更简单，更方便。

让我们先来分析一下这个需求：

首先有大量的图片需要展示，而同时希望用户点击图片，即可在页面内显示结果，而不同单独再弹出页面来观看。同时我们对这个功能的函数进行扩展，在点击链接时不只是更换图片，同时也可以实现文字的更换。

在这里只列出JS代码，html代码可以自由变换：

首先我们来编写点击链接实现图片更换的函数，方便后面的调用

function showPic(whichpic) {

var source = whichpic.getAttribute(”href”);

var pic = document.getElementById(”pictureshow”);

pic.setAttribute(”src”, source) ;

}
JS部分很简单吧，我们先来分析一下。

首先获得用户点击文字链接所要展示的图片地址，然后获得页面显示图片位置的<img>标签的对象，最后用前面获得的地址替换<img>标签的src属性，即可实现点击文字链更换图片显示的效果。

函数很简单，我们在页面中调用。

onclick为调用条件，将链接传给函数showPic(which)作为参数值。

同时，传给链接一个flase条件，来避免浏览器点击链接的默认行为发生，html部分为

<a href=”images/1.jpg” title=”pic1″ onclick=”showPic(this); return false;”>图片链接1</a>

如果想实现鼠标划过（经过）图片就更换，则可以将onclick更改为onmouseover，即可实现

具体的实例可以看这里，已经做好的效果：
点击文字链接更换图片显示效果-JavaScript
如果有问题大家可以直接留言

其他JavaScript学习笔记：

了解DOM，学习DOM： JavaScript学习笔记

了解JavaScript中的对象的概念

JavsScript中的循环与函数

什么是JavaScript

原载：猪窝

转载请注明链接，谢谢