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

[norka13]

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

 

[KillDead]

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

На каждую болезнь на повесить событие которое будет происходить при наведении
Для просмотра ссылки Войди или Зарегистрируйся

В событие прописать методы show() и hide() сотв слоя Для просмотра ссылки Войди или Зарегистрируйся

 

[recasher2k12]

Используй <CANVAS>. Есть удобная библиотека вам в помощь Для просмотра ссылки Войди или Зарегистрируйся Анимация получается очень крутая. Там все еще проще чем во флэше я считаю...

 

[latteo]

Алгоритм KillDead хорош и лёгок в реализации, но может потребовать загрузки множества файлов, что будет наказанием для людей с медленным интернетом и малым количество оперативки...

CANVAS тоже хороший вариант, но вот с поддержкой браузеров у него проблемы, еще много людей на старье сидит - у них будут проблемы.
Зато можно реализовать затемнение ( область с прозрачностью скажем в 70%) не выделенного, таким способом выделив необходимое. Вот урок в тему Для просмотра ссылки Войди или Зарегистрируйся
Тот же самый алгоритм вполне реально сделать и на чистом jquery/javascript при желании тоже можно нагуглить, например по фразе "jquery|javascript выделить область"

 

[norka13]

Всем спасибо. Начала разбираться. Криво конечно но вот:

    <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

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

 

[recasher2k12]

Как сделать чтобы после того как мышь ушла с ссылки содержимое блока исчезало.

<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 #id_div и #id2_div

 

[norka13]

Спасибо всем за помощь! Все получилось. Только вот такой вопрос. Картинки у меня залиты в корень сайта. Но есть разделы которые подразумевают использование папок. Как сделать так чтобы до картинок писался полный Url например Для просмотра ссылки Войди или Зарегистрируйся сайта.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>

 

[dino]

$('#img').attr('src', 'Для просмотра ссылки Войди или Зарегистрируйся сайта.ru/images/'+num+'.png');