Adding a new value into img tag to check if it was clicked with Javascript?

Question

I'm trying to make a map with repeated images, and I also want tiles on map to be clickable. Here I wrote a script but I have problem about unchecking checked images.

http://jsbin.com/aruge/edit

Please help.

Answer 1

i don't know exactly what do you want but will that help

function gotover(val) {
    if(document.getElementById(val).st!='1') {
  x=val.substr(1,1)*30;
  y=val.substr(3,1)*30;
      document.getElementById(val).src="http://mclightning.com/grover.jpg";
    }
}
function gotout(val) {
  if(document.getElementById(val).st!='1') {
  x=val.substr(1,1)*30;
  y=val.substr(3,1)*30;
  document.getElementById(val).src="http://mclightning.com/gr.jpg";
  }
}
function gotclicked(val) {
  alert(document.getElementById(val).alt);
}
  var x=0;
  var y=0;
  for(i=0; i<5; i++)
  {
  x=i*30;
    for(k=0; k<5; k++)
    {
      y=k*30;
    document.write('<div class="kutu" style="position: absolute; left: '+x+'px; top: '+y+'px;"><img  onmouseover="gotover(this.id)" onclick="gotclicked(this.id)" onmouseout="gotout(this.id)" id="i'+i+'k'+k+'" src="http://mclightning.com/gr.jpg" width="30" height="30" alt="test"></div>');
    }
  }

Answer 2

here's the jQuery version of your requirement Demo : http://jsbin.com/utepi3

  $(function() {
    var counter = 0;
    for(var i = 0;i< 5; i++) {
      for(var k = 0; k < 5; k++) {
        var img = $('<img />', {
          id : 'i'+i+'k'+k,
          src: 'http://mclightning.com/gr.jpg',
          width : 30,
          height : 30,
          alt : 'test',
          value : '0'
        }).appendTo('body').wrap('<div class="hello"/>');
        $('.hello').eq(counter).css({
          position : 'absolute',
          left: i*30,
          top : k*30,
          cursor : 'pointer'
        });
        counter++;
      }
    }
    $('img').hover(function() {
      if($(this).attr('value') != 1) {
        $(this).attr('src', 'http://mclightning.com/grover.jpg');
      }  
    },function() {
      if($(this).attr('value') != 1) {
        $(this).attr('src', 'http://mclightning.com/gr.jpg');
      }  
    }).bind('click',function() {
      if($(this).attr('value') !='1' ) {
        $(this).attr('src', 'http://mclightning.com/grclick.jpg');
        $(this).attr('value','1');
      }else if($(this).attr('value') !='0' ) {
        $(this).attr('src', 'http://mclightning.com/gr.jpg');
        $(this).attr('value','0');
      }  
    });
  });  

PS : added image toggler on re-click =)