Вопрос:
Как создать ссылку с возможностью клика, которая открывает несколько изображений только на одной странице? Я размещаю все свои изображения в photobucket. Мне удалось создать ссылку, чтобы открыть только одно изображение, но не сразу несколько изображений.
Ответ №1
поместите свои изображения в файл sperated html, например “images.html”, и переместите гиперссылку на эту страницу
<a href=»images.html»>click me </a>
это образец HTML-страницы: поместите все изображения в папку изображений в том же корневом каталоге HTML-страницы
<html> <head></head> <body> <img src=»/images/01.jpg»/> <br> <img src=»/images/01.jpg»/> <br> <img src=»/images/01.jpg»/> <br> <img src=»/images/01.jpg»/> <br> </body> </html>
Ответ №2
Храните все 6 файлов в одном каталоге Image1 (Name: html1.html)
<html><body> <img src=»/image1.jpg»><br> </body></html>
Image2 (Имя: html2.html)
<html><body> <img src=»/image2.jpg»><br> </body></html>
Image3 (Имя: html3.html)
<html><body> <img src=»/image3.jpg»><br> </body></html>
Image4 (Имя: html4.html)
<html><body> <img src=»/image4.jpg»><br> </body></html>
Image5 (Имя: html5.html)
<html><body> <img src=»image5.jpg»><br> </body></html>
Основной html
<html><body> <a href=»html1.html»>image1</a> <a href=»html2.html»>image2</a> <a href=»html3.html»>image3</a> <a href=»html4.html»>image4</a> <a href=»html5.html»>image5</a> </body></html>
Я новичок и всего 12-летний мальчик. Извинения за любые ошибки
Ответ №3
Рабочий пример: http://jsbin.com/eluqod/4/
Вам не обязательно быть экспертом. Если у вас есть базовые знания HTML и JavaScript, вы можете сделать это самостоятельно. Самый простой вариант – использовать фреймворк jQuery, меньше писать, делать больше библиотеки JavaScript, что упрощает интерактивный веб-дизайн.
Что вам нужно сделать, это создать контейнер <div> и поместить все ваши изображения с помощью HTML <img> теперь вы должны включить библиотеку jQuery в свой документ
<script src=»//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js»></script>
Теперь используйте hide и show или любые другие эффекты, такие как эффекты FadeToggle, SlideToggle и т.д. (Http://api.jquery.com/category/effects/), чтобы переключить скрытие и показать для div контейнера изображения. Настройте полную страницу с контейнером изображения и ссылкой, сначала скройте контейнер изображения, используя display:none; и теперь используйте функцию jQuery для запуска функции при щелчке этого элемента привязки.
Это jQuery
$(document).ready(function(){ $(‘#showimg’).on(‘click’,function(){ //Trigger FadeToggle function on click $(‘.image-container’).fadeToggle(); }); });
И HTML
<a id=’showimg’>Hide/Show Images</a> <div class=’image-container’ style=’display:none;’> <img src=’images/sample.png’/> <img src=’images/sample.png’/> <img src=’images/sample.png’/> <img src=’images/sample.png’/> <img src=’images/sample.png’/> </div>
Не забудьте добавить библиотеку JavaScript на свою страницу.
проверьте код, чтобы узнать об этом: http://jsbin.com/eluqod/4/edit
Ответ №4
Вам нужно создать разные HTML файлы для всех ваших наборов изображений. Вы не только создаете HTML файлы, но также должны загружать эти HTML-документы онлайн на сервер, чтобы люди могли получить к нему доступ из любого места.
1. Создайте HTML файл. Откройте блокнот или любой текстовый редактор и вставьте его в свой файл.
<!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>Your page title</title> <style type=’text/css’> .image-container {text-align:center;} img {width:80%;height:auto;display:block;margin:10px auto;border:2px solid black;padding:5px;} </style> </head> <body> <h2> The first 50 pictures (or whatever title you want)</h2> <!— Images below —> <div class=’image-container’> <!— Each images are in img tag, put the photobucket images link into the src attribute. Repeat the img tags if you want more images —> <img src=’http://i923.photobucket.com/albums/ad77/kihani_1996/Troll_Face_.png’/> <img src=’http://i923.photobucket.com/albums/ad77/kihani_1996/Troll_Face_.png’/> <img src=’http://i923.photobucket.com/albums/ad77/kihani_1996/Troll_Face_.png’/> </div> </body> </html>
И сохраните его с понятным именем, заканчивающимся на.html [name].html и сохраните тип как все файлы. Обязательно сохраните файл с кодировкой UTF-8. Просто внесите необходимые изменения и загрузите их на сервер и свяжите их.
Повторите шаги для других файлов HTML с различными изображениями в нем.
