zoukankan      html  css  js  c++  java
  • Css 单图片按钮实例(css 图片变换)

    1.场景描述,根据鼠标的移动,动态的切换按钮图片。

    2.方法1,准备两张120*41的图片,一张正常状态图片,一张按下效果图片。在鼠标放在的按钮上设置按下图片,移开又恢复到正常状态图片。缺点:在网页上按下的图片需要下载,会出现鼠标移动上去,未马上切换效果。

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>两张图片按钮实例</title>
    <style type="text/css">
    #theLink{
        display:block;
        width:120px;
        height:41px;
        margin:0 auto;
        background:url(images/normal.gif) no-repeat;
    }
    #theLink:hover{background:url(images/press.gif) no-repeat;}
    </style>
    </head>
    
    <body>
    <a id="theLink"></a>
    </body>
    </html>

    3.方法2,整个设置一张图片,120*82,根据显示的需要,动态的截取显示尺寸。优势:在网页上可以一次下载完全一张图片,节约资料效率。

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>单张图片按钮实例</title>
    <style type="text/css">
    #theLink{
        display:block;
        width:120px;
        height:41px;
        margin:0 auto;
        background:url(images/buttonBG.gif) no-repeat;
    }
    #theLink:hover{ background:url(images/buttonBG.gif) no-repeat 0 -41px;}
    </style>
    </head>
    
    <body>
    <a id="theLink"></a>
    </body>
    </html>
  • 相关阅读:
    English Dictionary site for ODE and OALD
    vmic environment
    makefile
    the diference between include and import
    windows 工具命令 cmd
    python namespace
    shell cmd args
    ROE, ROC
    IP
    链接及常用软件
  • 原文地址:https://www.cnblogs.com/simpledev/p/3936932.html
Copyright © 2011-2022 走看看