В предыдущем посте я написал как делается активный imagemapping на jQuery.

Но по какой-то непонятной причине мой мозг в один момент глюканул и решил, что указывать абсолютное позиционирование относительно всего документа — единственный вариант. А ведь это не правда.

Исправляем

1. В CSS добавляем относительное позиционирование тэгу div с id=”map”:

   #map{ 	position: relative; }

   Теперь кружочки будут позиционироваться относительно этого дива, а не относительно body.

2. В коде исправляем позиционирование удалив координаты карты и добавляя кружочки не в body а в #map.

   function add_numbers(){
   	$("area").each(
   		function(){
   			var id = $(this).attr("href").substring(1);
   			var coords = $(this).attr("coords").split(",");
   			var max_l = 0, min_l = 9999, max_t = 0, min_t = 9999;
   			for(i=0; i Number(coords[i]))?Number(coords[i]):min_l;
   				}
   				else {
   					max_t = (max_t < Number(coords[i]))?Number(coords[i]):max_t;
   					min_t = (min_t > Number(coords[i]))?Number(coords[i]):min_t;
   				}
   			}
   			var left = Math.floor((max_l+min_l)/2) - 11;
   			var top = Math.floor((max_t+min_t)/2) - 11;
   			var div = '
   ' + id.substring(2) + "
   
   "
   			$("#map").append(div)
   			$("#num_" + id).css({ "left": left, "top": top });
   			$("#num_" + id).hover(
   				function () {
   					add_highlight(id);
   				},
   				function () {
   					remove_highlight(id);
   				}
   			);
   		}
   	);
   }
   

3. Можем удалить $(window).resize и функцию удаления кружочков

В итоге, избавляемся от багов в Опере, от необходимости перепроверять позиционирование при изменении размеров окна и можем смело отключить расширение Dimensions.

Качаем пример

Спасибо Игорю, что направил на путь истинный.