I have a table based map (each square of the table is a different map area) and would like to use a hover as a sort of legend. So, when I hover over an area, I get a popup, or something, that says "this is a rock and a chicken". My map is based on an array of 10x10 numbers (for the base) and then (probably, haven't fully decided yet) names to indicate special areas on the map. So, 2 10x10 maps, one filled with numbers, the other has mostly null, with some names that will link to an image, specified by an id. (Sorry if that's a little confusing).
Because of the way it is set up, and the fact that the map could change, I wanted the hover to be dynamic. The map is stored as a variable, so all I would (theoretically) have to do is get the description from legend[map.[y][x]].desc (where legend is an array 0 - whatever number) that has a description of each map tile). I wasn't sure how I would link a specific td in the page, so I thought a for loop with eq would work. So, I have a 10x10 map, 100 td elements in it. Go from 0 - 99, and on each one, create a hover event that (right now) shows the number in the div with id=test. I tried it with slice as well (the commented out part is my test with eq) to see if that made a difference. What happens is that everything displays 100. Obviously, I'm going about this the wrong way. Any ideas? for(var i = 0; i < 100; ++i) { //$('#map td:eq(' + i + ')').hover( $('#map td').slice(i, i + 1).hover( function() { var y = i / 10; var x = i % 10; $('#test').html(y + ', ' + x); }, function() { $('#test').html(""); }); }