Вопрос по maphilight

[ufaclub]

Задаю параметры через:

area maphilight='{"alwaysOn": true, "fill" : true, "fillColor":"78ff00","fillOpacity":0.5, "stroke":true, "strokeWidth":5,"strokeColor":"000000","strokeOpacity":0.9}'

как можно задать смену фона и цвета обводки при введение. тоесть через
hover или mouseenter

чтобы менялись данные (те что в maphilight={параметры}) при наведение в коде а потом при отводе мышки те что прописаны были в html коде

[nimensy]

присоединяюсь к вопросу.

Еще интересно как менять параметры внутри maphilight при клике.

Обращение

X.data-maphilight="XXX"

не работает.

[ufaclub]

X.data-maphilight="XXX"

jQuery(document).ready(function(){







	

	var R = Raphael("mapPaper1", 980, 463);
	
var i = 1,
    area = {};	
	

	var oAreas1 = jQuery("#mapPaper1 .mapArea1");
   	
	jQuery.each(oAreas1, function(){
        area[i] = R.path(jQuery(this).attr("data-path")).attr(JSON.parse("{"+jQuery(this).attr("status-path")+"}"));
    i++;
});
    
    jQuery('#mapPaper1 path').each(function(i,el){
       
    jQuery(this).qtip({
	content:{text:jQuery(el).find('title').text()},
	  position: {
	         my: 'center left',  // Position my top left...
             target: 'mouse', // Track the mouse as the positioning target
             adjust: { x: 20, y: 10 } // Offset it slightly from under the mouse
         }
	});
	
    });
	
    
    jQuery('#mapPaper1 a').each(function(i,el){jQuery(el).attr('class','test');})
	

	for (var j=1; j<i; j++) {
		(function (o, j) {
			o[0].style.cursor = "pointer";
			o[0].onmouseover = function () {
			
              /*   jQuery(this).data('originalColor',jQuery(this).attr('fill'));
				var color = "#FCE588";
				o.animate({fill:color}, 50); */
			    o.animate({opacity:0.7}, 150);
				
			};
			o[0].onmouseout = function () {
			
			/* 	var color = jQuery(this).data('originalColor');
				o.animate({fill: color}, 50); */
			o.animate({opacity:0.99}, 150);
			
			};
			o[0].onclick = function () {
				var color = "#F00";
				o.animate({fill: color}, 50);
			};
		})(area[j], j);
	}
	


});

посмотри нижнюю часть кода

o[0].onclick = function () {
				var color = "#F00";
				o.animate({fill: color}, 50);
			};

и как она вызывается. я на основе этого и сделал смену цвета при клике. (ну там уже что угодно сделать можно)

[nimensy]

ufaclub,
не могу разобраться... я использую не raphael.js, а maphilight.

Код

<script>
	
	$(function() {

	$('div[class="hdtext"]').hide(); 
	$('div[id="floor2"]').hide(); 
	$('div[id="floor3"]').hide(); 
    $('.map').maphilight({fillColor: '008800'});
    var s = $(".hdarea"), d = $(".hdtext");
    s.click(function() {
		d.hide();
		var i = s.index(this);
		d.eq(i).show();	
	});		
    });</script>

<p>
		<img src="plan.png" alt="Новороссийская 220 офисы первый этаж"  class="map" usemap="#features">
		<map name="features" id="Navigation">
					<area id="wh11" class="hdarea" shape="poly" coords="140,53,156,53,156,74,139,74" href="#" alt="Информация" data-maphilight='{"strokeColor":"0000ff","strokeWidth":0.3,"fillColor":"ff0000","fillOpacity":0.6}'>
					<area id="wh21" class="hdarea" shape="poly" coords="273,154,313,154,313,239,272,238" href="#" alt="Информация" data-maphilight='{"strokeColor":"0000ff","strokeWidth":0.3,"fillColor":"ff0000","fillOpacity":0.6}'>
					<area id="wh31" class="hdarea" shape="poly" coords="330,269.3333,387,270.3333,387,369.3333,331,369.3333" href="#" alt="Информация" data-maphilight='{"strokeColor":"0000ff","strokeWidth":0.3,"fillColor":"ff0000","fillOpacity":0.6}'>
					<area id="wh41" class="hdarea" shape="poly" coords="332,415.3333,367,415.3333,366,464.3333,332,464.3333" href="#" alt="Информация" data-maphilight='{"strokeColor":"0000ff","strokeWidth":0.3,"fillColor":"ff0000","fillOpacity":0.6}'>
					<area id="wh51" class="hdarea" shape="poly" coords="112,552.3333,222,552.3333,222,595.3333,112,595.3333" href="#" alt="Информация" data-maphilight='{"strokeColor":"0000ff","strokeWidth":0.3,"fillColor":"ff0000","fillOpacity":0.6}'>
					<area id="wh61" class="hdarea" shape="poly" coords="943.6667,288.6667,978.6667,288.6667,977.6667,372.6667,944.6667,373.6667" href="#" alt="Информация" data-maphilight='{"strokeColor":"0000ff","strokeWidth":0.3,"fillColor":"ff0000","fillOpacity":0.6}'>
		</map>
	</p>
		<div id="wh1d1" class="hdtext">1</div>
		<div id="wh2d1" class="hdtext">2</div>
		<div id="wh3d1" class="hdtext">3</div>
		<div id="wh4d1" class="hdtext">4</div>
		<div id="wh5d1" class="hdtext">5</div>
		<div id="wh6d1" class="hdtext">6</div>

В параметрах maphilight'a указано alwaysOn, поэтому области по умолчанию подсвечены с прозрачностью. Необходимо при наведении и при активации (клике) убирать прозрачность. Буду очень благодарен, если поможете.