onkeypress changeImage - PullRequest
Новая
       28

onkeypress changeImage

1 голос
/ 25 февраля 2012

У меня есть эта функция preloadimages: 

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

Почемуне работает?Также я попробовал: 

document.getElementById('imageChange').images[0].src="image1.jpg"; 
document.getElementById('imageChange').images[0];

Это только работа, но я что-то меняю и не помню сейчас.Я использую эту функцию для смены изображений с клавиатуры с событием onkeypress.Любое предложение?

Ответы [ 2 ]

1 голос
/ 25 февраля 2012 
 preloadimages(['images/image1.jpg','images/image2.jpg','images/image3.jpg']

В соответствии с вашим методом preloadimages изображения находятся в каталоге images/Однако, в вашем методе changeIm вы делаете это: 

document.getElementById('imageChange').src = 'image3.jpg'; // (missing directory)
// Solution: prefix your URLs with "images/":
document.getElementById('imageChange').src = 'images/image3.jpg';

Пока мы работаем над этим, используйте jQuery, чтобы легко реализовать метод обработки событий между браузерами: 

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" />
0 голосов
/ 25 февраля 2012

Вам не нужно просто добавлять префикс измененных изображений к "images /", напр.

document.getElementById('imageChange').src='images/image2.jpg';
...