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

最新推荐文章于 2023-07-05 15:07:39 发布

刘小妞

最新推荐文章于 2023-07-05 15:07:39 发布

阅读量541

点赞数

分类专栏： JavaScript 文章标签： javascript 函数

本文链接：https://blog.csdn.net/liuwengai/article/details/50790312

版权

JavaScript 专栏收录该内容

67 篇文章 1 订阅

订阅专栏

<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;
}