Подскажите как реализовать ?

Тема в разделе "Веб-дизайн", создана пользователем G-Null, 5 апр 2008.

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

    G-Null

    Регистр.:
    6 сен 2007
    Сообщения:
    180
    Симпатии:
    21
    Подскажите как реализовать подобную вещь ?
    http://htmlbook.ru/content/
    то есть при нажатии на какой-нить объект(картинка, слово -неважно) необходимо, чтобы появлялся текст, который до этого был скрыт, ну и при повторном нажатии скрывался обратно

    этот вариант конечно тоже можно было бы использовать, просто он какой-то громоздкий, может можно как то попроще ? там просто помимо js файлика в саму хтмлку надо каждый раз вставлять
    HTML:
    <div class="treeContainer" id="menu">
     <div class="itemContainer">
      <p class="treeItem haveContainer">+</p>
      <div class="itemContainer">
        <p class="treeItem">
    	
        </p>
      </div>
     </div>
    </div>
    
    <script language="JavaScript1.4" type="text/javascript">
    	options = new Array;
    	options.treeContainer = "treeContainer";
    	options.item = "treeItem";
    	options.container = "itemContainer";
    	options.containerFlag = "haveContainer";
    	options.expanded = "expanded";
    	options.collapsed = "collapsed";
    	options.active = "activeTreeItem";
    	options.itemElement = "P";
    	options.itemLink = "A";
    	createTreeMenu(options,"menu");
    </script>
    у меня будет не меню, ситуация следующая: есть таблица, в ней несколько сотен строк, в каждой ячейки одного из столбцов вставлена картинка -она достаточно велика и нужна невсегда, поэтому для более удобного восприятия всей таблицы эту картинку я хочу скрыть таким образом, и чтобы по необходимости всегда можно было бы кликнуть и посмотреть.. конечно можно и впихнуть два десятка этих строк на каждую из строк таблицы, но может есть вариант попроще.

    Может видели где то ? просто в яваскриптах абсолютно ноль, попытался залесть в .js файл -ничего не разобрал..

    быть может с помощью яваскрипта можно менять стили ? скажем при определённом событии у <div> меняется стиль... может есть чо нить подобное..
     
  2. G-Null

    G-Null

    Регистр.:
    6 сен 2007
    Сообщения:
    180
    Симпатии:
    21
    вот такое вот простое решение

    HTML:
    
    <div style="display:none" id="yo">скрытый текст</div>
    
    <img src="images/up.gif" onclick="visibleGraf()">
    
    <script>
    function visibleGraf()
        {
        if (document.getElementById("yo").style.display == "none")
            document.getElementById("yo").style.display = "block";
        else
            document.getElementById("yo").style.display = "none";
        }
    </script>
    
     
  3. f0xman

    f0xman Прохожие

    Простое, но не гибкое
    а если нужно большой список таких тоглеров замутить?


    так удобней гораздо.
    HTML:
    
    <script>
    function $_() {
            var elements = new Array();
            for (var i = 0; i < arguments.length; i++) {
                    var element = arguments[i];
                    if (typeof element == 'string')
                            element = document.getElementById(element);
                    if (arguments.length == 1)
                            return element;
                    elements.push(element);
            }
            return elements;
    }
    
    
    function ShowHide(elem, icon_elem){
      var s = elem.style;
      s.display = (s.display != 'none') ? 'none': '';
      if(icon_elem) { icon_elem.innerHTML = (s.display != 'none') ? '[+]': '[&ndash;]'; }
    }
    </script>
    
    
    <a href="#nogo" onClick="ShowHide(document.getElementById('d1')); return false">Раскрыть</a>
    
    <div id="d1" style="display:none;">
    скрытый текст
    </div>
    
     
  4. WhisperingEchoes

    WhisperingEchoes Создатель

    Регистр.:
    9 апр 2008
    Сообщения:
    23
    Симпатии:
    6
    также можно использовать библиотеку prototype.js , если потребуется использовать дополнительный функционал кроме скрытия/отображения картинки.
     
Статус темы:
Закрыта.