자바 스크립트 선택한 이미지 표시

-1

정말 도움이 될만한 또 다른 자바 스크립트 문제가 있습니다. 다시 바보 같은 질문에 대해 유감스럽게 생각합니다. 그러나 저는이 일에 정말로 새로운 것이며, 제가하고있는 일을 전혀 모릅니다. 지금까지 필자가 필요로하는 코드를 가지고 있으며 필자가 빠뜨린 정보를 스크립트에 기록했다.자바 스크립트 선택한 이미지 표시

감사합니다.

<HTML> 
<HEAD> 
<script> 
//build a function named displayImage 
//it should be catching the value of the item selected in a variable named whichImage 
//use an if/else structure to test for whichImage not being equal to the string "noImage" 
//if the statement is true then display the selected image in the canvas image 
//if the statement is false then display the "blank.jpg" external file in the canvas image 

//In the select tag below add an onChange event handler that calls the displayImage function 
//the value property of the selection list should be passed to the displayImage function as it is called 
//hint (this.value) 

function displayImage(whichImage) 
{ 
    if(whichImage != "noImage") 
    { 
     document.canvas.src = whichImage; 
    } 
    else 
    { 
     document.canvas.src = "blank.jpg"; 
    } 
} 


</script> 
</HEAD> 

<BODY> 
<form name="imageForm"> 
<table border=3> 
<tr> 
<td> 
<select name="imageSelector" onchange = "displayImage(this.value)"> 
    <option value="noImage">Select an Animal 
    <option value="dog.jpg">Dog 
    <option value="cat.jpg">Cat 
    <option value="parrot.jpg">Parrot 
    <option value="fish.jpg">Fish 
    <option value="alligator.jpg">Alligator 
    <option value="mouse.jpg">Mouse 
    <option value="fox.jpg">Fox 
</select> 
</td> 
</tr> 
<tr> 
<td> 
<img src="blank.jpg" name="canvas"> 
</td> 
</tr> 
</table> 
</form> 
</BODY> 
</HTML>

출처

2013-10-30 Ellen Harris

당신은 아무것도를 시도하거나 단지 우리가 당신을 위해 당신의 숙제/임무를 수행 할 수 있습니까? – dom

이 질문을보십시오 : [jQuery로 클릭 이미지에서 옵션으로 변경] (http://stackoverflow.com/questions/18183391/change-to-a-option-on-click-image-with-jquery) – shawnzhu

내가보기 엔 이것에 대한 jQuery를 사용하는 것이 좋습니다, 시도 할 것입니다 :

$('select[name="imageSelector"]').change(function() { 
    var whichImage = $(this).val(); 

    // It would make more sense to have the noImage option's value "blank.jpg" instead of using an if statement here 
    if(whichImage != 'noImage'){ 
     // Also give the img tag an id instead of just selecting it with a name attribute 
     $('img[name="canvas"]').attr('src', whichImage); 
    }else{ 
     $('img[name="canvas"]').attr('src', 'blank.jpg'); 
    } 
});

내가 여기에 귀하의 의견에 세부 사항을 따라하지만, 더 잘 할 수있는 몇 가지 (내 코드 주석 참조)가있다 .

출처

2013-10-30 01:11:27 stuthemoo

도움 주셔서 감사합니다. 네, 저는 사실 여기에 묻기도 전에 저 혼자 해보려고했습니다. 온라인으로 만 제공되는 5 주짜리 JavaScript 클래스를 사용하고 있습니다. 그는 우리가 책에서 배울 수 있도록 노력하고 있지만 그것이 내가 바라던 것이 훨씬 더 복잡합니다. 저는 HTML과 CSS의 개념을 정말로 이해하고 있습니다.하지만 아마도이 수업에서 얼굴을 맞대고 있기 때문일 것입니다. 코드 아카데미에서 JavaScript 개념을 더 잘 파악할 가치가 있습니까? 나는 내가 밝은 사람인 것처럼 느낍니다. 나는 단지 뭔가를 읽지 않고 잘 배웁니다. –

@EllenHarris 그 질문이나 다른 사람이 당신에게 도움이 되었으면 투표에 응해/답변을 수락하십시오. StackOverflow에서 "감사합니다"라고 말하면됩니다. 행복한 코딩. –

@EllenHarris 난 그냥 같은 엘렌이야 독서에서 아무것도 배울 수 없어. JavaScript를 사용하고 PHP를 사용하는 것이 좋습니다. – stuthemoo

아니면 자바 스크립트 순수해야 할 경우 이전의 IE 브라우저를 무시 :

<!DOCTYPE html> 
<HTML> 
<HEAD> 
<title>My img</title> 
</HEAD> 
<BODY> 
<form name="imageForm"> 
<table> 
<tr> 
<td> 
<select name="imageSelector" id="imageSelector"> 
    <option value="blank.jpg">Select an Animal 
    <option value="dog.jpg">Dog 
    <option value="cat.jpg">Cat 
    <option value="parrot.jpg">Parrot 
    <option value="fish.jpg">Fish 
    <option value="alligator.jpg">Alligator 
    <option value="mouse.jpg">Mouse 
    <option value="fox.jpg">Fox 
</select> 
</td> 
</tr> 
<tr> 
<td> 
<img src="blank.jpg" id="canvas" alt="Showing the selected image"> 
</td> 
</tr> 
</table> 
</form> 
<script> 

var img={ 
    imgEl:document.getElementById("canvas"), 
    sel:document.getElementById("imageSelector"), 
    changeHandler:function(){ 
    img.imgEl.src=img.sel.options 
     [img.sel.selectedIndex].value; 
    console.log(img.imgEl); 
    }, 
    init:function(){ 
    img.sel.onchange=img.changeHandler; 
    } 
}; 
img.init(); 



</script> 
</BODY> 
</HTML>

출처

2013-10-30 02:42:13 HMR

자바 스크립트 선택한 이미지 표시

답변

관련 문제