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

.

.

 
 
 

日志

 
 

多图滚动加链接的制作方法  

2011-06-02 15:47:04|  分类: 博客制作(图片类) |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

 

 
多图滚动加链接的制作方法 - 寒冬腊月 - .
 
将向博客新手详细解讲制作过程
撰文:寒冬腊月 

多图滚动加链接的制作方法 - 寒冬腊月 - .

多图滚动加链接的制作方法 - 寒冬腊月 - .

 

多图滚动加链接的制作方法 - 寒冬腊月 - .

多图滚动加链接的制作方法 - 寒冬腊月 - .

多图滚动加链接的制作方法 - 寒冬腊月 - .

 多图滚动加链接的制作方法 - 寒冬腊月 - .

多图滚动加链接的制作方法 - 寒冬腊月 - .

  多图滚动加链接的制作方法 - 寒冬腊月 - .

 

一、静态式多张图片的链接方法.

       下面的效果图是本人博客日记 《看看你,11兔年运势如何?》一文中的一组十二生肖图片.你可以任意点击一张生肖图片,即可进入查看对应生肖2011年的运程情况.

多图滚动加链接的制作方法 - 寒冬腊月 - .
子鼠
多图滚动加链接的制作方法 - 寒冬腊月 - .
丑牛
多图滚动加链接的制作方法 - 寒冬腊月 - .
寅虎
多图滚动加链接的制作方法 - 寒冬腊月 - .
卯兔
多图滚动加链接的制作方法 - 寒冬腊月 - .
辰龙
多图滚动加链接的制作方法 - 寒冬腊月 - .
巳蛇
多图滚动加链接的制作方法 - 寒冬腊月 - .
午马
多图滚动加链接的制作方法 - 寒冬腊月 - .
未羊
多图滚动加链接的制作方法 - 寒冬腊月 - .
申猴
多图滚动加链接的制作方法 - 寒冬腊月 - .
酉鸡
多图滚动加链接的制作方法 - 寒冬腊月 - .
戌狗
多图滚动加链接的制作方法 - 寒冬腊月 - .
亥猪

二、多张滚动图片的链接方法:

 1、如果我们给上述静态不动的图片加上一段滚动及链接代码,那十二张生肖图片就可以滚动起来; 点击任一张生肖图即可进入相对应的被链接页面:

多图滚动加链接的制作方法 - 寒冬腊月 - .
子鼠
多图滚动加链接的制作方法 - 寒冬腊月 - .
丑牛
多图滚动加链接的制作方法 - 寒冬腊月 - .
寅虎
多图滚动加链接的制作方法 - 寒冬腊月 - .
卯兔
多图滚动加链接的制作方法 - 寒冬腊月 - .
辰龙
多图滚动加链接的制作方法 - 寒冬腊月 - .
巳蛇
多图滚动加链接的制作方法 - 寒冬腊月 - .
午马
多图滚动加链接的制作方法 - 寒冬腊月 - .
未羊
多图滚动加链接的制作方法 - 寒冬腊月 - .
申猴
多图滚动加链接的制作方法 - 寒冬腊月 - .
酉鸡
多图滚动加链接的制作方法 - 寒冬腊月 - .
戌狗
多图滚动加链接的制作方法 - 寒冬腊月 - .
亥猪

2、为了编写教程的方便,仅以二张图片滚动加链接;来讲解其代码的构成:

先看一下效果图:

多图滚动加链接的制作方法 - 寒冬腊月 - .
戌狗
多图滚动加链接的制作方法 - 寒冬腊月 - .
亥猪

原始代码如下:

<MARQUEE scrollAmount=3 scrollDelay=20 direction=right width=650 height=80>
<TABLE cellSpacing=0 cellPadding=0 width=100 border=0>
<TBODY>
<TR bgColor=#ffff99>
<TD vAlign=top colSpan=2>
<TABLE borderColor=#ff9900 cellSpacing=0 cellPadding=0 width=99 align=center border=1>
<TBODY>
<TR>
<TD align=middle width="8%"><A href="http://hdly006502.blog.163.com/blog/static/49012263200822694729307/" target=cont><FONT color=#5a1a5d><IMG height=80 src="http://img.blog.163.com/photo/b07a43lpZX5ckPtj59BZmQ==/1157988054187948318.jpg" width=45 border=0><BR>戌狗</FONT></A></TD>
<TD align=middle width="8%"><A href="http://hdly006502.blog.163.com/blog/static/4901226320082269484221/" target=cont><FONT color=#5a1a5d><IMG  height=80 src="http://img.blog.163.com/photo/T0mk13iUP4ttY03Rn1m1SQ==/1977361711392716995.jpg" width=45 border=0><BR>亥猪</FONT></A></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></MARQUEE>

  3、此时想做三张或更多张图片滚动加链接呢?只要将下面这段代码加入到上述代码中即可;

<A href="被链接页面网址" target=cont><FONT color=#5a1a5d><IMG height=80 src="图片地址" width=45 border=0><BR>需要添加的文字</FONT></A></TD>
<TD align=middle width="8%">

  4、说明:红色处"需要添加的文字"尽量少些,以2-5为佳;当然也可不添加文字,那该代码为:

<A href="被链接页面网址" target=cont><IMG height=80 src="图片地址" width=45 border=0></A></TD>
<TD align=middle width="8%">

(注:将该代码加入原代码中时,必须同时将原代码中的:<FONT color=#5a1a5d>和<BR>戌狗</FONT>去掉,否则做出的滚动效果将出现问题;注意这一点就行;)

  5、将添加的代码预先编辑好,然后复制粘贴在原代码第一处的<TD align=middle width="8%">的后面即可;依次类推;

  6、其它代码不变;但选用的图大小要一致,可适当修改原代码中的图片宽(width)、高(height)数值;

多图滚动加链接的制作方法 - 寒冬腊月 - .

 相关文章链接:

   多图滚动加链接的制作方法 - 寒冬腊月 - .  点击进入   怎样正确找准图片的网址

多图滚动加链接的制作方法 - 寒冬腊月 - .

   多图滚动加链接的制作方法 - 寒冬腊月 - .  点击进入   所有代码的添加方法

  

多图滚动加链接的制作方法 - 寒冬腊月 - .

多图滚动加链接的制作方法 - 寒冬腊月 - .

多图滚动加链接的制作方法 - 寒冬腊月 - .

多图滚动加链接的制作方法 - 寒冬腊月 - .

  ◇单张图片『滚动』的制作方法◇  ◇多张图片『滚动』的制作◇
  ◇如何制作图片上飘动的文字  ◇精美的移动图片
  怎样让你的日志文字有背景图  ◇图片加名称左右移动的链接
  ◇直接在图片上写文字的方法  ◇如何用图片制作来回滚动友情链接
  ◇图片屏风开合滚动的制作◇  ◇如何侧边栏多图片向上滚动的代码
  ◇滚动.透明.对开图制作  ◇多样式的滚动图片
  ◇如何给滚动图片加链接  ◇怎样做文字图片的链接
  ◇如何制作多张图片的滚动呢?  ◇滚动图片的代码解析
  ◇多图滚动加链接的制作方法   ◇滚动图片代名称的链接方法
  ◇图中图移动的制作方法◇  ◇滚动图片加链接的制作方法◇
  多图滚动加链接的制作方法 - 寒冬腊月 - .

多图滚动加链接的制作方法 - 寒冬腊月 - . 

   多图滚动加链接的制作方法 - 寒冬腊月 - .

 

多图滚动加链接的制作方法 - 寒冬腊月 - .

多图滚动加链接的制作方法 - 寒冬腊月 - .

多图滚动加链接的制作方法 - 寒冬腊月 - .
新手入门篇 文字类制作 图片类制作 日历、时钟制作
博客素材类 "边框"的制作 u5 教程 PS 教程
情感天地 生活常识 教子必读 音画欣赏
男人女人 测算运气 驾车技巧 幽默笑话
●新手入门篇●/●文字类制作●/●图片类制作●/●日历、时钟制作类●/●博客制作(素材类)●/●"边框"的制作●

多图滚动加链接的制作方法 - 寒冬腊月 - .

     点击进入   在我的博客,更多精彩等着你!

多图滚动加链接的制作方法 - 寒冬腊月 - .

 

多图滚动加链接的制作方法 - 寒冬腊月 - .

 多图滚动加链接的制作方法 - 寒冬腊月 - .

 

 

  评论这张
 
阅读(2022)| 评论(6)
推荐 转载

历史上的今天

评论

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

页脚

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