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

H

hunterok53

Создатель
Регистрация
31 Янв 2009
Сообщения
23
Реакции
1
Здравствуйте, ищу код спойлера на css\html, не могу найти то что нужно, а нужно следующее, есть несколько картинок на странице, так называемых тематических, нужно чтобы при клике по картинке под ней появлялась информация, при клике по другой картинке информация предыдущей картинки скрывалась и появлялась информация под той картинкой на которую кликнули
 
А может лучше сделать "Всплывающая подсказка при наведении на картинку" ?
Вариантов в сети много и проще реализуется.
 
bork75 написал(а):
А может лучше сделать "Всплывающая подсказка при наведении на картинку" ?
Вариантов в сети много и проще реализуется.
Нажмите для раскрытия...
нет, нужно именно то что я написал
вот пример нашел то что мне нужно:
Для просмотра ссылки Войди или Зарегистрируйся
 
hunterok53 написал(а):
вот пример нашел то что мне нужно
Нажмите для раскрытия...
Если пойти дальше и посмотреть на исходный код страницы, то можно найти функцию которая этим занимается:
Код: 
        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>
 
Войдите или зарегистрируйтесь для ответа.
Назад
Сверху