创建一个使用 html 在一个页面中打开多个图像的超链接

Question

如何创建仅在一页中打开多个图像的可点击链接？ 我将所有图像托管在 photobucket 中。 我能够创建一个链接来只打开一张图片，但不能同时打开多张图片。

Answer 1

将您的图像放在一个像“images.html”这样的分散的 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>

在此处输入图片说明

Answer 2

将所有 6 个文件保存在同一目录中 Image1（名称：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 岁的男孩。 为任何错误道歉

Answer 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;隐藏图像容器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

Answer 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 文件重复这些步骤。

创建一个使用 html 在一个页面中打开多个图像的超链接

问题描述

4 个解决方案

解决方案1
0 2013-01-06 06:42:29

解决方案2
0 2013-01-06 07:16:43

解决方案3
0 2013-01-06 08:04:32

解决方案4
0 2013-01-06 09:16:34

创建一个使用 html 在一个页面中打开多个图像的超链接

问题描述

4 个解决方案

解决方案1 0 2013-01-06 06:42:29

解决方案2 0 2013-01-06 07:16:43

解决方案3 0 2013-01-06 08:04:32

解决方案4 0 2013-01-06 09:16:34

解决方案1
0 2013-01-06 06:42:29

解决方案2
0 2013-01-06 07:16:43

解决方案3
0 2013-01-06 08:04:32

解决方案4
0 2013-01-06 09:16:34