Question

When the user moves their cursor over different regions of an image on my page I am updating the content of a table which gives more detail to them. This table content is generated server side.

At the moment, I am storing the 50 or so different tables within their own divs which are hidden until the respective mouseover event.

Is this the best way of achieving this? Is it better to use javascript to just replace the table content of a single div?

Thanks, A.

Answer 1

Well, if it’s 50 identical tables (structure-wise) with unique content, I’d probably settle for a custom object or something like that, instead of hiding 50 tables (50 tables = overhead in comparison versus 1 table).

Try the following (somewhat pseudo) using jQuery:

var data_rows = $('#table').children('tr');
var region_information = { 
    0: { name: "Foo", location: "Loo"}, 
    1:{ name: "Bar", location: "Car" }, 
    2{ name: "Car", location: "Garage"} 
};

$('.regions').hover(
    function() {

        //Store the region for *performance*
        var this_region = $('this');        

        /* 
            Set the values in the table by getting the field corresponding to the substring
            The format = region-{n}, where {n} is a positive digit
            Repeat this `n` times, according to how many "values" you need to display per table
        */
        data_rows.children('field1').text(
            region_information[this_region.attr('name').substring(7, 1)]
        );
  }
);

Did this make sense? AS I don’t know what your table looks like or anything, I can’t quite tell you exactly how to do it. I can however provide you with a pseudo-like code (like the one above), so I hope it helps you out!