html预览图片
A. 预览html文件时,图片被阻止了无法看出html中的图片内容,如何才能看到图片,双击打开又看得到
这个问题我也遇见过,同样格式的图片就有那么一两张,可以预览但是放入后台就是不显示,原因不明。你把图片用ps重新另存为“web所用格式”再上传试试!
B. JS怎么实现图片预览效果
<form action="" method="post" enctype="multipart/form-data" name="form1">
<img src=" " name="image" border=0 id="img"/>
<br />
<input name="picture" type="file" id="picture" onchange="img.src=this.value" />
</form>
不需要按钮,直接触发onchange事件就能实现~~~
C. 求可以预览图集的HTML代码,可以预览本地图片的:如一段可以选择批量选择本地图片,然后显示出来。
上懒人图库,里边找效果,很多的
D. html如何实现鼠标悬停缩略图,显示大图片(浏览器窗口上下左右居中显示)
可以用js来实现
应该获取屏幕的分辨率:window.screen.width,
还有把图片固定在屏幕上:position:fixed;
代码如下:
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>测试网页</title>
<styletype="text/css">
#listtrtdspan.hid{display:none;}
#listtrtda{}
#listtrtda:hoverspan.hid{display:block;position:fixed;}
</style>
<scripttype="text/javascript"src='jquery.js'></script>
<scripttype="text/javascript">
$(function(){
$('#show').hover(function(){
varimg=newImage();
img.src='1.png';
$('#hidImg').css('position','fixed');
$('#hidImg').css('left',(window.screen.width-img.width)/2+'px');
$('#hidImg').css('top',(window.screen.height-img.height)/2+'px');
});
});
</script>
</head>
<body>
<tableid="list"border="1"align="left"cellspacing="0">
<tr>
<td>
测试<br/>
<a>
<imgsrc="1.png"border="1"id="show"/>
<spanclass="hid">
<imgborder="1"id="hidImg"src="1.png"/>
</span>
</a>
</td>
</tr>
</table>
</body>
</html>
E. html表格中怎么浏览图片
<tableborder='1'>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr>
<td><imgsrc=''></td>
<td><imgsrc=''></td>
<td><imgsrc=''></td>
</tr>
<tr><td>7</td><td>8</td><td>9</td></tr>
</tabe>
F. HTML点击浏览的图片如何显示
<input type="file" name="file1" onchange="img1.src=file1.value;"/>
<img name="img1"/>
不过在firefox中没用
G. html 浏览图片,替换原来图片
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script>
function aa(url){
if(document.getElementById("file").value.length!=0){
document.getElementById("img").src=url;
}
//document.getElementById("img").src=url;
}
</script>
</head>
<body>
<img src="1.jpg" id="img"/><input type="file" id="file" onfocus="aa(this.value)"/>
</body>
</html>
亲测成功
H. html怎么在页面上显示图片
直接放来一个<img> 标签就行了源。格式为<img src="你的图片路径" />,步骤如下:
1、添加<img> 标签,资源“src”里面填写本地图片的路径名:
img标签定义及使用说明:
<img> 标签定义 HTML 页面中的图像。
<img> 标签有两个必需的属性:src 和 alt。
注释:从技术上讲,图像并不会插入 HTML 页面中,而是链接到 HTML 页面上。<img> 标签的作用是为被引用的图像创建占位符。
提示:通过在 <a> 标签中嵌套 <img> 标签,给图像添加到另一个文档的链接。
(8)html预览图片扩展阅读:
HTML:超文本标记语言,标准通用标记语言下的一个应用。
“超文本”就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素。
超文本标记语言的结构包括“头”部分(英语:Head)、和“主体”部分(英语:Body),其中“头”部提供关于网页的信息,“主体”部分提供网页的具体内容。
网络-HTML
I. 如何将html代码输出预览---以图片方式查看
html文件是不能以图片方式查看的~~你可以先用IE打开HTML文件,再截图下来~
J. 3、javascript+CSS+Html5实现图片预览(本地和网络图片)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Transform</title>
<style type="text/css">
.test-box{
width:600px;
margin:50px auto;}
.pic{
-webkit-transition:all 1s ease-in-out;
transition:all 1s ease-in-out;
cursor:pointer;}
.top-pic{
position:absolute;
transform:scale(0,0)}
.test-box:hover .top-pic{
-webkit-transform-origin:top right;
-webkit-transform:scale(1,1);}
.test-box:hover .bot-pic{
-webkit-transform:scale(0,0);
-webkit-transform-origin:bottom left;
opacity: .5;
-webkit-transform:rotate(120deg);
-webkit-transform-origin:bottom left;
}
</style>
</head>
<body>
<div class="test-box">
<img class="pic top-pic" src="test-pic01.jpg" />
<img class="pic bot-pic" src="test-pic02.jpg" />
</div>
</body>
</html>
随便写了几个效果,没有用到JS,不过要用到JS只要把触发事件替换掉上面的hover就行了,比如:
$(".button").click(function () {
。。。
});
这里面用到CSS3,所以请不要用IE11以下的低版本浏览器,不然你啥都看不见