спойлер - картинка css, html

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

Модераторы: zek24
  1. hunterok53

    hunterok53 Создатель

    Регистр.:
    31 янв 2009
    Сообщения:
    23
    Симпатии:
    1
    Здравствуйте, ищу код спойлера на css\html, не могу найти то что нужно, а нужно следующее, есть несколько картинок на странице, так называемых тематических, нужно чтобы при клике по картинке под ней появлялась информация, при клике по другой картинке информация предыдущей картинки скрывалась и появлялась информация под той картинкой на которую кликнули
     
  2. bork75

    bork75 Д☼брая собака )

    Регистр.:
    21 июн 2008
    Сообщения:
    1.449
    Симпатии:
    716
    А может лучше сделать "Всплывающая подсказка при наведении на картинку" ?
    Вариантов в сети много и проще реализуется.
     
  3. hunterok53

    hunterok53 Создатель

    Регистр.:
    31 янв 2009
    Сообщения:
    23
    Симпатии:
    1
    нет, нужно именно то что я написал
    вот пример нашел то что мне нужно:
    http://www.biocore-gaming.eu/index.php?option=com_clantools&view=Squads&Itemid=97
     
  4. gres_18

    gres_18 Pythonобандерівець®

    Регистр.:
    26 апр 2009
    Сообщения:
    407
    Симпатии:
    206
    Если пойти дальше и посмотреть на исходный код страницы, то можно найти функцию которая этим занимается:
    Код:
            function show_squad (id) {
    
            var bereich = document.getElementById("squadansicht");
            var absaetze = bereich.getElementsByTagName("span");
    
            for (i = 0; i < absaetze.length; i++) {
    
              absaetze[i].style.display = "none";
            }
    
            if (document.getElementById("span_" + id).style.display == 'none') {
                    document.getElementById("span_" + id).style.display = "block";
    
            }
            else {
                    document.getElementById("span_" + id).style.display = "none";
            }
    
            }
    Часть страницы, находящаяся под спойлером изначально располагается в блоке <span> с уникальным id, который и передается в указанную функцию при клике на спойлере. Функция закрывает все открытые спойлеры и потом открывает тот, на котором была нажата кнопка мыши.
    Например ссылка:
    Код:
     <a href="javascript:show_squad('1_1')">Member</a>
    и соответствующий блок <span>:
    Код:
            <span id="span_1_1" style="display:none">
    [...]
            </span>
    
    В общем, лучше 1 раз показать, чем 2 рассказать. После небольших модификаций код будет выглядеть примерно так:
    Код:
    <html>
    <head>
    </head>
    <body>
                       					
     <script language="JavaScript">
            function show_squad (id) {
    
            if (document.getElementById("span_" + id).style.display == 'none') {
                    document.getElementById("span_" + id).style.display = "block";
    
            }
            else {
                    document.getElementById("span_" + id).style.display = "none";
            }
    
            }
            </script>
    
    
    <a href="javascript:show_squad('1_1')">Member</a>
           <span id="span_1_1" style="display:none">
                  hidden_TEXT
            </span>
    
    </body>
    </html>
     
    hunterok53 нравится это.