Помогите раелизовать событие по onmouseover (подобрать плагин mootools)

Тема в разделе "Веб-дизайн", создана пользователем askarbin, 26 ноя 2009.

Статус темы:
Закрыта.
Модераторы: zek24
  1. askarbin

    askarbin

    Регистр.:
    31 мар 2009
    Сообщения:
    292
    Симпатии:
    36
    Обращаюсь к тем, кто уже сталкивался с похожей задачей. Нужно в краткие сроки найти готовое решение для того, чтобы сделать страничку как здесь

    Перейти по ссылке
    Т.е. чтобы при наведении мыши на фамилию художника в боковом окошке показывалась его фамилия.
    К сожалению в JavaScript несилен, а начальство требует и побыстрее, на офф сайте мутулзов таких вещей не нашел. Может кто сталкивался уже с похожей задачей. Буду признателен за помощь
     
  2. mdss

    mdss ♖♘♗♕♔♗♘♖

    Moderator
    Регистр.:
    20 фев 2007
    Сообщения:
    1.134
    Симпатии:
    668
    это делается на css, каждую ссылку помещаешь в блок. В этот блок помещаешь еще один блок (скрытый), с информацией, что должна появляться справа. При событии hover через стили делаешь, чтобы блок показывался
     
    askarbin нравится это.
  3. askarbin

    askarbin

    Регистр.:
    31 мар 2009
    Сообщения:
    292
    Симпатии:
    36
    Все-таки возвращаясь к вопросу, сделал вот так

    HTML:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <TITLE></TITLE>
    
    <link href="style.css" rel="stylesheet" type="text/css" />
    <script language="JavaScript">
    function showObject(obj) {
        obj.className = "visible"
    }
    function hideObject(obj) {
        obj.className = "hidden"
    }
    </script>
    </head>
    Сюда наводим

    Код:
    <div onMouseOver="javascript:showObject(Nav1)" onMouseOut="javascript:hideObject(Nav1)"><a href="one_artist.html"  class="artist_details">БАКАЕВ  С.И.</a></div>
    					<p>		<a href="one_artist.html"  class="artist_details">БАКАЕВ  С.И.</a><br />
    Здесь выводим див

    Код:
    <div id="Nav1" class="hidden" onMouseOver="javascript:showObject(Nav1)" onMouseOut="javascript:hideObject(Nav1)" style="position:absolute; top:183px;">
    				<p><img src="images/index_08.gif" width="150" alt="Picture" title="Picture" align="right" border="0" />
    				Name
    				<br /><br />1900-1900</p>
    				<p class="clear" align="center">Picture</p>
    				</div>
    Все едет в опере, хроме, ИЕ8. Но почему-то не отображается в FireFox
     
  4. Aupov911

    Aupov911 Прохожие

    Всякое бывает

    Ну возможно просто с классами проблема. Попробуй с классами поколдуй мож че и выйдет.
    тоесть classes
     
  5. Eihwaz

    Eihwaz

    Регистр.:
    7 окт 2007
    Сообщения:
    156
    Симпатии:
    54
    Стандартная DOM-функция для этих дел это setAttribute:
    HTML:
    
    document.getElementById(obj).setAttribute("class", "visible");
    
     
    askarbin нравится это.
  6. askarbin

    askarbin

    Регистр.:
    31 мар 2009
    Сообщения:
    292
    Симпатии:
    36
    В общем нашел такое решение, все работает в нужных мне браузерах.
    Код:
    <script>
    function setElementVisibility(elementToSet, showItSwitch, keepPlacementSwitch){
     if (showItSwitch) {
       elementToSet.style.display = "inline";
       elementToSet.style.visibility = "visible";
     }
     else{
       if (keepPlacementSwitch) {
         elementToSet.style.display = "inline";
         elementToSet.style.visibility = "hidden";
       }
       else{
         elementToSet.style.display = "none";
       }
     }
    }
    function hideTable(){
     setElementVisibility(document.getElementById("myTable"), false, true);
    }
    function showTable(){
     setElementVisibility(document.getElementById("myTable"), true);
    }
    </script>
    Ссылка

    Код:
    <a href="one_artist.html" onMouseOver="showTable()" onMouseOut="hideTable()" class="artist_details">
    Выводим блок

    Код:
    <div id="myTable" style="visibility:hidden">
    				...
    				</div>
    Подскажите, как мне организовать вывод в цикле, допустим у меня 10 ссылок и для каждой из них разное содержимое, это все я из БД вытащу, а как быть с функцией, не плодить же мне функции для каждого элемента, подскажите, кто в синтаксисе JS понимает или другой какой-нить способ может быть
     
  7. Eihwaz

    Eihwaz

    Регистр.:
    7 окт 2007
    Сообщения:
    156
    Симпатии:
    54
    Сделайте по-другому лучше.
    Смотрите, у вас есть список (допустим, авторы). У каждого из этих авторов есть картина, которую нужно показать при наведении на ссылку с именем этого автора.
    Отобразим автором в виде ссылок, а названия файлов их картин внесем в аттрибут rel:
    HTML:
    
    <div id="artists_block">
        <a href="#" rel="burlaki.jpg">Репин</a>
        <a href="#" rel="moskovski_dvorik.jpg">Поленов</a>
        <a href="#" rel="svatovstvo_mayora.jpg">Федотов</a>
        <a href="#" rel="utro_v_sosnovom_boru.jpg">Шишкин</a>
        <a href="#" rel="grachi_prileteli.jpg">Саврасов</a>
    </div>
    
    ну и блок, который должен отображать сами картины:
    HTML:
    
    <div id="myTable" style="visibility:hidden; ">
    </div>
    
    Теперь при помощи javascript обойдем все ссылки в div с id="artists_block" и поназначаем им события onmouseover и onmouseout:
    Код:
    function links() {
        var preview_block;
        var links;
        var img;
        [COLOR="DarkOrange"]// Получаем все ссылки в нужном блоке:[/COLOR]
        links = document.getElementById('artists_block').getElementsByTagName('a');
        [COLOR="DarkOrange"]// Получаем блок для просмотра картинок:[/COLOR]
        preview_block = document.getElementById('myTable');
        for (var i=0; i < links.length; i++)
        {
            [COLOR="DarkOrange"]// Создаем новый рисунок[/COLOR]
            img = document.createElement('img');
            [COLOR="DarkOrange"]// При наведении на ссылку[/COLOR]
            links[i].onmouseover = function () {
                [COLOR="DarkOrange"]// Устанавливаем рисунку аттрибут src[/COLOR]
                img.src = "images/" + this.getAttribute('rel');
                [COLOR="DarkOrange"]// Отображаем блок просмотра[/COLOR]
                preview_block.style.visibility = "visible";
                [COLOR="DarkOrange"]// Добавляем в блок просмотра картинку[/COLOR]
                preview_block.appendChild(img);
            }
            [COLOR="DarkOrange"]// Если мышь больше не наведена[/COLOR]
            links[i].onmouseout = function () {
                [COLOR="DarkOrange"]// Выключаем отображение блока[/COLOR]
                preview_block.style.visibility = "hidden";
                [COLOR="DarkOrange"]// Удаляем картинку из DOM[/COLOR]
                preview_block.removeChild(img);
            }
        }
    }
    
    Теперь только <body onload="links()">
     
    askarbin нравится это.
  8. askarbin

    askarbin

    Регистр.:
    31 мар 2009
    Сообщения:
    292
    Симпатии:
    36
    А в догонку еще вопрос, если мне под картинкой нужно еще уникальный текст для нее вывести, как быть?
     
  9. Eihwaz

    Eihwaz

    Регистр.:
    7 окт 2007
    Сообщения:
    156
    Симпатии:
    54
    Если уникальный текст короткий (пара слов), то можно по такой схеме:
    HTML:
    
    <a href="#" rel="svatovstvo_mayora.jpg" title="Всего на сайте 16 работ">Федотов</a>
    
    И в javascript:
    HTML:
    
    img = document.createElement("img");
    desc_div = document.createElement("div");
    links[i].onmouseover = function () {
        img.src = "images/" + this.getAttribute('rel');
        desc_div.innerHTML = this.getAttribute('title');
        preview_block.style.visibility = "visible";
        preview_block.appendChild(img);
        preview_block.appendChild(desc_div);
    }
    links[i].onmouseout = function () {
        preview_block.style.visibility = "hidden";
        preview_block.removeChild(img);
        preview_block.removeChild(desc_div);
    }
    
    Если же он большой, то, наверное, нужно будет подгружать либо при помощи ajax, либо создавать для каждой ссылки свой div с этим текстом, который изначально невидим, и при наведении отображать его в нужном месте.
    Сейчас уникальный текст отображается в новом div'e. Понятно, что вы захотите ем какие-то стили прописать, сделать это можно так:
    Код:
    desc_div.id = 'desc_fedotov'; // id
    desc.div.className = 'description_div' // class
    
     
    askarbin нравится это.
  10. askarbin

    askarbin

    Регистр.:
    31 мар 2009
    Сообщения:
    292
    Симпатии:
    36
    С новым дивом все получилось. Спасибо вам за помощь, думаю, я не последний кому это может пригодится
     
Статус темы:
Закрыта.