onkeypress changeImage [英] onkeypress changeImage
本文介绍了onkeypress changeImage的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有这个preloadimages功能：
I have this preloadimages function:
<script type="text/javascript">
function preloadimages(arr){
var newimages=[], loadedimages=0
var postaction=function(){}
var arr=(typeof arr!="object")? [arr] : arr
function imageloadpost(){
loadedimages++
if (loadedimages==arr.length){
postaction(newimages)
}
}
for (var i=0; i<arr.length; i++){
newimages[i]=new Image()
newimages[i].src=arr[i]
newimages[i].onload=function(){
imageloadpost()
}
newimages[i].onerror=function(){
imageloadpost()
}
}
return { //return blank object with done() method
done:function(f){
postaction=f || postaction
}
}
}
preloadimages(['images/image1.jpg','images/image2.jpg','images/image3.jpg']).done(function(images){
})
</script>
这是changeIm函数：
<script type="text/javascript">
function changeIm(event){
var code;
if(window.event){
code = event.keyCode;
}
else{
code = event.which;
}
if (code == 49 || code == 97) {
document.getElementById('imageChange').src='image1.jpg';
}
else if (code == 50 || code == 98) {
document.getElementById('imageChange').src='image2.jpg';
}
else {
document.getElementById('imageChange').src='image3.jpg';
}
}
</script>
`
<body>
<form method="post">
<input size="30" type="text" onkeypress="return changeIm(event)" />
</form>
<img src="images/defaultImage.jpg" id="imageChange" alt="Image" />
</body>
为什么不起作用？我也尝试过：
Why doesn't work? Also i tried:
document.getElementById('imageChange').images[0].src="image1.jpg";
document.getElementById('imageChange').images[0];
这只是工作，但我改变了一些东西，我现在不记得了。
我使用此函数通过onkeypress事件从键盘更改图像。有什么建议吗？
It is work only ones, but i change something and i don't remember now. I use this function to change images from keyboard with onkeypress event. Any suggestion?
推荐答案
preloadimages(['images/image1.jpg','images/image2.jpg','images/image3.jpg']
根据您的 preloadimages 方法，图像位于目录 images /
但是，在你的 changeIm中方法，你这样做：
According to your preloadimages method, the images are located within a directory images/
However, in your changeIm method, you're doing this:
document.getElementById('imageChange').src = 'image3.jpg'; // (missing directory)
// Solution: prefix your URLs with "images/":
document.getElementById('imageChange').src = 'images/image3.jpg';
在我们使用它时，使用jQuery轻松实现跨浏览器事件处理方法：
While we're at it, use jQuery to easy implement a cross-browser event handling method:
function changeIm(event) {
var code = event.which
, image
, directory = 'images/';
if (code == 49 || code == 97) {
image = 'image1.jpg';
} else if (code == 50 || code == 98) {
iamge = 'image2.jpg';
} else {
image = 'image3.jpg';
}
$('#imageChange').attr('src', directory + image);
}
$('#changeImgInput').keypress(changeIm);
<input size="30" type="text" id="changeImgInput" />
这篇关于onkeypress changeImage的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
