우울한 버튼 코드가 작동하지 않습니다.

웹에서 작동해야하는 코드를 발견했습니다 ... 버튼을 3 개로 확장하려고 시도했을 때 문제가 발생했습니다. 아래 굵게 표시된 원본 코드 ... 시도해 보았습니다. 2 개 더 많은 버튼을 추가하는 코드를 따르 버튼이 나타나지 않습니다하지만 버튼 2와 3을 클릭하면, 그들은 내가 멀리있어우울한 버튼 코드가 작동하지 않습니다.

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

아래의 코드 만 ... 버튼 1 완벽하게 작동 버튼 1에 영향을 웹 마스터 ... 도움을 주셔서 감사합니다. 랜달

출처

2012-01-01 Randall

작동하는 답변을 수락하는 것은 좋은 제스처입니다. 응답에 대한 – SamStar

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

출처

2012-01-01 17:14:06 rene

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>

, 당신도 .button 섹션에 width 및 height를 이동할 수 있습니다.

찬반 :

HTML 코드 그것은 유지하기 쉽고
까지 명확로 보인다.
나중에 HTML을 건드리지 않고 완전히 다른 스타일로 꾸밀 수 있지만 CSS 스타일 코드 만 수정하면됩니다.
이미지가 사용 중지 된 브라우저, 시각 장애인 등이 이미지 대신 텍스트를 사용합니다.
자바 스크립트가 필요하지 않습니다 (일부 사용자는 사용하지 않도록 설정했습니다).

출처

2012-01-01 17:18:26 Yogu

감사합니다 ... 난 잘 작동이 코드 ... – Randall

CSS를 사용하여 종료 #back { 높이 : 50 픽셀; 너비 : 50px; 오버플로 : 숨김; background : url (BackNav.png) top left no-repeat; display : 블록; float : left; } #back : 마우스 오버 { 배경 위치 : 왼쪽 하단; } #up { 높이 : 50px; 너비 : 50px; 오버플로 : 숨김; background : url (UpNav.png) 왼쪽 위의 no-repeat; display : 블록; float : left; } #up : 호버 { 배경 위치 : 왼쪽 하단; } #forward { 높이 : 50px; ....... 위와 같이 계속하십시오 ... – Randall

우울한 버튼 코드가 ​​작동하지 않습니다.

답변

관련 문제

우울한 버튼 코드가 작동하지 않습니다.