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

r囧r小猫 2022-08-20 15:08 183阅读 0赞

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

发表评论取消回复

表情：

评论列表（有 0 条评论，183人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue 点击图片放大显示功能

1 方式一：列表中感应鼠标显示大图 ![在这里插入图片描述][ea4b3a1f831349cea22500b85547d702.png] 我管理后台使用的是 elem

红太狼/ 2023年10月08日 22:49/ 0 赞/ 42 阅读

相关 Tkinter(二) ｜点击按钮显示图片

解决办法： -------------------- 出现的问题 from tkinter import from PIL import Image

r囧r小猫/ 2022年12月12日 15:07/ 0 赞/ 273 阅读

相关 vue实现点击图片放大显示功能

[https://blog.csdn.net/qq348843576/article/details/103261567][https_blog.csdn.net_qq3488

ゝ一纸荒年。/ 2022年11月17日 13:53/ 0 赞/ 328 阅读

相关 uni-app中点击uni-list-item的内容，页面跳转不显示

今天犯了一个非常简单但是致命的错误这是我一开始的代码： <uni-list-item title="个人信息"

ゞ浴缸里的玫瑰/ 2022年11月10日 14:26/ 0 赞/ 407 阅读

相关显示区域

本文所说的是浏览器窗口的可视区域大小，不是浏览器窗口大小，也非页面尺寸。在没有声明DOCTYPE的IE中，浏览器显示窗口大小只能以下获取： document.bo

Bertha 。/ 2022年08月26日 15:26/ 0 赞/ 180 阅读

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

<html> <head> <title>Image Gallery</title> </head> <body> <h1>Sn

r囧r小猫/ 2022年08月20日 15:08/ 0 赞/ 184 阅读

相关点击显示再次点击隐藏

<script> $(function()\{ $('\a').click(function()\{//点击a标签 if($('

亦凉/ 2022年06月07日 09:06/ 0 赞/ 372 阅读

相关 jquery 点击按钮，再显示4张图片，再次点击，再次显示4张图片

这里的图片用内容表示，可以自行换乘图片主要看方法。 <!DOCTYPE html> <html lang="en"> <head>

雨点打透心脏的1/2处/ 2022年06月05日 12:38/ 0 赞/ 301 阅读

相关点击文字显示相对应的图片

1：先设置一个装按钮的“盒子”，因为这样方便设置按钮的居中和一些其他样式，在HTML中设置相对应点击按钮，给这几个按钮设置一个共同的div，方便设置他们的共同样式，给他们的共同

刺骨的言语ヽ痛彻心扉/ 2022年02月23日 13:23/ 0 赞/ 333 阅读

相关在Winform中点击按钮时不显示边框

前段时间在做一个项目时，由于系统是使用触摸屏进行操作的，在用户点击按钮时会有一个边框出现，刚开始我对按钮的属性进行了如下设置：　　　　btnWineCupI

素颜马尾好姑娘i/ 2021年12月24日 04:13/ 0 赞/ 313 阅读