您的位置：首页 > 百科管理 > 详情

图片点击显示大图片素材-html点击页面上的小图片弹出大图片（急，急，急）

原创：找图网 2023-06-06 05:29:01

在WORD中,如何实现点击其中的一幅小图后让其显示大图

在WORD中插入图片,排列好后,点击其中某一幅小图,选中后单击鼠标右键选择“

超链接

”,在打开的对话框中选择你要显示对应的大图,确定即可。

按住CTRL键点击小图片时就可以显示超链接的大图。

在excel里面怎样做到点击一个小图片跳到大图片显示？

1、电脑打开Excel表格,然后点击插入图片。

2、选中插入的小图片,点击鼠标右键,然后选择超链接。

3、点击超链接后,在原文件或网页中选择要打开的大图,然后点击确定。

4、给小图片插入超链接后,点击小图片。

5、点击小图片后,就可以跳到大图片显示页面了。

html点击页面上的小图片弹出大图片（急，急，急）

<!DOCTYPE HTML PUBLIC "-//W3C//DTDHTML 4.01 Transitional//EN" "

<html>

<head>

<title> New Document </title>

functionopenContent(x){

("content").="block";

("content_img").getElementsByTagName("img")[0].src=("img")[x].alt;

("content_img").="block";

}

functioncloseContent(x){

("content").="none";

x.="none";

}

</script>

table{width:90%;

height:90%;

margin:auto;

text-align:center;

margin-top:20px;}

#photo{margin:auto;

width:1000px;

height:678px;

border:1pxsolid #ccc;

margin:10px;

float:left;}

.photoTitle{height:30px;}

#content{display:none;

position:absolute;

width:100%;

height:100%;

z-index:1;

background:#000;

top:0px;

filter:alpha(opacity=85);}

#content_img{display:none;

position:absolute;

z-index:2;

width:100%;

text-align:center;

top:100px;

left:0px;

}

</style>

</head>

<body>

<div id="top"><div id="txt">成功没有早晚<br/>    努力就有收获</div>

</div>

<ul>

<liclass="bar">|</li>

<liclass="bar">|</li>

<liclass="bar">|</li>

</ul>

</div>

<divid="photo">

<table>

<trclass="photoTitle"><td><ahref="javascript:openContent(0);">图片</a></td>

<trvalign="top"><td><ahref="javascript:openContent(0);"><imgsrc="img/1.png" title="单击显示大图"alt="img/1.jpg"/></a></td>

<trclass="photoTitle"><td><ahref="javascript:openContent(3);">图片</a></td>

<trvalign="top"><td><ahref="javascript:openContent(3);"><imgsrc="img/3.png" title="单击显示大图"alt="img/3.jpg"/></a></td>

<trclass="photoTitle"><td><ahref="javascript:openContent(6);">图片</a></td>

<trvalign="top"><td><ahref="javascript:openContent(6);"><imgsrc="img/2.png" title="单击显示大图"alt="img/2.jpg"/></a></td>

</table>

</div>

<imgsrc="" id="img_dis"/><br/>

<buttononclick="closeContent(this);" id="content_btn">关闭窗口</button>

</div>

底部个人信息

</div>

</body>

</html>

效果如下:(至于再点击大图后效果消失,你可以把关闭窗口按钮触发的代码改成单击后的代码)