<body>
<table><tr><td id="otd"><div></div><img/><img/><hr/><img/></td></tr></table>
<script language="JavaScript" type="text/javascript">
function set()
{
var o = document.getElementById("otd");
var cns = o.childNodes;
for(var i=0;i<cns.length;i++)
{
var __temp = cns[i];
if(__temp.tagName!=null){
if(__temp.tagName.toLowerCase() == "img")
{
__temp.width = 40;
__temp.height = 40;
}
}
}
}
set();
</script>
</body>
<!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">
<!-- DW6 -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>shawl.qiu template</title>
<style type="text/css">
/* <![CDATA[ */
/* ]]> */
</style>
<script type="text/javascript">
//<![CDATA[
window.onload=function(){
fResizeImg(400, 300, 'table');
//fResizeImg(500, 500);
}
/*------------------------------------------------------*\
* Subject: 使用 javascript 函数 完美控制页面图片显示大小 By shawl.qiu
* 使用:
* --------------------------------------
* 1. Javascript 脚本块
* window.onload=function(){
* fResizeImg(500, 500, 'img');
* //fResizeImg(500, 500);
* }
*
* 2. html body 标签
* <body onload="fResizeImg(500, 500, 'textMain');" >
* --------------------------------------
* 注: 必须在页面加载完毕后使用本函数(这是基本的客户端应用概念)
\*-------------------------------------------------------*/
//---------------------------------begin function fResizeImg();
function fResizeImg(w, h, id){
var img='';
var obj;
if(id==undefined)obj=document.images;
else obj=document.getElementById(id).getElementsByTagName('img');
for(var i=0; i<obj.length; i++){
img=obj[i];
if(img.width>w&&(img.height<img.width)){
img.height=img.height-(img.height/(img.width/(img.width-w)))
img.width=w;
}else if(img.height>h&&(img.height>img.width)){
img.width=img.width-(img.width/(img.height/(img.height-h)))
img.height=h;
}
img.onclick=function(){
try{ imgPopup.close();} catch(e){}
imgPopup=open('#', 'imgurl', 'width=500, height=500, left='+(screen.availWidth-500)/2+
', top='+(screen.availHeight-500)/2)
imgPopup.document.write('<script>document.onclick=function(){ close();} /* 单击关闭窗口 */ <\/script>');
imgPopup.document.write('<img src="'+this.src+'"/>'+
'<script>'+
'var w, h;'+
'var img=document.images[0];'+
'if(navigator.appName=="Opera"){w=img.width+10; h=img.height+40} else {w=img.width+10; h=img.height+25};'+
'self.resizeTo(w, h);'+
'self.moveTo((screen.availWidth-img.width)/2,(screen.availHeight-img.height)/2)'+
'<\/script>'+
'<style>body{margin:0; padding:0;} .hd{visibility:hidden;}<\/style>');
imgPopup.document.write('<p class="hd">ok</p>');
imgPopup.document.close();
imgPopup.focus();
}
} // shawl.qiu script
}
//---------------------------------end function fResizeImg();
//]]>
</script>
</head>
<body>
<table width="100%" border="1" id="table">
<tr>
<td><img src="temp/2006-10-15/01.jpg" width="400" height="381" /></td>
<td><img src="mod/system/themes/default/default/images/gi_logo_88_31.png" width="88" height="31" /><img src="images/04.jpg" width="640" height="467" /></td>
<td><img src="mod/system/themes/default/default/images/gi_logo_88_31.png" width="88" height="31" /></td>
</tr>
<tr>
<td><img src="mod/managemain/themes/default/default/images/gi_logo_300_92.png" width="300" height="92" /></td>
<td><img src="images/03_1.jpg" width="832" height="1126" /></td>
<td><img src="images/gi_logo_300_92.png" width="300" height="92" /></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
分享到：
相关推荐
针对给定文件提供的内容，我们将详细探讨在HTML中使用CSS实现图片自适应手机屏幕大小的方法。以下内容将涵盖相关的知识点，包括CSS属性、选择器、以及与响应式设计相关的概念。 首先，我们注意到文件中提供了一段...
2. **响应式设计**：为了确保在不同设备上都能良好展示，可以利用CSS媒体查询来调整图片大小及布局。 3. **兼容性问题**：不同浏览器对HTML表格的支持程度有所不同，因此在开发过程中要注意测试不同浏览器下的显示...
在网页设计与开发的过程中，经常会遇到一个常见的问题：图片加载后将网页中的表格或布局“撑破”，导致页面样式错乱，美观度下降。这个问题在使用Dreamweaver等网页编辑工具进行网页制作时尤为突出。本文将深入探讨...
这种方法既简单又实用，无需指定图片尺寸，能够自动适应图片大小变化。 首先，我们来看一下实现这一效果的HTML结构。在这个例子中，我们使用了一个`<table>`元素，其中包含两行`<tr>`，第一行用于放置图片，第二行...
- `onload`：当图片加载完成后执行`imgzoom`函数，不过示例中的`imgzoom`函数并未给出实现细节，通常用于调整图片大小。 #### 五、注意事项 1. **用户体验**：虽然这种方法可以保护图片，但也可能会影响用户的...
这种方法的优点是可以自定义斜线的颜色和样式，但缺点是不够灵活，如果表格大小变化可能需要调整图片大小。 3. **HTML实体**：使用HTML特殊字符，如`<hr>`标签或Unicode字符（如"\u2501"，表示较粗的水平线），但这...
3. 编写CSS规则以控制图片的显示效果，确保图片在单元格中正确对齐和缩放。 4. 考虑响应式设计，以保证在不同设备上的显示效果。 希望这个关于layui table显示图片的方法能够帮助到你，让你在开发过程中更加...
HTML中的表格（`<table>`）是用于展示结构化数据的标准元素，而在这个"html种table_td 列宽左右可拉伸_搜索条件可展开隐藏demo"中，开发者分享了一个功能丰富的示例，实现了表格列宽的动态调整以及搜索条件的展开与...
其核心原理是在网页中创建一个容器，将图片放入其中，并通过JavaScript控制容器的滚动行为，从而达到视觉上的动态滚动效果。 ### HTML结构设置 在HTML部分，可以看到使用了`<table>`、`<tr>`、`<td>`等标签构建...
本案例中采用了表格的方式，因为表格可以轻松地控制元素的布局，并且具有较好的浏览器兼容性。 #### 三、具体实现 1. **HTML代码结构** HTML部分主要包含一个`<table>`元素，其中嵌套了一个`<tr>`（表格行）和一...
Apache POI库可以帮助我们操作Word文档，如设置样式、调整图片大小等。 为了实现详细教程，你可以按照以下步骤进行： 1. 创建Freemarker模板文件，定义表格和图片的占位符。 2. 在Java代码中，设置Freemarker的...
其中包含了一个表格，表格中的两个单元格`<td id="demo1">` 和 `<td id="demo2">` 分别用于存放图片和复制图片内容以达到滚动效果。 #### CSS样式分析 虽然在给出的代码片段中没有直接的CSS样式定义，但我们可以...
`<img>`标签用于插入图片，并通过`height`属性保持所有图片大小一致。 ### CSS样式 CSS部分较为简单，主要通过`<style>`标签内的一行代码`img{margin-left:3px;}`，为所有图片添加了左边距，使图片之间保持一定的...
4. **控制图片大小**：可以使用CSS的`width`和`height`属性限制图片大小，使其适应单元格。例如： ```css td img { width: 100px; height: auto; } ``` 这将确保图片宽度固定，高度按比例缩放，保持原始纵横...
3. **图片大小不合适**：可以通过调整`<img>`标签中的`height`和`width`属性值来改变图片显示大小。 #### 五、总结 通过上述步骤，我们可以在Magento后台订单页面直接展示商品图片，极大地提升了后台操作人员的...
`），可以控制滚动区域的大小。 #### JavaScript实现滚动 虽然提供的代码片段没有直接包含JavaScript，但通常会结合JavaScript或jQuery来实现自动或交互式滚动效果。常见的方法包括使用`setInterval()`定时器控制...
- **CSS样式**：`overflow:hidden`用于隐藏溢出内容，`height`和`width`定义容器大小，`background`和`color`设置背景和字体颜色。 - **DOM操作**：`document.getElementById`获取元素，`innerHTML`获取或设置HTML...
3. **并发控制**：对于大量图片上传，应考虑并发数控制，避免对服务器造成过大的压力。 4. **用户体验**：提供明确的上传进度指示和反馈信息，增强用户操作的直观性和友好性。 总之，AJAX多图片上传技术不仅提升了...
- **响应式设计**：在移动设备上，可能需要使用媒体查询或其他响应式技术调整图片大小和布局，以适应不同的屏幕尺寸。 #### 结论 图片横向滚动不仅是一种视觉上的美化手段，更是网页设计中功能性和实用性的重要...
2. 文件格式控制：插件可以控制文件的格式，限制上传的文件类型，例如限制上传图片、文档、音频、视频等。 3. 文件数量控制：插件可以控制上传文件的数量，限制上传文件的个数。 4. 多浏览器兼容：插件兼容多种...