/*
案例需求：点击图片链接，在同一个页面中实现不同图片的切换
使用的技术：使用DOM进行动态地更改图片的地址属性
特点：不用更改HTML代码，只需更改JavaScript代码即可，能够使得网页动态地变化
*/
<!DOCTYPE html>
<html lang="en">
<head>
<title="Image Gallery">
</head>
<body>
<a href="images/fireworks.jpg" title ="a fireworks display " onclick="showpic(this) ; return false"> fireworks </a>
<a href="images/coffee.jpg" title ="a cup of coffee "onclick="showpic(this) ; return false"> coffee</a>
<a href="images/rose.jpg" title ="a red red rose"onclick="showpic(this) ; return false"> rose </a>
<a href="images/big ben.jpg" title ="the famous ciock "onclick="showpic(this) ; return false"> big ben </a>
<img src="images/placeholder.gif" id="placeholder" alt ="my image gallery"> </img>
<script type="text/javascript" src="scripts/showpic.js"> </script>
</body>
<html>
function showpic(whichpic)
{
var source = whichpic.getAttribute("href");
var placeholder= document.getElementById("placeholder");
placeholder.setAttribute("src",source);
/*
事件发生函数：当时间发生时，某一段代码将执行
event=“代码”；
this表示的是当前点击的这个是所需的对象
return false表明不会离开当前页面。
*/
编程艺术02切换网页图片
最新推荐文章于 2024-07-14 15:54:59 发布
2779
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
