Как сделать вот такое меню

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

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

    UDAV

    Регистр.:
    22 июн 2007
    Сообщения:
    780
    Симпатии:
    153
    Как сделать вот такое меню, где-то видел, но не помню где.
    [​IMG]
    Вообщем при наведении на "Меню 1 2 3 4" меняется "Картинка".
     
  2. shoman

    shoman Создатель

    Регистр.:
    8 янв 2008
    Сообщения:
    28
    Симпатии:
    8
  3. omfg

    omfg

    Регистр.:
    4 авг 2009
    Сообщения:
    159
    Симпатии:
    46
    Можно легко сделать при помощи одного лишь сss.
    Должно быть примерно вот так:
    PHP:
    <ul>
        <
    li><a href="#"><img src="image1.jpg" />Меню 1</a></li>
        <
    li><a href="#"><img src="image2.jpg" />Меню 2</a></li>
        <
    li><a href="#"><img src="image3.jpg" />Меню 3</a></li>
        <
    li><a href="#"><img src="image4.jpg" />Меню 4</a></li>
    <
    ul>
    Т.е. делаешь как бы обычное меню с картинками. Но изображения затем позиционируешь абсолютно, т.е. намного левей самого меню. В стилях прописываешь li a:hover img{display:block} и li a img{display:none}. В итоге изображения будут появляться лишь при наведении курсора на ссылку.
     
    UDAV нравится это.
  4. polyetilen

    polyetilen Заблокирован

    Регистр.:
    10 авг 2006
    Сообщения:
    814
    Симпатии:
    474
    HTML:
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    
    <script language="JavaScript" type="text/javascript">
    kartinka0 = 'https://www.nulled.cc/image.php?u=23801&dateline=1196369786';
    kartinka1 = 'https://www.nulled.cc/nulled_v4/misc/skin/logo.png';
    kartinka2 = 'http://www.google.ru/logos/galileo09.gif';
    kartinka3 = 'http://www.google.com/options/icons/chrome.gif';
    </script>
    
    </head>
    <body>
    <table width="200" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td><img src="https://www.nulled.cc/image.php?u=23801&dateline=1196369786" name="kartinka" width="64" height="64" id="kartinka" /></td>
        <td>
        <p><a href="#" onmouseover="document.getElementById('kartinka').src=kartinka1;" onmouseout="document.getElementById('kartinka').src=kartinka0;">меню 1</a></p>
        <p><a href="#" onmouseover="document.getElementById('kartinka').src=kartinka2;" onmouseout="document.getElementById('kartinka').src=kartinka0;">меню 2</a></p>
        <p><a href="#" onmouseover="document.getElementById('kartinka').src=kartinka3;" onmouseout="document.getElementById('kartinka').src=kartinka0;">меню 3</a></p>
        </td>
      </tr>
    </table>
    
    
    </body>
    </html>
    
    
     
    UDAV нравится это.
  5. v1lat

    v1lat Создатель

    Регистр.:
    29 янв 2008
    Сообщения:
    17
    Симпатии:
    1
    Помоему через яваскрипт всё таки получше будет, хотя конечно зависит от нюансов
     
  6. disxlab

    disxlab Создатель

    Регистр.:
    18 авг 2009
    Сообщения:
    35
    Симпатии:
    16
    Flash Menu Labs Pro v2

    Скачай программу Flash Menu Labs Pro v2 просто супер
    оф сайт http://www.flashmenulabs.com/

    Добавлено через 4 минуты
    Web Menu Studio Plus
    ... С помощью данного комплекта простых в использовании сервисных программ по созданию веб меню, вы сможете с легкостью разработать, составить дизайн и разместить сценарии веб меню для веб сайтов и веб проектов. ... Создавайте профессиональные веб меню по виду и стилю с помощью отмеченных наградами сервисными программами.


    AllyNova Tree Menu
    ... Данная программа добавляет древовидное меню к вашему веб сайту для упрощения поиска различных элементов вашего веб сайта. ... Обычно, ваш веб сайт может иметь множество веб страниц, и вы можете составлять любые текстовые или графические ссылки для ваших посетителей для поиска этих страниц, но большинство пользователей не слишком терпеливы для поиска этих страниц.


    Flash Vertical Menu
    ... Flash Vertical Menu для Dreaweaver – это простая, эффективная и удобная программа для добавления меню к вашему веб сайту, без JavaScript или Flash программирования. ... Если вы используете XML файл, вам не потребуется менять ссылки меню на каждой веб странице, достаточно поменять их один раз в XML файле. ... Добавляйте впечатляющие флэш меню на ваш веб сайт в несколько щелчков мышью.
     
  7. sanyok_ua

    sanyok_ua Создатель

    Регистр.:
    27 апр 2009
    Сообщения:
    11
    Симпатии:
    2
    реализовать такое меню можешь прописав для пунктов меню onmouseover и onmouseout
    вот могу предложить такое готовое решение на примере рисунков

    <table cellspacing="0" cellpadding="0" border="0" align="center">
    <tr>
    <td><img name="main-70" src="/files/content/en-thailand-villa-19-2.jpg" width="365" height="278" alt="Thailand villa for your Thailand vacation" class="villa_image" /></td>
    <td valign="middle" style="padding-left: 0px;">
    <img name="main-70-1" width="119" height="90" src="/files/property/en-thailand-villa-19-2-1.thumb.jpg" class="villa_image" alt="Thailand villa for your Thailand vacation"
    onmousemove="document.images['main-70-1'].style.cursor='Hand';"
    onmouseover="document.images['main-70'].src='/files/property/en-thailand-villa-19-2-1.jpg';"
    onmouseout="document.images['main-70'].src='/files/content/en-thailand-villa-19-2.jpg';" /><br />

    <img name="main-70-2" width="119" height="90" src="/files/property/en-thailand-villa-19-2-2.thumb.jpg" class="villa_image" alt="Thailand villa for your Thailand vacation"
    onmousemove="document.images['main-70-2'].style.cursor='Hand';"
    onmouseover="document.images['main-70'].src='/files/property/en-thailand-villa-19-2-2.jpg';"
    onmouseout="document.images['main-70'].src='/files/content/en-thailand-villa-19-2.jpg';" /><br />

    <img name="main-70-3" width="119" height="90" src="/files/property/en-thailand-villa-19-2-3.thumb.jpg" class="villa_image" alt="Thailand villa for your Thailand vacation"
    onmousemove="document.images['main-70-3'].style.cursor='Hand';"
    onmouseover="document.images['main-70'].src='/files/property/en-thailand-villa-19-2-3.jpg';"
    onmouseout="document.images['main-70'].src='/files/content/en-thailand-villa-19-2.jpg';" /><br />
    </td>
    </tr>
    </table>
     
  8. etoja

    etoja Писатель

    Регистр.:
    26 авг 2009
    Сообщения:
    8
    Симпатии:
    0
    2 polyetilen polyetilen

    подскажите плз как место картинки (в примете вот эта)
    вставить блок с текстом , который исчез бы после наведения на кнопки..хелп плиз !!!:ah:
     
  9. mdss

    mdss ♖♘♗♕♔♗♘♖

    Moderator
    Регистр.:
    20 фев 2007
    Сообщения:
    1.130
    Симпатии:
    668
    HTML:
    <div class="test">
    <img src="images/pic.gif" alt="" />
    </div>
    PHP:
    .test img {
    visibility:visible;
    }
    .
    test:hover img {
    visibility:hidden;
    }
    вот и вся арифметика
     
  10. drummy

    drummy Писатель

    Регистр.:
    6 сен 2009
    Сообщения:
    3
    Симпатии:
    1
    очень просто

    очень просто.. пишешь
    Код:
    <div id="test"><img .... onmouseover="javascript.document.getElementById('test').innerHTML='TVOY TEXT'" ></div>
     
    etoja нравится это.
Статус темы:
Закрыта.