Question

this is my code, it’s working on ie9 chrome firefox but ie7 and ie8 not working 🙁

html code

<ul class="controls">  
<li style="font-size: 10px; font-weight: bold; left: 310px; position: absolute; text-transform: uppercase; top: -102px;">
<a id="pp" href="#" title="" onclick="playPause()"><img src="../css/play.png"></a>
</li>
</ul>

javascript code

var inter;
function playPause(){
if($('.controls li #pp').html() == '<img src="../css/play.png">'){
inter = setInterval(function() {
changeBannerImg(num,1);
}, 4600);
document.getElementById('pp').html = '<img src="../css/pause.png">';
}
else if($('.controls li #pp').html() == '<img src="../css/pause.png">'){
clearInterval(inter);
document.getElementById('pp').html = '<img src="../css/play.png">';
}   
}
function stopAni(){
clearInterval(inter);
document.getElementById('pp').html = '<img src="../css/play.png">';
}

Answer 1

This should work,

Html

<ul class="controls">  
  <li style="font-size: 10px; font-weight: bold; left: 310px; position: absolute; text-transform: uppercase; top: -102px;">
    <a id="pp" href="#" title=""><img src="../css/play.png"></a>
  </li>
</ul>

JS

$(function() {
    var img = $('.controls li #pp img');

    function playPause() {
        if (img.attr('src').match(/play\.png$/)) {
            inter = setInterval(function() {
                changeBannerImg(num, 1);
            }, 4600);
            img.attr('src', "../css/pause.png");
        } else if (img.attr('src').match(/pause.png$/)) {
            clearInterval(inter);
            img.attr('src', "../css/play.png");
        }
        return false;
    }

    function stopAni() {
        clearInterval(inter);
        img.attr('src', "../css/play.png");
    }
    img.parent().click(playPause);
//    other code here


});​