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

askarbin · 26 Ноя 2009

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

Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.

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

mdss · 26 Ноя 2009

это делается на css, каждую ссылку помещаешь в блок. В этот блок помещаешь еще один блок (скрытый), с информацией, что должна появляться справа. При событии hover через стили делаешь, чтобы блок показывался

askarbin · 30 Ноя 2009

Все-таки возвращаясь к вопросу, сделал вот так

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

Aupov911 · 30 Ноя 2009

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

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

Eihwaz · 30 Ноя 2009

Стандартная DOM-функция для этих дел это setAttribute:

HTML:

document.getElementById(obj).setAttribute("class", "visible");

askarbin · 30 Ноя 2009

В общем нашел такое решение, все работает в нужных мне браузерах.

Код:

<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 понимает или другой какой-нить способ может быть

Eihwaz · 30 Ноя 2009

Сделайте по-другому лучше.
Смотрите, у вас есть список (допустим, авторы). У каждого из этих авторов есть картина, которую нужно показать при наведении на ссылку с именем этого автора.
Отобразим автором в виде ссылок, а названия файлов их картин внесем в аттрибут 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 · 30 Ноя 2009

А в догонку еще вопрос, если мне под картинкой нужно еще уникальный текст для нее вывести, как быть?

Eihwaz · 30 Ноя 2009

Если уникальный текст короткий (пара слов), то можно по такой схеме:

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 · 1 Дек 2009

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

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

askarbin

Профессор

mdss

♖♘♗♕♔♗♘♖

askarbin

Профессор

Aupov911

Прохожие

Eihwaz

Гуру форума

askarbin

Профессор

Eihwaz

Гуру форума

askarbin

Профессор

Eihwaz

Гуру форума

askarbin

Профессор