Dreamweaver教程 FrontPage教程 Flash教程
  • CSS教程
  • javascript教程
    当前位置:教程 > 网页制作 > CSS教程 > 正文

    巧用CSS制作图象特效

    编辑:教程网 来源:网络 时间:2011年09月23日 15:48
    一张风景图片,当鼠标在图片上面时,立即显示图片的文字说明,且有文字的地方图象变模糊了,当鼠标移开图片时,图片上的文字又消失了,图片又恢复了原样。这种效果是如何实现的呢?用Dreamweaver的Behavirs?功能可以实现,我在这里介绍的是用CSS来制作,网页的源代码显得更简炼。
      原理:利用CSS的属性值可动态改变的特点。?
      思路:定义一个HTML元素CSS属性的两种属性值,再用一个事件来触发,一旦事件发生,则改变HTML元素的属性值,从而达到预期目的。?
      制作方法:?
      1、在网页中输入一段文字(图片的说明),用“Span”标记把它括起来,并给它加一个CSS的“ID”属性(也就是给这段文字编一个代号,如:“Text1”,以便识别);再插入一张图片,同样也用“Span”把它括起来,也给它加一个“ID”属性,如:ID="image1";?
      2、在网页源代码的〈head〉与〈/head〉之间加上下面这段CSS代码:?
    〈!--?
    .style1?{?position:absolute;?left:210px;?top:245px;?width:218px;?height:169px;?z-index:2?}?
    .style2?{?position:absolute;?left:210px;?top:245px;?width:218px;?height:169px;?z-index:1}?
    .style3?{?position:absolute;?left:183px;?top:245px;?width:238px;?height:159px;?z-index:1;?filter:?Alpha(Opacity=10,?FinishOpacity=100,?Style=1,?StartX=0,?StartY=0,?FinishX=50,?FinishY=50)}?
    .style4?{?position:absolute;?left:183px;?top:245px;?width:238px;?height:159px;?z-index:2}?
    --〉?
    〈/style〉?
      上述代码中的“top”、“left”、“width”、“height”的值用于定位文本和图片在网页中位置和范围,这些属性值要根据实际情况修改。“z-index”是决定当前对象所在层的覆盖顺序,改变它的值可使覆盖顺序发生变化。本例就是动态地改变这个属性值来达到预期效果的;?
      3、在“Text1?”那个“span”中加载CSS的“.style2”,让那段文本一开始是处于下层的,并再加载一个“onmouseout”触发事件,一旦这个事件发生,将做两件事,一是让“Text1”采用CSS的“.style2”,使文本移到下层;二是让“image1”采用CSS的“.style4”,让图片移到上层。这样,“Text1”及那段文本的代码是这样的:?
    〈span?id="text1"?class="style2"?onmouseout="document.all.text1.className='style2';?document.all.image1.className='style4';"〉〈font?color="#0000FF"?〉〈br〉〈br〉这是著名〈br〉?
    自然风光胜地〈br〉?
    ——黄山的仙〈br〉?
    人指路景点,〈br〉?
    真是一幅巧夺〈br〉?
    天工的自然佳〈br〉?
    作。〈/font〉〈/span〉?
      4、同样在“image1?”的那个“span”中加载CSS的“.style4”,让那张图片一开始是处于上层的,并再加载一个“onmouseover”触发事件,一旦这个事件发生,将做两件事,一是让“Text1”采用CSS的“.style1”,把文本移到上层,变得可见;二是让“image1”采用CSS的“.style3”,让图象移到下层,且增加了一个“alpha”滤镜,使部分图象产生半透明的效果(关于滤镜的用法及作用请参看CSS滤镜专题的有关文章)。这样,“image1”及那张图片的代码是这样的:?
    〈span?id="image1"?class="style4"?onmouseover="document.all.text1.className='style1';?document.all.image1.className='style3'"〉〈img?src=http://www.blue1000.com/article/"image/cssp1.jpg"?width="237"?height="169"?〉〈/span〉?
      上面代码中“img”中的代码在实际制作中将随插入图片的不同而改变。
  • 原文来自 教程网 转载请注明:http://www.websmill.com/wangye/css/24644.html

  • 上一篇:巧用CSS制作文字变图象特效
  • 下一篇:巧用CSS制作树状目录