Вопрос по maphilight
Задаю параметры через:
area maphilight='{"alwaysOn": true, "fill" : true, "fillColor":"78ff00","fillOpacity":0.5, "stroke":true, "strokeWidth":5,"strokeColor":"000000","strokeOpacity":0.9}'
как можно задать смену фона и цвета обводки при введение. тоесть через hover или mouseenter чтобы менялись данные (те что в maphilight={параметры}) при наведение в коде а потом при отводе мышки те что прописаны были в html коде |
присоединяюсь к вопросу.
Еще интересно как менять параметры внутри maphilight при клике. Обращение 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);
};
и как она вызывается. я на основе этого и сделал смену цвета при клике. (ну там уже что угодно сделать можно) |
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, поэтому области по умолчанию подсвечены с прозрачностью. Необходимо при наведении и при активации (клике) убирать прозрачность. Буду очень благодарен, если поможете. |
| Часовой пояс GMT +3, время: 10:00. |