[jQuery] hovering over a table based map
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("");
});
}