Как я могу сделать миниатюру <img>, показывают полное изображение при нажатии?
у вас есть другое решение:
JS: вызвать функцию при событии загрузки с «Description» в виде аргумента
openCity(event, 'Description')
CSS: добавить активный класс и добавить его в первый дивизион
.tabcontent.active {
display:block;
}
Еще один CSS: оберните весь ваш .tabcontent в div, а затем
.tabcontent:first-of-type {
display:block;
}
, но последний имеет больше преимуществ перед другими, так как он более удобен в будущих функциях, которые у вас будут.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.sight_img{
height: 80%;
width: 100%;
}
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
/* Style the buttons inside the tab */
.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 17px;
}
/* Change background color of buttons on hover */
.tab button:hover {
background-color: #ddd;
}
/* Create an active/current tablink class */
.tab button.active {
background-color: #ccc;
display:block;
}
/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
-webkit-animation: fadeEffect 1s;
animation: fadeEffect 1s;
}
/* HERE */
.tabcontent.active {
display:block;
}
/* Or you can add a wrapper for your contents
and then use this selector, to set your default.*/
.tabcontent:first-of-type {
display:block;
}
/* Fade in tabs */
@-webkit-keyframes fadeEffect {
from {opacity: 0;}
to {opacity: 1;}
}
@keyframes fadeEffect {
from {opacity: 0;}
to {opacity: 1;}
}
</style>
</head>
<body>
<div class="tab">
<button class="tablinks btn active" onclick="openCity(event, 'Description')">Description</button>
<button class="tablinks" onclick="openCity(event, 'Avalability')">Avalability</button>
<button class="tablinks" onclick="openCity(event, 'Itinerary')">Itinerary</button>
<button class="tablinks" onclick="openCity(event, 'Policy')">Policy</button>
</div>
<!-- // content-tabs-i // -->
<div>
<div id="Description" class="tabcontent">
<h3>Description</h3>
</div>
<div id="Avalability" class="tabcontent">
<h3>Avalability</h3>
</div>
<div id="Itinerary" class="tabcontent">
<h3>Itinerary</h3>
</div>
<div id="Policy" class="tabcontent">
<h3>Policy</h3>
</div>
</div>
</body>
</html>
<script>
function openCity(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
</script>6 ответов
alt текст, который отображен, когда изображение не может быть загружено, или браузер пользователя не поддерживает изображения (например, читатели для слепых людей).
Попытайтесь использовать что-то как лайтбокс:
http://www.lokeshdhakar.com/projects/lightbox2/
обновление: Эта библиотека, возможно, лучше как на основе jQuery, который Вы сказали свое использование http://leandrovieira.com/projects/jquery/lightbox/
<a href="image2.gif" ><img src="image1.gif"/></a>
техника всегда работала на меня. Я использовал его успешно в моем дневнике Супер Боул, но я вижу, что сценарии, которые я использовал, повреждаются. После того как я получаю их, зафиксировал, я отредактирую в URL.
<img src='thumb.gif' onclick='this.src="full_size.gif"' />
Конечно, можно изменить onclick событие для загрузки изображения везде, где Вы хотите.
Это не сделает то, что Вы ожидаете:
<img src="image1.gif" alt="image2.gif" />
Атрибут ALT только для текста - он не сделает ничего специального, если Вы дадите ему URL изображения.
Если Вы хотите первоначально отобразить низкое изображение res, затем заменить его изображением с высоким разрешением, Вы могли сделать некоторое кодирование JavaScript для выгрузки изображений. Или, возможно, загрузите изображение в отделение, которому заполнили фоновый шаблон низким изображением res. Затем когда загрузки образа с высоким разрешением, это загрузится, выше фон.
К сожалению, нет никакого прямого способа сделать это.
Ваша вторая попытка создаст ссылку на image2, но на самом деле отобразит image1.
<a href="image2.gif" ><img src="image1.gif"/></a>
Если Вы хотите открыть более высокую res версию, предложение @Sam является хорошей идеей.
Этот CSS мог бы работать на Вас (он работает на меня в Firefox 3):
<html>
<head>
<style>
.lowres { background-image: url('low-res.png');}
</style>
</head>
<body>
<div class="lowres" style="height:500px; width:500px">
<img src="hi-res.png" />
</div>
</body>
</html>
В том примере необходимо установить высоту/ширину отделения на то из изображения. Это на самом деле загрузит оба изображения одновременно, но предположение низких-res быстрых загрузок, Вы могли бы видеть его сначала в то время как загрузки изображения с высокой разрешающей способностью.
Экспериментальный подход только для CSS, без сценария с изображением pre-loadingBONUS! и который только работает в Firefox:
<style>
a.zoom .full { display: none; }
a.zoom:active .thumb { display: none; }
a.zoom:active .full { display: inline; }
</style>
<a class="zoom" href="#">
<img class="thumb" src="thumbnail.png"/>
<img class="full" src="fullsize.png"/>
</a>
Показывает миниатюру по умолчанию. Показывает полное изображение, в то время как кнопкой мыши щелкают и удерживают. Возвращается к миниатюре, как только кнопка отпускается. Я никоим образом не предлагаю, чтобы этот метод использовался; это - просто демонстрация подхода только для CSS, который [очень] частично решает проблему. С некоторым z-индексом + относительные тонкие настройки положения, это могло работать в других браузерах также.
Такая функциональность собирается потребовать некоторого JavaScript, но, вероятно, возможно только использовать CSS (в браузерах кроме IE6&7).