옵션 변경으로 자바 스크립트를 사용하여 이미지를 교체하는 방법은 무엇입니까?

옵션 변경으로 이미지를 바꾸려면 자바 스크립트 코드를 작성해야합니다.옵션 변경으로 자바 스크립트를 사용하여 이미지를 교체하는 방법은 무엇입니까?

<select name="Color:"onchange="document.getElementById('myimage').src = this.value; 
"> 
<option value="images/taylormade_purelite_standbag_bk.jpg">Black/White</option> 
<option value="images/taylormade_purelite_standbag_by.jpg">Black/Yellow</option> 
<option value="images/taylormade_purelite_standbag_byr.jpg">Black/Yelow/Red</option> 

<option value="images/taylormade_purelite_standbag_by.jpg">Black/Yellow</option> 
<option value="images/taylormade_purelite_standbag_nr.jpg">Navy/Red</option> 
<option value="images/taylormade_purelite_standbag_nw.jpg">Red/Black/White</option> 
<option value="images/taylormade_purelite_standbag_rb.jpg">Black/Red</option> 
<option value="images/taylormade_purelite_standbag_wrb.jpg">White/Red/Black</option> 
</select> 

<img src="images/taylormade_purelite_standbag_bk.jpg" id="myimage">

내 문제는 이것이다 :이 옵션 값이 검사에서 나타납니다 때문에는 "블랙 /으로 yelow/레드"가 아닌 URL로 일반 텍스트 옵션 값을 가질 필요가 여기에 코드입니다 페이지. 아무도 나를 도울 수 있습니까?

출처

2010-03-04 neko

getAttribute("rel")이 일 수있는 URL에 대한 색상 옵션에서 매핑을 설정하여 그 속성을 얻을, 나는 생각한다.

<script> 
var colorUrlMap = { 
    "Black/White" : "images/taylormade_purelite_standbag_bk.jpg", 
    //Add more here 
    "White/Red/Black" : "images/taylormade_purelite_standbag_wrb.jpg" 
}; 
</script> 
<select name="Color:"onchange="document.getElementById('myimage').src = colorUrlMap[this.value];"> 
<option value="Black/White">Black/White</option> 
<!-- Add more here --> 
<option value="White/Red/Black">White/Red/Black</option> 
</select> 


<img src="images/taylormade_purelite_standbag_bk.jpg" id="myimage">

출처

2010-03-04 20:32:30 Phil

완벽! 감사합니다 필! 대단해! 너는 최고야! – neko

사용 옵션에 대한 다른 속성 :

<option value="Black/White" rel="images/taylormade_purelite_standbag_bk.jpg">Black/White</option>

그런 다음

<select name="Color:" onchange="document.getElementById('myimage').src = this.options[this.selectedIndex].getAttribute('rel');">

출처

2010-03-04 20:25:54 Joel

안녕하세요, Joel 나는 당신의 제안에 따라 이것을했습니다. 노란색 그러나이 작동하지 않는 몇 가지 이유. 나는 무엇을 잘못 했는가? – neko

실제로 this.getAttribute ('rel')'이 아니라'this.options [this.selectedIndex] .getAttribute ('rel')'이어야합니다. 내 잘못이야. – Joel

CSS를 사용하고 선택에 따라 수업을 변경할 수 있습니다. 그러면 모든 URL이 스타일 시트에 있습니다.

는

CSS :

.red 
{ 
background: url(red.gif) no-repeat; 
}

HTML/JS는 :

<select name="Color:" onchange="document.getElementById('myimageholder').setAttribute("class", "red");">

출처

2010-03-04 20:33:07

이 나를 위해 작동합니다.

<HTML> 
    <head> 
    <TITLE>Image Select Test</TITLE> 
    <script type="text/javascript" language='javascript'> 

     function flip() { 
      myimage.src = ColorSelect.children[ColorSelect.selectedIndex].getAttribute('url'); 
     } 

    </script> 
    </head> 

    <body> 
    <form> 
     Select an image:<br/> 
     <select id="ColorSelect" onchange="javascript:flip();"> 
     <option url="images/0.png" value='Zero'>Zero</option> 
     <option url="images/1.png" value='One'>One</option> 
     <option url="images/2.png" value='Two'>Two</option> 
     <option url="images/3.png" value='Three'>Three</option> 
     <option url="images/4.png" value='Four'>Four</option> 
     </select> 

    </form> 

    <img src="images/unknown.png" id="myimage"/> 

    </body> 

    <script type="text/javascript" language='javascript'> 
     // place this after <body> to run it after body has loaded. 
     var myimage = document.getElementById('myimage'); 
     var ColorSelect= document.getElementById('ColorSelect'); 
    </script> 

</HTML>

출처

2010-03-04 20:45:54 Cheeso

옵션 변경으로 자바 스크립트를 사용하여 이미지를 교체하는 방법은 무엇입니까?

답변

관련 문제