HTML 如何实现自定义按钮

tingsky 2009-10-15 11:00:35

需求是这样的：
美工提供四张图片， A.png, B.png, C.png, D.png, 分别表示按钮的四个状态：正常，获得焦点，点击，禁用状态。
现在编写个简单的HTML网页，实现自定义的按钮，点击按钮链接到其它网页。
Thanks a lot！

...全文

878 9 打赏收藏转发到动态举报

写回复

用AI写文章

9 条回复

切换为时间正序

请发表友善的回复…

发表回复

BeenZ 2009-10-15

打赏
举报



<script>

    window.onload=function(){

        var button=document.getElementsByName("imageField1")[0];

        if(button.disabled=="true") button.src="D.png"

    }

    function pngclick(){

        obj.src="C.png"

        location.href="http://www.baidu.com"

    }

    function imgfocus(e){

        var obj=e.srcElement||e.target;

        obj.src="B.png"

    }

    function imgout(e){

        var obj=e.srcElement||e.target;

        obj.src="A.png"

    }

</script>

<input name="imageField1" type="image" src="A.png" onclick="pngclick()" onmouseover='imgfocus(event)' onmouseout="imgout(event)">

浪尖赏花 2009-10-15

打赏
举报

onmouseout事件:A.png
onmouseover事件:B.png
onmousedown事件:C.png
onmouseup事件:B.png

禁用状态不知道是个什么意思~~

tingsky 2009-10-15

打赏
举报

to Beenz:
Thx a lot.
It's runing
----------------------------
to ALL:
我把这个HTML文件放到WinCE5.0的平台上，用系统自带的IE打开，发现它不能支持PNG的显示，唉，不晓得有没其他同志遇到类似问题。

BeenZ 2009-10-15

打赏
举报

这样



<!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">

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

        <title>无标题文档</title>

        <style type="text/css">



        </style></head>



    <body>



        <script>

            window.onload=function(){

                var button=document.getElementsByName("imageField1")[0];

                if(button.disabled=="true") button.src="DEST_LAYOUT_D.PNG"

            }

            function pngclick(e){

                var obj=e.srcElement||e.target;

                obj.src="DEST_LAYOUT_C.PNG"

                location.href="http://www.baidu.com"

            }

            function imgfocus(e){

                var obj=e.srcElement||e.target;

                obj.src="DEST_LAYOUT_B.PNG"

            }

            function imgout(e){

                var obj=e.srcElement||e.target;

                obj.src="DEST_LAYOUT_A.PNG"

            }

        </script>



        <input name="imageField1" type="image" src="DEST_LAYOUT_A.PNG"  onmousedown='pngclick(event)'



               onmouseover='imgfocus(event)' onmouseout="imgout(event)">



    </body>

</html>

tingsky 2009-10-15

打赏
举报

我的目的是这样的：
正常情况下，按钮显示 DEST_LAYOUT_A.PNG 图片
鼠标移到按钮上面，显示 DEST_LAYOUT_B.PNG
鼠标左键按下时，显示 DEST_LAYOUT_C.PNG
当鼠标移开按钮是，有回到常态 DEST_LAYOUT_A.PNG

好像 pngclick 的函数没有执行到，点击按钮无效。

<input name="imageField1" type="image" src="DEST_LAYOUT_A.PNG" onclick="pngclick()" onmouseover='imgfocus(event)' onmouseout="imgout(event)">

BeenZ 2009-10-15

打赏
举报

打开ie----》工具------》internet选项----》安全----》自定义级别，在这里设置

tingsky 2009-10-15

打赏
举报

to Beenz:

测试下，带<script> </script> 就会出现提示要求安装 ActiveX 的提示，如何解决呢？

BeenZ 2009-10-15

打赏
举报

是的,这个安全提示可以在工具--intelnet选项里去掉,无伤大雅的

我们认为的获得焦点是光标在上面闪烁,但是对于按钮,不知道LZ的这个焦点有什么要求

点上去一次以后只要不点其他元素,这个图片就一直是焦点图片,是这个意思么?

tingsky 2009-10-15

打赏
举报

to Beenz:
谢谢你的回答。
如下是我的一个简单的HTML文件，使用IE打开是，会有安装ActiveX的提示，不晓得是那边出了问题，点击按钮也不会出现焦点状态。
Thx





<!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">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>无标题文档</title>

<style type="text/css">



</style></head>



<body>



<script>

    window.onload=function(){

        var button=document.getElementsByName("imageField1")[0];

        if(button.disabled=="true") button.src="DEST_LAYOUT_D.PNG"

    }

    function pngclick(){

        obj.src="DEST_LAYOUT_C.PNG"

        location.href="http://www.baidu.com"

    }

    function imgfocus(e){

        var obj=e.srcElement||e.target;

        obj.src="DEST_LAYOUT_B.PNG"

    }

    function imgout(e){

        var obj=e.srcElement||e.target;

        obj.src="DEST_LAYOUT_A.PNG"

    }

</script>



<input name="imageField1" type="image" src="DEST_LAYOUT_A.PNG"  onmousedown='pngclick(event)' 



onmouseover='imgfocus(event)' onmouseout="imgout(event)">



</body>

</html>