[b]今天做了一个点击一个链接就在相应位置出现图片的DEMO:[/b]
[b]javascript代码:[/b]
<div class="cnblogs_code">
??
[b]html代码:[/b]
?
<div class="cnblogs_code">[b]最终效果(位置和效果都可以自己写css来控制):[/b]
<img src="http://pic002.cnblogs.com/images/2011/355379/2011120215552311.jpg" alt="" width="423" height="474">
?
DEMO可以在附件下载
?
[list]
[*][url=http://dl.iteye.com/topics/download/60248c22-254a-3503-98a7-f56518d0f70d]photo.rar[/url] (113.3 KB)
[*]下载次数: 10
[/list]
[b]javascript代码:[/b]
<div class="cnblogs_code">
<script>
function showPic(whichpic){ //把这个函数命名为showPic,给这个函数的参数命名为whichpic
var souce = whichpic.getAttribute("href"); //把它的路径存入变量souce
var placeholder = document.getElementById("placeholder") //获取placeholder的位置,把把它赋给变量placeholder
placeholder.setAttribute("src",souce);//使用setAttribute方法对placeholder元素的src属性进行刷新
}
</script>
??
[b]html代码:[/b]
<h1>Snapshots</h1>
<ul>
<li><a href="images/01.jpg" onclick="showPic(this);return false;" title="one" >第一张图片</a></li>
<li><a href="images/02.jpg" onclick="showPic(this);return false;" title="two" >第二张图片</a></li>
<li><a href="images/03.jpg" onclick="showPic(this);return false;" title="three" >第三张图片</a></li>
<li><a href="images/04.jpg" onclick="showPic(this);return false;" title="four" >第一张四片</a></li>
</ul>
<img id="placeholder" src="images/06.jpg" / alt="图片库">
?
<div class="cnblogs_code">[b]最终效果(位置和效果都可以自己写css来控制):[/b]
<img src="http://pic002.cnblogs.com/images/2011/355379/2011120215552311.jpg" alt="" width="423" height="474">
?
DEMO可以在附件下载
?
[list]
[*][url=http://dl.iteye.com/topics/download/60248c22-254a-3503-98a7-f56518d0f70d]photo.rar[/url] (113.3 KB)
[*]下载次数: 10
[/list]