您的位置：首页 > Web前端 > JavaScript

javascript 小函数点击图片在显示区域显示不跳转

2016-03-03 17:38 537 查看

<html>
<head>
<title>Image Gallery</title>
</head>
<body>
<h1>Snapshots</h1>
<ul>
<li><a href="image/fireworks.jpg" onclick="showPic(this); return false;" title="a fireworks display">fireworks</a>//鼠标点击时，不在另一个页面显示，而是在显示区域显示。点击返回false，则不会跳转
</li>
<li><a href="image/coffee.jpg" onclick="showPic(this); return false;" title="a cup of black coffee">coffee</a>
</li>
<li><a href="image/rose.jpg" onclick="showPic(this); return false;" title="a red rose">rose</a>
</li>
<li><a href="image/bigben.jpg" onclick="showPic(this); return false;" title="the famous clock">bigben</a>
</li>

</ul>
<img id="placeholder" src="image/placeholder.gif" alt="my image gallery" />
</body>
</html>

function showPic(whichpic)
{  var source=whichpic.getAttribute("href");//首先检索到图片的地址
var placeholder=document.getElementById("placeholder");//找到被替换图片的位置
placeholder.setAttribute("src",source);//替换  另一种方法 placeholder.src=source;
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

javascript 小函数 点击图片 在显示区域显示 不跳转

javascript 小函数点击图片在显示区域显示不跳转