Это небольшой javascript позволит при необходимости скрывать и показывать при нажатии на ссылку фрагменты текста и картинки. Это может понадобиться, когда вы захотите описать совсем уж тривиальные вещи, которые многие знают. И чтобы большинство читателей не отвлекалось на эту информацию, предоставить её лишь при нажатии на ссылку. Таким же образом можно скрыть картинку и вообще любой фрагмент. Или реализовать вопросник, где при нажатии на конкретный вопрос будет раскрываться конкретный ответ.
Сначала приведу пример, затем скрипт и пояснения.
Пример
Код:
<div id="detail1" style="display: none;">Будет работать, если пользователь в своём браузере сознательно не отключил использование джаваскриптов. Все современные темы Wodpress с галереями и эффектами работают не без помощи JavaScript. Да и многие современные сайты используют эту технологию.</div>
<a onclick="show_hide('detail2'); return false;" href="javascript:void(0)">Посмотреть розового слоника</a>
<div id="detail2" style="display: none;"><img src="http://seoshmeo.ru/wp-content/uploads/2012/03/rose-slon.jpg" alt="" /></div>
Вот реализация данного фрагмента (жмите на ссылки):
Скрипт
Нам понадобится небольшая функция show_hide().
doc=document.getElementById(obj_id);
if(doc.style.display == "none") doc.style.display = "block";
else doc.style.display = "none"
}
Для WordPress функцию show_hide() можно разместить в файле header.php перед закрывающимся тегом </head>, заключив её в теги <script type="text/javascript"> и </script>. Или разместить в подключаемом js-файле.
Ссылку оформляем следующим образом
А скрываемый фрагмент помещаем в div
Скрываемый фрагмент должен быть заключён в свой div c уникальным в пределах страницы id (здесь id="detail") и стилем display:none (который говорит браузеру, чтобы не отображал содержимое). При загрузке страницы этот скрываемый фрагмент загрузится в браузер, будет индексироваться поисковыми системами, только будет скрыт до тех пор, пока пользователь сознательно не нажмёт на ссылку Подробнее, где прописан вызов нашей функции show_hide. В качестве параметра в функцию передаётся значение id скрываемого div’а. Функция меняет свойство display с none на block и обратно. Что приводит к показу и скрытию фрагмента в div’е.
В случае с картинкой можно позаботиться о тех немногочисленных пользователях, у которых всё-таки отключён javascript, показав им картинку в другом окне. Нам же известен адрес картинки. Поэтому ссылку на картинку вида:
лучше переписать так:
При включенном джаваскрипте вы не увидите изменений. Зато при отключённом вместо нерабочей ссылки перед вами откроется картинка в новом окне.
А можно ли скрыть скрипт, под картинкой, но таким образом, что-бы при нажатии на картинку открывалась ссылка из скрипта???
наверняка можно, но я не знаю как.
Нам понадобится небольшая функция show_hide().
а куда её вставлять???
Так всё написано, перед закрывающимся тегом head.
замечательный скрипт, просто чудо, особенно слоненок!!!
А можно попросить чуточку изменить скрипт — необходимо, чтобы картинка закрывалась при клике на ней самой. Открытие по ссылке оставить.
А чтобы была понятна проблема высылаю подробности.
<head>
<title> </title>
<style>
#detail2{display:none; position:fixed; top:1%; left:3%; width:60%; }
img{width:100%;}
</style>
</head>
<body>
<a onclick="show_hide('detail2'); return false;" href="javascript:void(0)">Посмотреть розового слоника</a>
<div id="detail2" > <img src="http://seoshmeo.ru/wp-content/uploads/2012/03/rose-slon.jpg" alt="" /></div>
<script>
function show_hide(obj_id) {
doc=document.getElementById(obj_id);
if(doc.style.display == "none") doc.style.display = "block";
else doc.style.display = "none"
}
</script>
</body>
</html>
Галина, вам здесь никто ничего не должен. Изменяйте сами, не ленитесь вдумываться.
P. S. Да, и слонёнка можно заменить на жабу или даже… камень!
и еще — как сделать так, чтобы срабатывало с первого клика?
Здравствуйте!
Спасибо. Все отлично работает.
Подскажите пожалуйста, как вместо ссылки сделать кнопку?
Спасибо за скрипт!
Скажите, пожалуйста, есть ли возможность сделать так, чтобы после разворачвивания скрытого текста пропадала сама надпись «подробнее»? Это кажется аккуратным и логичным решением — ведь человек уже сделал выбор изучить подробности.