Question

我在网上发现了一些我需要工作的代码......当我尝试将其扩展为3个按钮时出现了问题。以下粗体的原始代码...我试图按照代码添加2个按钮，按钮确实出现但是当我点击按钮2和3时，它们仅影响按钮1 ...按钮1与下面的代码完美配合

<script type="text/javascript">
//preload images first
**img1=new Image()
img1.src="CommonFiles/ArrowBackShadow.png"
img2=new Image()
img2.src="CommonFiles/ArrowBackPress.png"**
img3=new Image()
img3.src="CommonFiles/ArrowUpShadow.png"
img4=new Image()
img4.src="CommonFiles/ArrowUpPress.png"
img5=new Image()
img5.src="CommonFiles/ArrowForwardShadow.png"
img6=new Image()
img6.src="CommonFiles/ArrowForwardPress.png"
</script>


Body....
<body>
<a href="whatever.htm" 
   onMousedown="document.images['example'].src=img2.src" 
   onMouseup="document.images['example'].src=img1.src">

<img src="CommonFiles/ArrowBackShadow.png" name="example" border=0></a>

<a href="whatever.htm" 
   onMousedown="document.images['example'].src=img4.src" 
   onMouseup="document.images['example'].src=img3.src">

<img src="CommonFiles/ArrowUpShadow.png" name="example" border=0></a>

<a href="whatever.htm" 
   onMousedown="document.images['example'].src=img6.src" 
   onMouseup="document.images['example'].src=img5.src">

 <img src="CommonFiles/ArrowForwardShadow.png" name="example" border=0></a>
</body>

我远离网站管理员...感谢您的帮助...... 兰德尔

Answer 1

使用CSS。

.button {
  display: block;
  /* hide text: */
  font-size: 0;
  color: transparent;
}

#up {
  width: 100px; /* replace with the width / height of your image */
  height: 30px;
  background-image: CommonFiles/ArrowForwardUp.png;
}

#up:active:hover {
  background-image: CommonFiles/ArrowForwardUp.png;
}

/* Same for forward */

你的HTML：

<a href="whatever.htm" class="button" id="up">Up</a>
<a href="whatever.htm" class="button" id="Forward">Forward</a>

如果所有按钮的宽度和高度相同，您甚至可以将width和height移动到.button部分。

专业人士：

您的HTML代码看起来更清晰
易于维护。
稍后，您可以在不触及html的情况下完全改变您的按钮样式，只需修改CSS样式代码。
禁用图片的浏览器，盲人等都有文字而不是图片
不需要java脚本（有些用户已将其禁用）。

Answer 2

确保标识符正确无误：

<a href="whatever.htm" 
   onMousedown="document.images['thishouldmatch1'].src=img4.src" 
   onMouseup="document.images['thishouldmatch1'].src=img3.src">

<img src="CommonFiles/ArrowUpShadow.png" name="thishouldmatch1" border=0></a>

可按下的按钮代码不起作用

2 个答案: