Форум PHP программистов > onmouseover и onmouseout на границе изображений

[ Поиск ] - [ Пользователи ] - [ Календарь ]

Полная Версия: onmouseover и onmouseout на границе изображений

twin

10.05.2009 - 00:59

Вот накропал я такой незатейливый скриптец:

HTML

<div style=" margin:2px; padding:3px; border:1px solid; float:left;height:200px;width:110px" id="div1" onmouseover="document.getElementById('div2').style.display='block'; this.style.display='none'" >
<img src="1.gif" style="border:1px solid;" /><br />
Заяц.<br />
текст текст
</div>
<div style="margin:2px; padding:3px; border:1px solid;float:left;display:none;height:200px; width:110px" id="div2" onmouseout="document.getElementById('div1').style.display='block'; this.style.display='none'" >
<img src="2.gif" style="border:1px solid;z-index:100" />
Кот.<br />
другой текст
</div>

Вот тут в действии. И всё бы ничего, но если мышко навести на бордюрчик картинки(я специально поставил), то происходит неладное(((.
Кто нибудь знает, как с этим бороться?

Спустя 22 минуты, 59 секунд (10.05.2009 - 00:22) FatCat написал(а):

Старая проблема джаваскрипт с events-ами.

ИМХО, лучше использовать конструкции:

HTML

<href="javascript:;" onmouseover="javascript:show('1')" onmouseout="javascript:show('2')"><div id="change">бла-бла-бла1</div></a>

А джаваскриптовая функция show(mod) в зависимости от модификатора методом innerHTML перезапишет содержимое дива.

Спустя 15 минут, 28 секунд (10.05.2009 - 00:37) twin написал(а):

Я так делал, проблема в том, что там во внутреннем диве ссылка. А как на ссылку попадешь - он обратно перезаписывает. Так хоть и моргает, но всё же. Знач нету выхода?

Спустя 1 час, 5 минут, 45 секунд (10.05.2009 - 01:43) FatCat написал(а):

Цитата (twin @ 10.05.2009 - 00:37)

Знач нету выхода?

Можно попробовать обнулить все margin-ы, border-ы и прочие padding-и...
Если по дизайну нужен бордюрчик, врисовать в картинку или сотворить HTML-средствами типа такого кода:

PHP

<table border="0" cellspacing="0" cellpadding="0">
<tr>
    <td bgcolor="#000000">
        <table border="0" cellspacing="1" cellpadding="7">
        <tr>
            <td bgcolor="#FFFFFF">
            Содержимое в бордюрчике
            </td>
        </tr>
        </table>
    </td>
</tr>
</table>

Спустя 12 минут, 42 секунды (10.05.2009 - 01:56) kirik написал(а):

Забацай с внешним дивом:

PHP

'<script>
function ge(id)
{
    return document.getElementById(id);
}

function changeIt(t)
{
    switch(t)
    {
        case 1:
            ge('div_1').style.display = 'none';
            ge('div_2').style.display = 'block';
        break;
        case 2:
            ge('div_2').style.display = 'none';
            ge('div_1').style.display = 'block';
        break;
    }
}
</script>

<div style="margin: 2px; padding: 3px; border: 1px solid #000; float: left; height: 200px; width: 110px" onmouseover="changeIt(1)" onmouseout="changeIt(2)">
    <div id="div_1">
        <img src="http://irbis-team.com/ower/1.gif" style="border:1px solid;" /><br />Заяц.<br />текст текст
    </div>

    <div id="div_2" style="display: none;">
        <img src="http://irbis-team.com/ower/2.gif" style="border:1px solid;z-index:100" />Кот.<br />другой текст
    </div>
</div>'

Спустя 21 минута, 30 секунд (10.05.2009 - 02:17) twin написал(а):

FatCat
Я пробовал, чёт не вышло толку...
kirik
Гениально! Осталось как то раскатать на неопределенное количество элементов, но это уже мелочи.
Обидно, я сам недавно советовал похожее и сам же забыл

Стыд и срам.
Спасибо, мужики.

Спустя 7 минут, 38 секунд (10.05.2009 - 02:25) kirik написал(а):

Цитата (twin @ 9.05.2009 - 18:17)

Обидно, я сам недавно советовал похожее и сам же забыл

Да, бывают затмения

А если будет несколько, лучше обращаться к дивам по номеру (чтобы не плодить айдишники):

Свернутый текст

PHP

'<script>
function changeIt(obj, t)
{
    var divs = obj.getElementsByTagName('div');

    switch(t)
    {
        case 1:
            divs[0].style.display = 'none';
            divs[1].style.display = 'block';
        break;
        case 2:
            divs[1].style.display = 'none';
            divs[0].style.display = 'block';
        break;
    }
}
</script>

<div style=" margin:2px; padding:3px; border:1px solid; float:left;height:200px;width:110px" onmouseover="changeIt(this, 1)" onmouseout="changeIt(this, 2)">
    <div>
        <img src="http://irbis-team.com/ower/1.gif" style="border:1px solid;" /><br />Заяц.<br />текст текст
    </div>

    <div style="display: none;">
        <img src="http://irbis-team.com/ower/2.gif" style="border:1px solid;" />Кот.<br />другой текст
    </div>
</div>


<div style=" margin:2px; padding:3px; border:1px solid; float:left;height:200px;width:110px" onmouseover="changeIt(this, 1)" onmouseout="changeIt(this, 2)">
    <div>
        <img src="http://irbis-team.com/ower/1.gif" style="border:1px solid;" /><br />Заяц.<br />текст текст
    </div>

    <div style="display: none;">
        <img src="http://irbis-team.com/ower/2.gif" style="border:1px solid;" />Кот.<br />другой текст
    </div>
</div>'

Здесь не нужно назначать каждому диву свой АйДи, кода будет меньше

Спустя 58 минут, 46 секунд (10.05.2009 - 03:23) twin написал(а):

Спс, уже сделал. По номеру не выйдет, там куча других, динамически появляющихся. А по айдишнику просто чудесно работает.
Это мы всё мамбу мучаем, скоро премьера будет

_____________
Если вам недостаточно собственных заблуждений, можно расширить их мнениями экспертов.

Нужно уважать мнение оппонета. Ведь заблуждаться - его святое право.

Настаивал, настаиваю и буду настаивать на своем. На кедровых орешках.

user posted image

Быстрый ответ:

Здесь расположена полная версия этой страницы.