17.03.2011, 17:13
|
|
Аспирант
|
|
Регистрация: 25.10.2009
Сообщений: 51
|
|
|
использование maphilight
Хочу сделать подсветку определенной области на картинке и при наведении на эту область ещё сильнее сделать подстветку. Нарыл кодик с maphilight пытался задать подсветку изначально скажем 20% а при наведении чтобы вызывалась функция и подсветка становилась 40%, но видимо что-то не то делаю и вообще все перестает выделяться. Сделал так, через опу, работает, но требует 2 области что не есть хорошо. Вы не могли подсказать как правильно вызвать функцию по смене прозрачности?
<head>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="maphilight.js"></script>
<script>
$(function() {
$('.map').maphilight();
$('#starlink2').click(function(e) {
e.preventDefault();
var data = $('#star').data('maphilight') || {};
data.alwaysOn = !data.alwaysOn;
$('#star').data('maphilight', data).trigger('alwaysOn.maphilight');
});
});
</script>
</head>
<body>
<img src="img.gif" width="300" height="300" class="map" usemap="#features">
<map name="features">
<area shape="poly" alt="" id="starlink2" onfocus="this.blur();" class="{alwaysOn:false,stroke:false,fillColor:'000000',fillOpacity:0.2}" coords="58,117,49,141,48,153,61,159,67,151,68,142,66,128,61,132,61,124,65,119" href="#" onclick="result();" >
<area shape="poly" id="star" alt="" onfocus="this.blur();" class="{alwaysOn:true,stroke:false,fillColor:'ffc000',fillOpacity:0.1}" coords="58,117,49,141,48,153,61,159,67,151,68,142,66,128,61,132,61,124,65,119" href="#" onclick="result();" >
</map>
</body>
Последний раз редактировалось Reflexion, 17.03.2011 в 17:15.
|
|
17.03.2011, 18:53
|
|
Аспирант
|
|
Регистрация: 25.10.2009
Сообщений: 51
|
|
|
Может стоит выложить подключаемую библиотеку maphilight.js чтобы стало понятнее?
|
|
17.03.2011, 23:28
|
 |
|
|
Регистрация: 27.12.2008
Сообщений: 4,201
|
|
|
Сообщение от Reflexion
|
|
Хочу сделать подсветку определенной области на картинке и при наведении на эту область ещё сильнее сделать подстветку.
|
почему не сделать изображение изначально таким как нужно, а потом подсвеичвать область еще сильнее? |
|
18.03.2011, 16:47
|
|
Аспирант
|
|
Регистрация: 25.10.2009
Сообщений: 51
|
|
|
Области рендомно меняются, картинка 900х500 и областей именно на этой картинке 150шт, таких картинок будет 25шт. Размер файла, колличество картинок и нужных областей слишком велико чтобы делать для каждой области новую картинку. Нужно изначально задать подсветку области на 20%, а потом при наведении изменить на 40%. Корректно сделать не получается, а накладывать 2 карты изображения тоже не хочется(
|
|
18.03.2011, 20:46
|
|
Аспирант
|
|
Регистрация: 25.10.2009
Сообщений: 51
|
|
Разобрался. Ноипоявилась другая проблема. Теперь код выглядит так
<head>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="maphilight.js"></script>
<script>
$(function() {
$('.map').maphilight();
$('#star').click(function(e) {
e.preventDefault();
var data = $('#star').data('maphilight') || {};
data.fillOpacity = 0.4
$('#star').data('maphilight', data).trigger('alwaysOn.maphilight');
});
});
</script>
</head>
<body>
<img src="img.gif" width="300" height="300" class="map" usemap="#features">
<map name="features">
<area shape="poly" id="star" alt="" onfocus="this.blur();" class="{alwaysOn:true,stroke:false,fillColor:'ffc000',fillOpacity:0.1}" coords="58,117,49,141,48,153,61,159,67,151,68,142,66,128,61,132,61,124,65,119" href="#" onclick="result();" >
<area shape="poly" id="star2" alt="" onfocus="this.blur();" class="{alwaysOn:true,stroke:false,fillColor:'ffc000',fillOpacity:0.1}" coords="1,1,44,44,55,55,66,66,11,11" href="#" onclick="result();" >
</map>
</body>
Так работает для 1го элемента. Для второго можно продублировать функцию, но опять же примитивно.
если сделать вот так
var='star';
$(function() {
$('.map').maphilight();
$('#''+ a +').click(function(e) {
e.preventDefault();
var data = $('#'+ a +'').data('maphilight') || {};
data.fillOpacity = 0.4
$('#'+ a +'').data('maphilight', data).trigger('alwaysOn.maphilight');
});
});
<area shape="poly" id="star2" onmouseover='a="star2";' alt="" onfocus="this.blur();" class="{alwaysOn:true,stroke:false,fillColor:'ffc000',fillOpacity:0.1}" coords="1,1,44,44,55,55,66,66,11,11" href="#" onclick="result();" >
Но так ничего не происходит, похоже на то что один раз функция проинициализировалась с исходной переменной а, и при замене переменной, это действие никакого влияение на функцию не оказывает. Тут крутятся мысли что каким-то образом надо вызвать ту функция и вместо $('#'+ a +'') поставить $(this)... Но как реализовать вызов функции не знаю, и будет ли так работать? Гуру яваскрипта помогите пжл
Последний раз редактировалось Reflexion, 18.03.2011 в 21:02.
|
|
19.03.2011, 05:55
|
|
|
|
Регистрация: 27.12.2008
Сообщений: 4,201
|
|
чтобы не дублировать area, их можно скопировать с помощью javascript
<!DOCTYPE HTML>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script type="text/javascript" src="http://davidlynch.org/js/maphilight/docs/jquery.metadata.min.js"></script>
<script type="text/javascript" src="http://davidlynch.org/js/maphilight/jquery.maphilight.min.js"></script>
<script type="text/javascript">
$(function(){
$('.map').map( imgToMap ).find('area')
.each( duplicateArea )
$('.map').maphilight();
});
function duplicateArea(){
var alwaysOnArea = $(this).clone();
alwaysOnArea.metadata().fillOpacity -= 0.1;
alwaysOnArea.metadata().alwaysOn = true;
alwaysOnArea.get(0).id = null;
alwaysOnArea.insertAfter(this);
}
function imgToMap(){
var mapName = this.getAttribute('usemap').substr(1);
return $('map[name='+mapName+']').get(0);
}
</script>
</head>
<body>
<img src="http://davidlynch.org/js/maphilight/docs/demo_simple.png" width="420" height="300" class="map" usemap="#features">
<map name="features">
<area shape="poly" onfocus="this.blur();" class="{alwaysOn:false,stroke:false,fillColor:'000000',fillOpacity:0.2}" coords="58,117,49,141,48,153,61,159,67,151,68,142,66,128,61,132,61,124,65,119" href="#">
<area shape="poly" onfocus="this.blur();" class="{alwaysOn:false,stroke:false,fillColor:'000000',fillOpacity:0.2}" coords="1,1,44,44,55,55,66,66,11,0" href="#">
</map>
</body>
</html>
твой последний вариант - совсем не тру
если расскажешь подробнее, что это за изображение, и что там за области, и как оно работает - помогу с дублированием областей
p.s. было бы намного проще, если бы твой код можно было запустить прямо на сайте. Как видишь, для этого есть все возможности. Получил бы быстрее ответ или просто больше людей участвовало бы в обсуждении
|
|
|
|
