Настройки Плагина Maphilight

Тема в разделе "HTML, CSS, XML, JavaScript", создана пользователем newacc2010, 28 фев 2013.

  1. newacc2010

    newacc2010 New Member

    Регистрация:
    28 фев 2013
    Сообщения:
    1
    Симпатии:
    0
    Добрый день!

    вживую: http://jsfiddle.net/dRz9U/162/

    Суть такова: есть изображение (план помещений на этаже), каждое помещение имеет два состояния (занято/свободно). Изображение порезано на области с помощью map area, для каждой области есть своя кнопка, (занять/освободить). С помощью кнопок областям должна задаваться красная подсветка (занято) или зеленая (свободно). Нашел jQuery плагин maphilight, который позволяет подсвечивать области изображения, но он работает не совсем корректно. С javascript раньше не был знаком.

    <div class="sp-wrap"><div class="sp-head-wrap"><div class="sp-head folded clickable">"HTML"</div></div><div class="sp-body"><div class="sp-content"><img class="map" src="http://i54.fastpic.ru/big/2013/0228/11/73d7f26fd495e7631003cf6251af2d11.png" alt="" usemap="#mainmap" />
    <map name="mainmap">

    <area id="1room" data-areanum="room1" shape="poly"
    coords="116, 93, 164, 94, 164, 131, 157, 131, 157, 157, 116, 157" title="1 комната" data-maphilight='{"stroke":true,"strokeColor":"ff0000","strokeOpacity":0.6,"fillColor":"ff0000","fillOpacity":0.1}'>

    <area id="2room" data-areanum="room2" shape="rect"
    coords="197, 93, 264, 153" title="2 комната" data-maphilight='{"stroke":true,"strokeColor":"ff0000","strokeOpacity":0.6,"fillColor":"ff0000","fillOpacity":0.1}'>

    <area id="3room" data-areanum="room3" shape="rect"
    coords="270, 94, 365, 152" title="3 комната"
    data-maphilight='{"stroke":true,"strokeColor":"ff0000","strokeOpacity":0.6,"fillColor":"ff0000","fillOpacity":0.1}'>

    <area id="4room" data-areanum="room4" shape="rect"
    coords="370, 93, 470, 153" title="4 комната"
    data-maphilight='{"stroke":true,"strokeColor":"ff0000","strokeOpacity":0.6,"fillColor":"ff0000","fillOpacity":0.1}'>

    <area id="5room" data-areanum="room5" shape="rect"
    coords="474, 93, 537, 153" title="5 комната"
    data-maphilight='{"stroke":true,"strokeColor":"ff0000","strokeOpacity":0.6,"fillColor":"ff0000","fillOpacity":0.1}'>

    <area id="6room" data-areanum="room6" shape="poly"
    coords="587, 154, 587, 126, 568, 126, 568, 94, 540, 94, 540, 142, 572, 142, 572, 154" title="6 комната"
    data-maphilight='{"stroke":true,"strokeColor":"ff0000","strokeOpacity":0.6,"fillColor":"ff0000","fillOpacity":0.1}'>

    <area id="7room" data-areanum="room7" onclick="ahah_change_index(title)" shape="poly"
    coords="629, 155, 629, 107, 623, 107, 623, 94, 572, 94, 572, 124, 591, 125, 591, 155" title="7 комната" data-maphilight='{"stroke":true,"strokeColor":"ff0000","strokeOpacity":0.6,"fillColor":"ff0000","fillOpacity":0.1}'>

    </map>


    <form id="filter_form" action="" method="get" accept-charset="UTF-8">
    <div><input type="hidden" name="utf8" /></div>
    <fieldset class="filter_form_fieldset areas">
    <p class="area_check"><input id="room1" name="areas[]" type="checkbox" />
    <label for="room1"><p1>1 комната</p1></label></p>

    <p class="area_check"><input id="room2" name="areas[]" type="checkbox" />
    <label for="room2"><p1>2 комната</p1></label></p>

    <p class="area_check"><input id="room3" name="areas[]" type="checkbox" />
    <label for="room3"><p1>3 комната</p1></label></p>

    <p class="area_check"><input id="room4" name="areas[]" type="checkbox" />
    <label for="room4"><p1>4 комната</p1></label></p>

    <p class="area_check"><input id="room5" name="areas[]" type="checkbox" />
    <label for="room5"><p1>5 комната</p1></label></p>

    <p class="area_check"><input id="room6" name="areas[]" type="checkbox" />
    <label for="room6"><p1>6 комната</p1></label></p>

    <p class="area_check"><input id="room7" name="areas[]" type="checkbox" />
    <label for="room7"><p1>7 комната</p1></label></p>
    </fieldset>
    </form>

    <div class="sp-wrap"><div class="sp-head-wrap"><div class="sp-head folded clickable">"javascript"</div></div><div class="sp-body"><div class="sp-content">$(function() {
    $(".areas").buttonset();
    });

    $(function() {
    $('.map').maphilight();

    $('#1room, #2room, #3room, #4room, #5room, #6room, #7room').click(function(e) {
    e.preventDefault();
    var $this = $(this);
    var data = $this.mouseout().data('maphilight') || {};
    data.alwaysOn = !data.alwaysOn;
    $this.data('maphilight', data).trigger('alwaysOn.maphilight');
    });
    });

    $(function() {
    var $area = $('area');
    $area.click(function(){
    var $checkbox = $('#' + $(this).data("areanum"));
    $checkbox.attr('checked', !$checkbox.attr('checked')).button('refresh');
    });
    $('label').click(function () {
    $area.filter('[data-areanum="' + $(this).attr('for') + '"]').trigger('click');
    return false;
    });
    });

    Помогите, пожалуйста, поправить следующие моменты:
    1) подсветка для областей должна работать только при нажатии на соответствующую кнопку. Как убрать подсветку при клике на саму область?
    2) при наведении на область должна подсвечиваться только её граница

    Также есть задумка хранить значения областей (занято/свободно) в бд. Т.е. при клике на кнопку меняется значение в базе данных и при повторной загрузке страницы занятые комнаты изначально подсвечиваются красным, а свободные - зеленым. Я понимаю, что для этого нужно для каждой области указать какойнибудь атрибут free/busy, затем создать табличку и полями id комнаты и полем состояние комнаты. Не могу сообразить как конкретно это реализовать, используя уже существующие наработки.

    Помогите, пожалуйста, подобрать подходящее решение!
     
Загрузка...

Поделиться этой страницей