Зависимая от меню картинка

Тема в разделе "JavaScript", создана пользователем norka13, 20 июл 2012.

Модераторы: ZiX
  1. norka13

    norka13 Создатель

    Заблокирован
    Регистр.:
    23 фев 2009
    Сообщения:
    41
    Симпатии:
    2
    Добрый день. Возникла потребность сделать такую вещь. Есть список болезней справа и скелет справа. Нужно сделать чтобы при наведении на болезнь на скелете выделялся кусок отвечающий за болезнь (рука, нога, ухо). Реально вообще такое сделать?
    Я от javascript очень далека. На флеш бы легко сделала, но клиент считает флеш злом.
    Если не сложно подскажите в какую сторону копать. Ну и на крайний случай стоимость такой работы, если вы готовы сделать её.
     
  2. KillDead

    KillDead

    Регистр.:
    11 авг 2006
    Сообщения:
    884
    Симпатии:
    540
    реально. напр на jquery
    над скелетом сделать слои с картинками у которой либо выделена нужная часть, либо всё кроме неё вырезано. Дать ИД слоя YXO, RYKA и тп. И задать слить слоя display:none

    На каждую болезнь на повесить событие которое будет происходить при наведении
    http://api.jquery.com/hover/

    В событие прописать методы show() и hide() сотв слоя http://api.jquery.com/show/
     
  3. recasher2k12

    recasher2k12

    Регистр.:
    19 фев 2012
    Сообщения:
    156
    Симпатии:
    78
    Используй <CANVAS>. Есть удобная библиотека вам в помощь http://raphaeljs.com/ Анимация получается очень крутая. Там все еще проще чем во флэше я считаю...
     
  4. latteo

    latteo Эффективное использование PHP, MySQL

    Moderator
    Регистр.:
    28 фев 2008
    Сообщения:
    1.450
    Симпатии:
    1.239
    Алгоритм KillDead хорош и лёгок в реализации, но может потребовать загрузки множества файлов, что будет наказанием для людей с медленным интернетом и малым количество оперативки...

    CANVAS тоже хороший вариант, но вот с поддержкой браузеров у него проблемы, еще много людей на старье сидит - у них будут проблемы.
    Зато можно реализовать затемнение ( область с прозрачностью скажем в 70%) не выделенного, таким способом выделив необходимое. Вот урок в тему http://ruseller.com/lessons.php?rub=32&id=952
    Тот же самый алгоритм вполне реально сделать и на чистом jquery/javascript при желании тоже можно нагуглить, например по фразе "jquery|javascript выделить область"
     
  5. norka13

    norka13 Создатель

    Заблокирован
    Регистр.:
    23 фев 2009
    Сообщения:
    41
    Симпатии:
    2
    Всем спасибо. Начала разбираться. Криво конечно но вот:
    Код:
        <table width="100%"><tr><td  width="113"><div style="display: none;width:144px; height:526px;"><div id="1">55</div><div id="2">66</div></div></td><td id="2" class="2" align="right" valign="top"><span  id="osteohandroz1">ссылка</span><span  id="osteohandroz2">ссылка2</span></td></tr></table>
     
     
    <script>
        $("#osteohandroz1").hover(function () {
        $("div").show("slow");
        });
            $("#osteohandroz2").hover(function () {
        $("div").show("slow");
        });
        </script>
    У меня вопрос, как сделать чтобы высвечивался блок с конкретным Id.
    Например при наведении на ссылку 1 показывался блок с id=1

    И еще один вопрос. Как сделать чтобы после того как мышь ушла с ссылки содержимое блока исчезало.
     
  6. recasher2k12

    recasher2k12

    Регистр.:
    19 фев 2012
    Сообщения:
    156
    Симпатии:
    78
    Код:
    <script>
    $("#osteohandroz1").hover(function () {
        $("div#id_div").show("slow");
    }, function() {
        $("div#id_div").hide("slow");
    });
    $("#osteohandroz2").hover(function () {
        $("div#id2_div").show("slow");
    }, function() {
        $("div#id2_div").hide("slow");
    });
      </script>
    
    в примере выше будут появляться блоки с id #id_div и #id2_div
     
  7. norka13

    norka13 Создатель

    Заблокирован
    Регистр.:
    23 фев 2009
    Сообщения:
    41
    Симпатии:
    2
    Спасибо всем за помощь! Все получилось. Только вот такой вопрос. Картинки у меня залиты в корень сайта. Но есть разделы которые подразумевают использование папок. Как сделать так чтобы до картинок писался полный Url например http://имя сайта.ru/images/menu1.jpg а не просто menu1.jpg
    Скрипт который реализует у меня все это безобразие выглядит так:
    Код:
    <script type="text/javascript">
    // JavaScript Document
    $(document).ready(function(){
            $('a.menu').hover(
                function() {
                    id = $(this).attr('id');
                    num = id.replace(/menu(\d+)/gi, '$1');
                    $('#img').attr('src', num+'.png');
                },
                function() {
                    $('#img').attr('src', 'default.png');
                }
            );   
    });
    </script>
     
  8. dino

    dino

    Регистр.:
    28 май 2009
    Сообщения:
    550
    Симпатии:
    204
    $('#img').attr('src', 'http://имя сайта.ru/images/'+num+'.png');
     
    norka13 нравится это.