Question

我有一个网站，我希望标题按钮（图像）具有正常状态，翻转状态和当前页面状态，当查看该页面时，标题按钮显示的图像与正常不同。我应该注意这个网站是从一个带有php的数据库中提取的。

HTML：

<body>
    <div class="header" id="header1">
        <a href='index.php?Program=BIT' class="header_bit" id="header_bit" style="text-decoration:none; color:#FFF">
        <img alt="Photonics & Laser Technology" 
        src="+images/_header_all/bit_normal_v2.png" 
        onmouseover="this.src='+images/_header_all/bit_hover_v2.png'" 
        onmouseout="this.src='+images/_header_all/bit_normal_v2.png'" 
        width="180px" height="250px"/>
        </a>
        <a href='index.php?Program=IMD' class="header_imd" id="header_imd" style="text-decoration:none; color:#FFF">
        <img alt="Interactive Multimedia & Design" 
        src="+images/_header_all/imd_normal_v2.png" 
        onmouseover="this.src='+images/_header_all/imd_hover_v2.png'" 
        onmouseout="this.src='+images/_header_all/imd_normal_v2.png'" 
        width="180px" height="250px"/>
        </a>
        <a href='index.php?Program=NET' class="header_net" id="header_net" style="text-decoration:none; color:#FFF">
        <img alt="Networking Technology" 
        src="+images/_header_all/net_normal_v2.png" 
        onmouseover="this.src='+images/_header_all/net_hover_v2.png'" 
        onmouseout="this.src='+images/_header_all/net_normal_v2.png'" 
        width="180px" height="250px"/>
        </a>   
        <a href='index.php?Program=PLT' class="header_plt" id="header_plt" style="text-decoration:none; color:#FFF">
        <img alt="Photonics & Laser Technology" 
        src="+images/_header_all/plt_normal_v2.png" 
        onmouseover="this.src='+images/_header_all/plt_hover_v2.png'" 
        onmouseout="this.src='+images/_header_all/plt_normal_v2.png'" 
        width="180px" height="250px"/>
        </a>  
        <a href='index.php?Program=IRM' class="header_irm" id="header_irm" style="text-decoration:none; color:#FFF">
        <img alt="Information Research Technology" 
        src="+images/_header_all/irm_normal_v2.png"
        onmouseover="this.src='+images/_header_all/irm_hover_v2.png'" 
        onmouseout="this.src='+images/_header_all/irm_normal_v2.png'"  
        width="180px" height="250px"/>
        </a>
    </div>
</body>

的CSS：

/*Program header items*/
#header_bit{
    position:relative;
    top:10px;
    left:20px;
    }
/*#header_bit:active img{
    background-image:url(+images/_header_all/imd_hover_v2.png);
    background-repeat:no-repeat;
    }*/
#header_imd{
    position:relative;
    top:10px;
    left:20px;
    }
#header_net{
    position:relative;
    top:10px;
    left:20px;
    }
#header_plt{
    position:relative;
    top:10px;
    left:20px;

    }
#header_irm{
    position:relative;
    top:10px;
    left:20px;
    }

我很茫然，我发现的所有方法都没有适用或不适用。欢迎任何帮助，谢谢。

html图像按钮的当前页面状态

0 个答案: