Javascript显示已选图像

-1

我有另一个Javascript问题，我真的可以使用帮助。我再次为这种愚蠢的问题感到抱歉，但我真的很新，而且我不知道我在做什么。我有我所需要的代码，然后在脚本中记录我缺少的信息。Javascript显示已选图像

谢谢！

<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

或者，如果它是纯JavaScript忽略旧的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

Javascript显示已选图像

回答

相关问题