注册 登录  
 加关注
查看详情
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

OK之家

原创心得 仅供交流 欢迎交友

 
 
 

日志

 
 
关于我

本人是一个电脑网络爱好者,为了自娱自乐,也为了同有心人交流心得,特制作了这个博客,希望能抛砖引玉.更希望能得到大家的帮助,请常来看看,多多指教.

[原创]HTML代码学习小结(四)图片代码  

2007-07-08 17:03:59|  分类: 博客网页技巧 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

 

[原创]HTML代码学习小结()

图片代码

   为了美化网页,经常用图片来进行点缀,有时图片还被用作图片广告。<img src="图片地">是最简单的插入图片代码。

   图片网址查找方法:鼠标点一下某张图片(必须是网上的图片,电脑上保存的图片必须首先上传到网上),也就是选择了它,然后右键该图片,点击属性,就会看到这张图片的地址了,复制下来替换掉图片地址四个字,然后粘贴到网页或博客中就插入一张图片了。

  一、限制图片大小:

  <img src="图片地址" width="250" height="200">

  width”是图片的宽度像素,“height”是高度,不设就是原图,如果改成width="100%" height="100%",就是全屏显示了。

二、图片滚动

  在前面的代码小结中已经讲到文字的运动及运动方向、文字链接、表格背景色等等,都可以运用到图片中。<marquee></marquee>是滚动代码,同样适用于图片,

<marquee><img src="http://img258.echo.cx/img258/6762/17zc.gif" ></marquee> 是最简单的图片滚动代码,再加上图片大小,运动方向(direction)、运动速度(scrollamount)、对齐(align)等,就是完整的滚动图片代码了。

<marquee scrollamount=1 height=200 direction=up><p align=center><img src="http://img258.echo.cx/img258/6762/17zc.gif" width="250" height="200"></p></marquee>

   上面第一个height是图片运动的高度,第二个height是图片显示的高度,图片运动的高度不能小于图片显示的高度,否则无法看到整张图片。其他的代码在以前都解释过了,不再赘述。

[原创]HTML代码学习小结(四)图片代码 - ok -         OK之家

  图片从右向左移动因为是默认的移动方向,所以可以省略方向,图片运动的宽度和高度不设就是满屏从右向左移动;图片的张数可以任意添加。

<marquee scrollamount=1 width="250" height="200"><img src="第一张图片" ><img src="第二张图片" ></marquee>
、背景图片

   表格<TABLE>可以用到背景图<background>,
<TABLE height="200" width="250" background=http://img258.echo.cx/img258/6762/17zc.gif >
<td></td></TABLE>

   如果要背景图居中,就增加成:

<TABLE align=center height="200" width="250" background=http://img258.echo.cx/img258/6762/17zc.gif >
<td></td></TABLE>
   上面的代码需要说明的是:
一是TABLE虽然是表格,但一定要与单元格<td></td>一起使用,而且要设置高宽,否则无法显示;二是如果要在表格中输入文字,就在<td></td>之间加上<DIV align=center><FONT face=黑体 size=8 color=#00ff00 >文字内容</FONT>, 而且背景图的高度会随着文字的多少而自动改变(虽然已经设置了表格的高度)。变成了:

<TABLE align=center height="200" width="250" background=http://img258.echo.cx/img258/6762/17zc.gif >
<p align=center><td><DIV align=center><FONT face=黑体 size=8 color=#00ff00 >文字内容</FONT></td></P></TABLE>
效果如下:

文字内容

四、给滚动图片加超链接

<marquee scrollamount=1 onmouseover=stop() >><a href= http://shop33976411.taobao.com/ target=_blank><img src="http://photo.yesky.com/pictures/2007/07/1678179_66863439.jpg" ><a href= http://my.liuyanba.com/index.asp?user=dyzyb target=_blank><img src="http://photo.yesky.com/pictures/2007/07/1678179_87620043.gif">

</a></marquee>

说明:

   这是两张分别带不同链接网址,默认从右到左滚动的图片。代码其实与上面的滚动图片相比,只是没有设置运动方向(就是默认从右到左);滚动区域(就是满屏);图片大小也未设(就是原图大小);另外增加了鼠标指向停止运动,移开鼠标继续运动(onmouseover=stop() >);并添加了图片链接的网址(<a href= http://shop33976411.taobao.com/ target=_blank>

[原创]HTML代码学习小结(四)图片代码 - ok -         OK之家[原创]HTML代码学习小结(四)图片代码 - ok -         OK之家

五、图片切换

介绍一种效果很好的图片切换代码,比较复杂,你自己去揣摩吧!(我在其他网页上试过,不知怎么到了网易上就不能显示了)


                [原创]HTML代码学习小结(四)图片代码 - ok -         OK之家  

代码如下:绿色是图片的网址,可以替换。

<SCRIPT language=JavaScript>
var imgUrl=new Array();
var imgLink=new Array();

imgUrl[1]="http://img.photo.163.com/L2FvOFOV1jydB4cNxUh-kw==/135389463799827076.jpg";
imgLink[1]="http:///";
imgUrl[2]="http://img.photo.163.com/Ch0s0TIi1inbDSO7ynWifw==/136515363706664365.jpg";
imgLink[2]="http://";
imgUrl[3]="http://img.photo.163.com/_UM0wi31ZH1B6al96t2wMg==/139330113473783339.jpg";
imgLink[3]="http://";
imgUrl[4]="http://img.photo.163.com/Vkf2zqwtKNcNVJu8iWM1rg==/140456013380438191.jpg";
imgLink[4]="http:/";
imgUrl[5]="http://img.photo.163.com/Ot1LTYW4y1ScQWYbw3V2ew==/140456013380438179.jpg";
imgLink[5]="http:/";
imgUrl[6]="http://img.photo.163.com/HvMv6JdzjQDjYiaCmjQWpw==/142989288170827715.jpg";
imgLink[6]="http:/";
imgUrl[7]="http://img.photo.163.com/zOS-cjoODins1ch66DaILw==/143552238124245128.jpg";
imgLink[7]="http:/";
var adNum=0;

function playTran(){
if (document.all)
imgInit.filters.revealTrans.play();
}

var key=0;
function nextAd(){
adNum=adNum%4;
adNum++ ;


if( key==0 ){
key=1;
} else if (document.all){
imgInit.filters.revealTrans.Transition=25;
imgInit.filters.revealTrans.apply();
playTran();

}
document.images.imgInit.src=imgUrl[adNum];
theTimer=setTimeout("nextAd()", 6000);
}


function goUrl(){
jumpUrl=imgLink[adNum];
jumpTarget='_blank';
if (jumpUrl != ''){
if (jumpTarget != '')
window.open(jumpUrl,jumpTarget);
else
location.href=jumpUrl;
}
}
</script>
<a href=""><img style="FILTER: revealTrans(duration=2,transition=10);border-color:black;color:#000000" src="" width=550 height=400 border=0 class=img1111 >


  评论这张
 
阅读(1005)| 评论(2)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018