| |
|
|
| | Всем привет !rnЯ продаю всякую мелочь на ebay и для своих страничек (лислингов) я делаю шаблоны на HTML и CSS (верстаю резиновыми дивами) чтобы страничка выглядела более привлекательно. Все картинки я выкладываю сверху вниз. Теперь я хочу реализовать галерею картинок по схеме: в центре блока большая картинка , снизу трамбнейлы -превьюшки. По клику по трамбнейлу (или по наведению курсора) картинка меняется на соответствующую. Проблема в том что ebay запрещает использовать скрипты и реализовать все нужно на чистых HTML и CSS, а я не умею. Заранее спасибо за помощь. | |
| |
|
|
| |
|
|
| |
для: AlexKo
(05.07.2013 в 20:55)
| | | Без скрипта что-то оригинального трудно или вообще не возможно сделать. Стилями можно только типа такого:
<html>
<head>
<style>
.imgbox {
position: relative;
width: 132px;
height: 132px;
margin: 15px auto;
}
.imgbox div {
position: absolute;
width: 30px;
height: 30px;
border: 1px solid #999;
z-index: 10;
}
.big {
width: 64px !important;
height: 64px !important;
top: 34px;
left: 34px;
background: #999;
z-index: 0;
}
.im-1 {top: 0; left: 0;}
.im-2 {top: 0; left: 34px;}
.im-3 {top: 0; left: 68px;}
.im-4 {top: 0; left: 102px;}
.im-5 {top: 34px; left: 0;}
.im-6 {top: 34px; left: 102px;}
.im-7 {top: 68px; left: 0;}
.im-8 {top: 68px; left: 102px;}
.im-9 {top: 102px; left: 0px;}
.im-10 {top: 102px; left: 34px;}
.im-11 {top: 102px; left: 68px;}
.im-12 {top: 102px; left: 102px;}
[class|=im]:hover {
width: 64px;
height: 64px;
top: 34px;
left: 34px;
background: #f00;
}
</style>
</head>
<body>
<div class="imgbox">
<div class="big">big</div>
<div class="im-1">1</div>
<div class="im-2">2</div>
<div class="im-3">3</div>
<div class="im-4">4</div>
<div class="im-5">5</div>
<div class="im-6">6</div>
<div class="im-7">7</div>
<div class="im-8">8</div>
<div class="im-9">9</div>
<div class="im-10">10</div>
<div class="im-11">11</div>
<div class="im-12">12</div>
</div>
</body>
</html>
|
Но при этом будет неприятный эффект, моргать будет изображение, так как при наведении оно меняет позицию, а мышь перемещается. Поэтому стили hover для каждого малого изображения нужно прописывать свои - позиционировать их так, чтобы они занимали две или три четверти размера бокса, и курсор при наведении находился на изображении. Но это тоже не лишено недостатка, так как будет перекрывать соседние малые, и чтобы их выбрать нужно будет уйти с большого изображения:
<style>
.imgbox {
position: relative;
width: 132px;
height: 132px;
margin: 15px auto;
}
.imgbox div {
position: absolute;
width: 30px;
height: 30px;
border: 1px solid #999;
z-index: 1;
}
.im-1 {top: 0; left: 0;}
.im-2 {top: 0; left: 34px;}
.im-3 {top: 0; left: 68px;}
.im-4 {top: 0; left: 102px;}
.im-5 {top: 34px; left: 0;}
.im-6 {top: 34px; left: 102px;}
.im-7 {top: 68px; left: 0;}
.im-8 {top: 68px; left: 102px;}
.im-9 {top: 102px; left: 0px;}
.im-10 {top: 102px; left: 34px;}
.im-11 {top: 102px; left: 68px;}
.im-12 {top: 102px; left: 102px;}
.im-1:hover, .im-2:hover {top: 0; left: 0;}
.im-3:hover, .im-4:hover, .im-6:hover {top: 0; left: 68px;}
.im-9:hover, .im-10:hover {top: 68px; left: 0;}
.im-11:hover, .im-12:hover {top: 68px; left: 68px;}
[class|=im]:hover {
width: 64px;
height: 64px;
background: #f00;
z-index: 10;
}
</style>
|
Ну и третий вариант, это поместить в таблицу изображения, указав им размеры равные, например, 25% от своих размеров, а при наведении на них указывать им размеры 100%. Нужно только учитывать, чтобы размер таблицы при этом, равный размеру большого изображения плюс размеры малых изображений по горизонтали и вертикали, не приводил к прокрутке окна. | |
| |
|
|
