how to replace image in html using jquery

Question

I have written the code below for replacing image using jquery for display motion event of image, but image not found-error is displayed in console output. I have uploaded all images and all images have rights to read, write and execute.

var i = 1;                     //  set your counter to 1

var strOutput;
var luckyNumber;
var imgStr="";
var time;
function ShowLuckyNumber() {
    $('#play').css('display','none');
    $('#btnLuck').css('display','none');
    $('#numbers').css('display','none');
    $('.TestRotator').css('display','block');

    var rotator = document.getElementById('rotator'); // change to match image ID
    var imageDir = 'http://perfectinter.net/subdomains/lottefree/image/';
    var delayInSeconds = 1;
    var images = ['draw_001.jpg', 'draw_002.jpg', 'draw_003.jpg', 'draw_004.jpg', 'draw_005.jpg', 'draw_006.jpg', 'draw_007.jpg', 'draw_008.jpg',  'draw_009.jpg','draw_010.jpg','draw_011.jpg', 'draw_012.jpg', 'draw_013.jpg', 'draw_014.jpg', 'draw_015.jpg', 'draw_016.jpg', 'draw_017.jpg', 'draw_018.jpg',  'draw_019.jpg','draw_020.jpg','draw_021.jpg', 'draw_022.jpg', 'draw_023.jpg', 'draw_024.jpg', 'draw_025.jpg', 'draw_026.jpg', 'draw_027.jpg', 'draw_028.jpg',  'draw_029.jpg','draw_030.jpg','draw_031.jpg', 'draw_032.jpg', 'draw_033.jpg', 'draw_034.jpg', 'draw_035.jpg', 'draw_036.jpg', 'draw_037.jpg', 'draw_038.jpg',  'draw_039.jpg','draw_040.jpg','draw_041.jpg','draw_042.jpg','draw_043.jpg','draw_044.jpg','draw_045.jpg','draw_046.jpg','draw_047.jpg','draw_048.jpg','draw_049.jpg','draw_050.jpg','draw_051.jpg','draw_052.jpg','draw_053.jpg','draw_054.jpg','draw_055.jpg','draw_056.jpg','draw_057.jpg','draw_058.jpg','draw_059.jpg','draw_060.jpg','draw_061.jpg','draw_062.jpg','draw_063.jpg','draw_064.jpg','draw_065.jpg','draw_066.jpg','draw_067.jpg','draw_068.jpg','draw_069.jpg','draw_070.jpg','draw_071.jpg','draw_072.jpg','draw_073.jpg','draw_074.jpg','draw_075.jpg','draw_076.jpg','draw_077.jpg','draw_078.jpg','draw_079.jpg'];
    var num = 0;
    var value=1; 
    var path="";
    var changeImage = function () {
        var len = images.length;
        //rotator.src = imageDir + images[num++];
        path=imageDir + images[num++];
        $('#rotator').attr('src',path);

        //alert(rotator.src);
        if (num == len) {
            num = 0;
            resetfun();
        }
    };
    time=setInterval(changeImage, delayInSeconds * 50);
}

function resetfun()
{
    clearTimeout(time);
    luckyNumber=Math.floor((Math.random() * 9999) + 1);

    var dataString ='number='+luckyNumber;
     /* $.ajax({
        type: "POST",
        url: "playentry.php",
        data: dataString,
        success: function(data){
            $("#dealsptab").html(data);
        }
    });*/
    var check=$('#dealpt').val();
    if(check==0)
    {
        document.location.href='dealpoint.php';
    }
    var luckyNums = document.getElementById("numbers");

    var frontTag = "<span>";
    var backTag = "</span>";

    if (luckyNumber < 10)
        strOutput = "000" + luckyNumber;
    else if (luckyNumber < 100)
        strOutput = "00" + luckyNumber;
    else if (luckyNumber < 1000)
        strOutput = "0" + luckyNumber;
    else
        strOutput = "" + luckyNumber;

    var j=0;
    for (var i = 0; i < 4; i++) {
        imgStr += frontTag + strOutput.substr(i, 1) + backTag;
        j=i+1;
        $('#sp'+j).val(strOutput.substr(i, 1));
    }
    $('.TestRotator').css('display','none');
    $('#play').css('display','block');
    $('#btnLuck').css('display','block');
    $('#numbers').css('display','block');
    return false;
}

I removed the code snippet since it doesn't demonstrate anything. Posting js which relies on DOM elements without the HTML in a code snippet is useless... — T J
– T J, Commented Nov 6, 2014 at 8:48

Amin Jafari · Accepted Answer · 2014-11-06 08:14:04Z

3

the problem is your url: you've written http://perfectinter.net/subdomains/lottefree/image/draw_001.jpg which doesn't exist, http://perfectinter.net/subdomains/lottefree/images/draw_001.jpg is what you're looking for!

in simple words you wrote "image" which doesn't exist, "images" is the correct directory

answered Nov 6, 2014 at 8:14

Amin Jafari

7,2153 gold badges21 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

JustSteveKing Over a year ago

Seems like a simple case of spelling error to me :)

user4217567 · Accepted Answer · 2014-11-06 08:58:09Z

2

To set up on ready:

$(function() {
$("img")
    .mouseover(function() { 
        var src = $(this).attr("src").match(/[^\.]+/) + "over.gif";
        $(this).attr("src", src);
    })
    .mouseout(function() {
        var src = $(this).attr("src").replace("over.gif", ".gif");
        $(this).attr("src", src);
    });

});

answered Nov 6, 2014 at 8:58

user4217567

Collectives™ on Stack Overflow

how to replace image in html using jquery

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related