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

原创于 2016-03-03 17:38:45 发布 · 575 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #函数

JavaScript 专栏收录该内容

67 篇文章

订阅专栏

本文介绍了一个简单的图片画廊实现方式，通过使用HTML和JavaScript，可以让用户在不离开当前页面的情况下预览不同的图片。画廊包括四张图片：烟花、咖啡、玫瑰及大本钟。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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