Очень часто, пробегая по своим любимым ресурсам, натыкаешься на забавные, а иной раз и весьма полезные вещи. Иногда, это происходит совершенно не преднамеренно. Ищешь или думаешь об одном, встречаешь и находишь другое. Но в копилку складываются, а вдруг, да пригодится.

Уж и не помню, откуда, но по большому счету, данное обстоятельство не имеет особого значения, подобных штучек, а в данном случае речь идет о JavaScript, о заботясь можно нарыть в не мерянном количестве. И даже, нет необходимости гуглить или совершать набег на специфические ресурсы. Любой более или менее приличный новостной портал при внимательном просмотре, даст, как минимум, пищу для размышлений.

Еще раз подчеркну, мое отношение к скриптам, скорее нейтрально и нисколько не напрягает их полное отсутствие. В моей коллекции, нет скриптов монстров. Минимум кода, возможность, методом "научного тыка", подправить его под свои потребности, вот, пожалуй, и все, что нужно.

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

Реализована данная фишка, в отличие от предлагаемого вам ниже, с помощью php, при полном содействии и одобрении Мастера Lasto, да, что говорить, им и сотворенная по моему не скромному, до сих пор не объяснимому, самому себе, внезапно вспыхнувшему желанию :)

Но об этом в другой раз.

Ладно, довольно лирических отступлений, вернемся к теме заголовка.

Вашему вниманию представляется не большой скрипт, единственной функцией которого является вывод и смена картинок, (текст - не пробовал, но вполне возможно, подойдет и для него) при открытии или обновлении страницы из заранее созданного списка.

Стили несколько строк - оформление блока, в котором будет находиться картинка, задав нужные отступы и поля, а так же border, вы можете придать подложке под картинкой свой стиль. background:url(…) – картинка с которой начнется ваше шоу (можно удалить).

#random {
  background:url(i/bird1.jpg) no-repeat #fff;
  border:#000 1px solid;
  margin:10px auto;
  width:200px;
  height:150px;
}

Все подготовленные вами картинки, должны иметь одинаковые размеры, как по ширине, так и высоте, данные размеры можно и не прописывать.

Скритп - необходимые для настройки параметры выделены цветом.

<script type="text/javascript">
<!-- 
if (document.getElementById) { window.onload = swap };
function swap() {
var numimages=7;
rndimg = new Array("i/bird7.jpg","i/bird6.jpg","i/bird5.jpg","i/bird4.jpg","i/bird3.jpg","i/bird2.jpg","i/bird1.jpg");
x=(Math.floor(Math.random()*numimages));
randomimage=(rndimg[x]);
document.getElementById("random").style.backgroundImage = "url("+ randomimage +")";
}
//--> 
</script>

Синий – количество картинок в вашем банке данных.

Зеленый – перечисление картинок с указанием пути к ним.

html – обычный контейнер, располагаете в нужном месте вашей страницы.

<div id="random"></div>

Пример

Как не крути, а тема меню долго, если не вечно, будет очень популярной в INTERNET-е. Это один из самых простых способов придать своему ресурсу определенный шарм, свою фишку, если хотите.

Разнообразие всевозможных меню, иногда поражает воображение, многие из них используют JavaScript, не спорю – очень действенный метод, но мои предпочтения лежат в области html and css.

Предлагаю вашему вниманию, еще одно меню. Вертикальный раскрывающийся (раздвигающийся) список. Минимум html, стилей по большому счету тоже.

Чтобы заставить IE6 работать должным образом, используем описанный ранее скриптик состоящий из шести строчек.

Возможно, настройка оформления меню, кому-то может показаться сложной, но по практиковавшись полчаса, а реально, при определенном опыте и того меньше, вы настроите меню в соответствии со своими запросами.

Не большой нюанс.

Старайтесь, чтобы количество ссылок в разделах, которые располагаются ниже, было равно или больше, чем у выше стоящих, иначе при коротком списке, некоторые разделы вы просто не сможете открыть.

Думаю, это не слишком высокая цена, которую придется заплатить, при применении этого меню :)

Пример

Разумеется, при не значительной коррекции стилей данное меню может стать горизонтальным.

P.S. Если вы пользуетесь скриптами Мастера Lasto, то меню лучше всего распологать в файле add.php

Мой друг художник и поэт...
"Мой друг художник и поэт"
К.Никольский

Все новое – хорошо забытое старое.

В последнее время, плотно занимаясь графикой, в основном для "WEB 2.0 portator Lasto", но это отдельный разговор, более подробный и детальный отчет будет представлен чуть позже, добрался и до галереи.

Собственно говоря, давно хотел, в общем-то для дома и семьи, но думаю будет любопытно и познавательно всем заинтересованным лицам.

За основу взят вариант предложенный здесь. У автора этого ресурса своя фишка – практически все примеры выложенные там, идут с комментариями в html-коде преследуя одну единственную цель заставить ту или иную конструкцию работать в IE6.

С одной стороны работает, а то что это вступает в противоречие с рекомендациями W3C - по боку. Не являясь апологетом соблюдения те или иных правил, кто безгрешен :), там, где все можно сделать следуя стандартам и спецификациям, стоит отказаться от подобных трюков. Тем более, никаких сверхъестественных усилий прилагать не требуется.

Все фотографии от туда же, отчасти еще и потому, что свои делать лень, к тому же у вас будет возможность для сравнения. Но не надо считать, это плагиатом в чистом виде :)

Все, так или иначе, подверглось коррекции.

html-код хрестоматийный из него убраны комментарии и теги <a>…</a>, что используются в первоисточнике, а умиротворить IE6, мы попробуем другим способом.

Открытие разделов галереи осуществляется обычным наведением курсора мыши на пункты горизонтального меню. Увеличение картинки происходит подобным же образом.

Изменению подверглось позиционирование увеличенных картинок по сравнению с оригиналом, теперь они полностью перекрывают часть картинок, возможно, это может показаться не совсем удобным, но по игравшись мышкой, вы быстро освоите данный алгоритм поведения.

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

Так же, нет ограничений на количество фото в ряду по горизонтали, в данном случае четыре картинки, вы можете – увеличив ширину .photo, подобрав оптимальный размер, получить в одном ряду столько картинок, сколько вмещается по ширине в окно вашего браузера, html-код, по тем же причинам, берем из второго столбца.

При необходимости, легко осуществимо добавления еще нескольких разделов в мини-галерею по образцу и подобию существующих.

Думаю, оформление горизонтального меню не вызовет не преодолимых препятствий, тут все предельно просто и рассматривать отдельно этот вопрос, нет никакого смысла.

Не скажу, что стили основательно переработаны, но изменения есть и здесь. Отказался от :focus, почему-то не работал в OPERA, разбираться не стал, да и нет особой необходимости.

Вообще, заключив увеличенную картинку в

<a href=”путь к фото.jpg”><img src=””></a>

и кликнув по ней, у вас появится возможность посмотреть полноразмерный, оригинальный вариант - первый пункт горизонтального меню, самая первая фотография.

Для IE6, используется скрипт image.htc – шесть строчек, чуть больше в стилях, это решают проблему псевдоэлемента :hover.

Смотрим.

Скачать zip-архив (около 4мб)- для более детального изучения.