小图片

生活知识 2023-05-10 19:34生活知识www.buyunw.cn

1、html怎么把10张小图片排列成这个样子

2、如何使用html在大图片旁边添加两张小图片?

嗯你使用了这一个都会有一个插入的软件你看一下上面没有插入你可以用点一下那个插入可以

3、html点击页面上的小图片弹出大图片(急,急,急)

<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">

<html>

 <head>

 <title>NewDocument</title>

 <linkrel="stylesheet"rev="stylesheet"href="style.css"type="text/css"/>

 <script type="text/javascript">

        functionopenContent(x){

                  document.getElementById("content").style.display="block";

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

                  document.getElementById("content_img").style.display="block";

        }

        functioncloseContent(x){

                  document.getElementById("content").style.display="none";

                  x.parentNode.style.display="none";

        }

 </script>

 <styletype="text/css">

        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>

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

 </div>

 <divid="nav">

        <ul>

                  <li><ahref="index.html"target="_self">首页</a></li>

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

                  <li><ahref="diary.html"target="_self">日志</a></li>

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

                  <li><ahref="photo.html"target="_self">相册</a></li>

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

                  <li><ahref="#"target="_self">留言</a></li>

        </ul>

 </div>

 <divid="main">

        <divid="photo">

                  <h4>|图片列表</h4>

                  <table>

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

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

                                    <td><ahref="javascript:openContent(2);">图片</a></td></tr>

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

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

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

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

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

                                    <td><ahref="javascript:openContent(5);">图片</a></td></tr>

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

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

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

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

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

                                    <td><ahref="javascript:openContent(8);">图片</a></td></tr>

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

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

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

                  </table>

        </div>

 </div>

 <divid="content"></div>

 <divid="content_img">

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

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

 </div>

 <divid="bottom">

        底部个人信息

 </div>

 </body>

</html>

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

追问

不行,avascript:openContent(0);">图片这个位置图片换成图片的地址是吧,这个是放要放大的图片是吧,地址放在哪个才可以实现?

追答

在根目录下新建一个名为img的文件夹,把要放大的图片放在这个文件夹下。

单击这个图片后,在openContent(0)方法里,将这个控件的alt赋值给content_img,即document.getElementById("content_img").getElementsByTagName("img")[0].src=document.getElementsByTagName("img")[x].alt;所以,这个alt就是要放大图片的路径,img/1.jpg,img是文件夹名,1.jpg是文件名称。

4、html中表格怎么用很小的图片铺满背景

尼嚎~~HTML表格无非就是<table>标签的一些延伸,也是html范涛,可以运用常规的css写法实现背景平铺。即background:url(想要铺满图片的地址/路经)就可以,浏览器会自动解析为平铺的,不用再代码设置平铺。希望能帮到你。

5、html页面里面如何实现点击小图放大查看大图

楼主的意思我看明白了,这里可以将图片作为背景插入盒子中,那么怎么实现以短边剪裁图片呢,这里涉及一个background参数,补充一下

background-size宽 高;

只设置其中一个值,另一个值设置为auto,就能将图片等比例缩放。将短边值设为100px,长边auto,就可以实现了。配合background里面图片位置属性,就能调节图片哪一部分显示出来,比如backgroundurl()no-repeatcenter center;background-size100px auto

就能让竖拍实现。横拍100px和auto换位置就可以了。

再补充两个参数

background-sizecover (铺满图片,可能超出)
background-sizecotain(铺满图片,宽高之一铺满即停止)

6、求高手做个html中图片效果 简单的代码最好

<!DOCTYPEHTMLPUBLIC"-//W3C//DTDXHTML1.0Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>DIV展开收缩</title>
<scripttype="text/javascript">
varmh=30;//高度
varstep=1;//每次变化的量
varms=10;//循环时间
functiontoggle(o){
if(!o.tid)o.tid="_"+Math.random()100;
if(!window.toggler)window.toggler={};
if(!window.toggler[o.tid]){
window.toggler[o.tid]={
obj:o,
maxHeight:o.offsetHeight,
minHeight:mh,
timer:null,
action:1
};
}
o.style.height=o.offsetHeight+"px";
if(window.toggler[o.tid].timer)clearTimeout(window.toggler[o.tid].timer);
window.toggler[o.tid].action=-1;
window.toggler[o.tid].timer=setTimeout("anim('"+o.tid+"')",ms);
}
functionanim(id){
vart=window.toggler[id];
varo=window.toggler[id].obj;
if(t.action<0){
if(o.offsetHeight<=t.minHeight){
clearTimeout(t.timer);
return;
}
}
else{
if(o.offsetHeight>=t.maxHeight){
clearTimeout(t.timer);
return;
}
}
o.style.height=(parseInt(o.style.height,10)+t.actionstep)+"px";
window.toggler[id].timer=setTimeout("anim('"+id+"')",ms);
}
</script>
<styletype="text/css">
div.xx{border:solid1px;overflow:hidden;height:300px;}
div.xxh5{border:solid1px;border-width:001px;padding:0;margin:0;height:28px;line-height:30px;cursor:pointer;background:#eee;}
</style>
</head>
<body>
<divclass="xx">
<h5onclick="toggle(this.parentNode)">点击此处层伸缩</h5>
//这里就放你的图片img标签

</div>
</body>
</html>

就是这样的下面的自动浮动就OK了!~

追问

点击关闭和展开后按钮能够变化,图片缩上去后字变成展开,点击展开后字变成关闭。而且图片是切换过来的一个大图和小图

追答

你在放一个div保存小图每当要缩上的时候div显示设置最小高度隐藏缩上按钮

显示展开按钮
展开和缩上相反

我在上班没时间敲代码本回答被提问者和网友采纳

Copyright@2015-2025 不孕网版板所有All right reserved