JS-Imagemapping -- исправленно.

JS-Imagemapping — исправленно.

В предыдущем посте я написал как делается активный 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<coords.length; i++){
    				if(i%2 == 0){
    					max_l = (max_l < Number(coords[i]))?Number(coords[i]):max_l;
    					min_l = (min_l > 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 = '<div class="overblock ' + $(this).attr("class")
    			div += '" id="num_' + id + '">' + id.substring(2) + "</div>"
    			$("#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.

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

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