2013-08-07 84 views
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> 
+7

我们做的功课??? –

+0

不,我做了很多解决方法,但没有任何解决方法。我也试过搜索,但没有运气。我在网上搜索的大多数是文本,在我的情况下,我使用的图像,这就是为什么我有非常大的麻烦,如何使图像上的下拉 – abc123

+0

不幸的是,我已经删除了从图像下拉我的划痕。 – abc123

回答

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>