1

ロールオーバー画像で（テキストの）ドロップダウンを作成し、マウスがドロップダウンまたは元の画像から外れると元の画像に戻るコードが必要です。

誰でもこれを達成するためのコードを持っていますか? 私は一日中このサイトのコードを変更してきましたが、完全ではありませんでした。

メニュー

<table width="830px" border=0 cellspacing=0 cellpadding=0 >
  <tr height="25px">
    <td valign="top" align="left"><a href="aboutus1.php"><img src="images/cti-logo.png"></a></td>

    <td valign="bottom" align="right"><a href="welcome.php">
    <img  src="images/home.jpg" onMouseOver="this.src='images/hover-home.jpg'" onMouseOut="this.src='images/home.jpg'"/>

    <a href="aboutus1.php"  target="content"><img id="id_About" onClick="over('about')"  src="images/aboutus.jpg"  onmouseover="this.src='images/hover-aboutus.jpg'" onMouseOut="if(me2=='about'){}else{this.src='images/aboutus.jpg'}" /></a>

    <a target="content" href="partners.php" ><img onClick="over('partners')" id="id_Partners" src="images/partners.jpg" onMouseOver="this.src='images/hover-partners.jpg'" onMouseOut="if(me2=='partners'){}else{this.src='images/partners.jpg'}" /></a>

    <a href="products1_1.php" target="content"><img onClick="over('products')" id="id_Products" src="images/products.jpg"  onmouseover="this.src='images/hover-products.jpg'" onMouseOut=" if(me2=='products'){}else{this.src='images/products.jpg'}" /></a>

    <a href="contactus.php" target="content"><img id="id_Contactus" onClick="over('contactus')" src="images/contactus.jpg"  onmouseover="this.src='images/hover-contactus.jpg'" onMouseOut=" if(me2=='contactus'){}else{this.src='images/contactus.jpg'}" class="contactus" /></a>
    </td>
  </tr>
  <tr>
    <td colspan="2" class="bar"></td>
  </tr>
</table>
4

1 に答える 1

0

この JSFiddle を見てください。これがあなたが必要とするものであることを願っています。

http://jsfiddle.net/mohsin1303/RtMQh/

HTML コード

<html>
<head>
     <title>This is a demo using CSS Sprites</title>
     <style>
           .myButtonLink {
               display: block;
               width: 100px;
               height: 100px;
               background: url('http://www.justcode.us/wp-content/uploads/2013/04/buttonleafhover.png') bottom;
           }
           .myButtonLink:hover {
               background-position: 0 0;
           }

     </style>
</head>
<body>
<a class="myButtonLink" href="#LinkURL"></a>
</body>
</html>
于 2013-08-07T06:38:08.330 に答える