Как сделать сайт на 500px


Как сделать сайт на 500px

В наши дни, слайд-шоу можно встретить практически на любом сайте. Большинство из них используют JavaScript для смены изображений, некоторые используют Flash. Проблемы с просмотром изображений могут возникнуть лишь в том случае, если браузер пользователя не поддерживает ни того ни другого. В сегодняшней статье вы узнаете, как можно создать слайд-шоу c помощью CSS и HTML.

Что мы собираемся делать

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

image27

Подготовка изображений

Первое, что нам понадобится это картинки. В этом примере я использовал изображения пейзажей, но это может быть и рекламный контент, в общем, все, что вам нравится. Я сделал основное изображение размером 500х300, и табы размером 75х125. Я просто взял размер основного изображения, затем разделил высоту на желаемое количество табов (в моем случае 300/4 = 75), так я вычислил высоту табов. Ширина табов взята произвольно, я просто изменил размер основного изображения до высоты равной 75, и ширина получилась, пропорциональна заданной высоте, в нашем случае 125.

Теория

В теории все это работает довольно просто. Мы будем использовать тэги a, для перехода от одного изображения к другому. Это очень похоже на ссылку «наверх», которая прокручивает страницу до самого верха, по клику. Единственное различие в том, что картинки будут прокручиваться в контейнере div, вместо прокручивания вверх и вниз по странице.

image28

HTML

HTML, сам по себе, очень простой. Что касается табов, это всего лишь маркированный список, с изображениями внутри якорных тэгов. Все просматриваемые изображения, заключены в div (это очень важно, поскольку мы будем прятать все лишние картинки с помощью overflow, и отображать только выделенное изображение). К тому же, каждая картинка также заключена в div и в якорный тэг. Эти div-ы можно использовать как контейнеры, в том случае если вы захотите использовать фоновое изображение вместо обычной картинки, они на самом деле не нужны в этом примере, мы просто оставим их, если вдруг передумаем.

Вот такой должен быть html:

<div id="wrapper"> <!-- Tabs --> <ul> <li><a href="#image1" id="tab1"><img src="tab1.jpg" alt="" title="" /></a></li> <li><a href="#image2" id="tab2"><img src="tab2.jpg" alt="" title="" /></a></li> <li><a href="#image3" id="tab3"><img src="tab3.jpg" alt="" title="" /></a></li> <li><a href="#image4" id="tab4"><img src="tab4.jpg" alt="" title="" /></a></li> </ul> <!-- Images --> <div id="images"> <div><a name="image1"></a><img src="image1.jpg" alt="" title="" /></div> <div><a name="image2"></a><img src="image2.jpg" alt="" title="" /></div> <div><a name="image3"></a><img src="image3.jpg" alt="" title="" /></div> <div><a name="image4"></a><img src="image4.jpg" alt="" title="" /></div> </div> </div> CSS

С помощью CSS, мы настроим табы таким образом, что они будут располагаться слева от основного окна и располагаться друг на друге. Мы также установим 40-% прозрачность табов в обычном состоянии, и 100%-прозрачность при наведении мыши. Конечно, наиболее важная часть CSS относится к div-у, содержащему изображения. Мы просто должны убедиться, что свойство overflow установлено в hidden.

Вот такой должен быть CSS:

/ CSS Reset / { margin: 0; padding: 0; border: 0; outline: 0; } / Setup Tabs / ul{ background:#000; width:125px; / Width of Tab Image / float: left; list-style: none; border-right:8px solid black; } ul li{ height:75px; / Height of Tab Image / } / Setup Tab so normal opacity is 40 and rollover is 100 / ul li a img{ / for IE / -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; filter:alpha(opacity=40); / CSS3 standard / opacity:0.4; } / Change Opacity to 100% on roll over / ul li a:hover img{ / for IE / -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter:alpha(opacity=100); / CSS3 standard / opacity:1.0; } / Places images to the right of the tabs, and hides non selected images / #images{ width:500px; height:300px; overflow:hidden; / Hides the non selected images / float:left; } / Places a black border around the entire viewer and centers it on the screen / #wrapper{ width:633px; height:300px; border:8px solid black; margin:0px auto; } Соединяем все вместе

Последнее, что нам осталось сделать, это соединить HTML и CSS вместе. Вы, конечно, можете изменить внешний вид слайд-шоу и количество табов. Самое важное, то, что вам нужно запомнить из этого руководства – идею использования якорных тэгов в качестве средства переключения изображений.

Вот так выглядит код, собранный вместе:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title>Image Viewer</title> <style type="text/css" media="screen"> / CSS Reset / { margin: 0; padding: 0; border: 0; outline: 0; } / Setup Tabs / ul{ background:#000; width:125px; / Width of Tab Image / float: left; list-style: none; border-right:8px solid black; } ul li{ height:75px; / Height of Tab Image / } / Setup Tab so normal opacity is 40 and rollover is 100 / ul li a img{ / for IE / -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; filter:alpha(opacity=40); / CSS3 standard / opacity:0.4; } / Change Opacity to 100% on roll over / ul li a:hover img{ / for IE / -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter:alpha(opacity=100); / CSS3 standard / opacity:1.0; } / Places images to the right of the tabs, and hides non selected images / #images{ width:500px; height:300px; overflow:hidden; / Hides the non selected images / float:left; } / Places a black border around the entire viewer and centers it on the screen / #wrapper{ width:633px; height:300px; border:8px solid black; margin:0px auto; } </style> </head> <body> <div id="wrapper"> <!-- Tabs --> <ul> <li><a href="#image1" id="tab1"><img src="tab1.jpg" alt="" title="" /></a></li> <li><a href="#image2" id="tab2"><img src="tab2.jpg" alt="" title="" /></a></li> <li><a href="#image3" id="tab3"><img src="tab3.jpg" alt="" title="" /></a></li> <li><a href="#image4" id="tab4"><img src="tab4.jpg" alt="" title="" /></a></li> </ul> <!-- Images --> <div id="images"> <div><a name="image1"></a><img src="image1.jpg" alt="" title="" /></div> <div><a name="image2"></a><img src="image2.jpg" alt="" title="" /></div> <div><a name="image3"></a><img src="image3.jpg" alt="" title="" /></div> <div><a name="image4"></a><img src="image4.jpg" alt="" title="" /></div> </div> </div> </body> </html>

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

Архив с примером.

Перевод статьи «How to Build a CSS Image Viewer the Clever Way«


Как сделать сайт на 500px

Похожие записи:



Девушки востока вышивки

Стильные жилеты со схемами

Схема границ размещения объекта