В наши дни, слайд-шоу можно встретить практически на любом сайте. Большинство из них используют JavaScript для смены изображений, некоторые используют Flash. Проблемы с просмотром изображений могут возникнуть лишь в том случае, если браузер пользователя не поддерживает ни того ни другого. В сегодняшней статье вы узнаете, как можно создать слайд-шоу c помощью CSS и HTML.
Что мы собираемся делать
Мы создадим простое слайд-шоу, с четырьмя табами справа и основной картинкой слева. При клике по одному из табов, справа появится новое изображение. Посмотреть как это будет выглядеть в конце, можно здесь.
Подготовка изображений
Первое, что нам понадобится это картинки. В этом примере я использовал изображения пейзажей, но это может быть и рекламный контент, в общем, все, что вам нравится. Я сделал основное изображение размером 500х300, и табы размером 75х125. Я просто взял размер основного изображения, затем разделил высоту на желаемое количество табов (в моем случае 300/4 = 75), так я вычислил высоту табов. Ширина табов взята произвольно, я просто изменил размер основного изображения до высоты равной 75, и ширина получилась, пропорциональна заданной высоте, в нашем случае 125.
Теория
В теории все это работает довольно просто. Мы будем использовать тэги a, для перехода от одного изображения к другому. Это очень похоже на ссылку «наверх», которая прокручивает страницу до самого верха, по клику. Единственное различие в том, что картинки будут прокручиваться в контейнере div, вместо прокручивания вверх и вниз по странице.
HTML
HTML, сам по себе, очень простой. Что касается табов, это всего лишь маркированный список, с изображениями внутри якорных тэгов. Все просматриваемые изображения, заключены в div (это очень важно, поскольку мы будем прятать все лишние картинки с помощью overflow, и отображать только выделенное изображение). К тому же, каждая картинка также заключена в div и в якорный тэг. Эти div-ы можно использовать как контейнеры, в том случае если вы захотите использовать фоновое изображение вместо обычной картинки, они на самом деле не нужны в этом примере, мы просто оставим их, если вдруг передумаем.
Вот такой должен быть html:
[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>
[/html]
CSS
С помощью CSS, мы настроим табы таким образом, что они будут располагаться слева от основного окна и располагаться друг на друге. Мы также установим 40-% прозрачность табов в обычном состоянии, и 100%-прозрачность при наведении мыши. Конечно, наиболее важная часть CSS относится к div-у, содержащему изображения. Мы просто должны убедиться, что свойство overflow установлено в hidden.
Вот такой должен быть CSS:
[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;
}
[/css]
Соединяем все вместе
Последнее, что нам осталось сделать, это соединить HTML и CSS вместе. Вы, конечно, можете изменить внешний вид слайд-шоу и количество табов. Самое важное, то, что вам нужно запомнить из этого руководства – идею использования якорных тэгов в качестве средства переключения изображений.
Вот так выглядит код, собранный вместе:
[html]
<!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>
[/html]
В результате у нас получилось простое и довольно симпатичное слайд-шоу. Конечно, немного не хватает плавности, как в слайдерах с использованием JavaScript, зато будет хорошо смотреться, даже в случае отключенных скриптов в браузере клиента. Недостаток тоже имеется, куда же без него, слайд-шоу не работает в опере. Причину сходу определить не удалось, если найду, то опубликую апдейт.
Перевод статьи “How to Build a CSS Image Viewer the Clever Way“
Leave a Reply