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>

enter image description here

Answer 2

将所有6个文件保存在同一目录中 IMAGE1（名称：html1.html）

<html><body>
 <img src="/image1.jpg"><br>
 </body></html>

图像2（名称：html2.html）

<html><body>
 <img src="/image2.jpg"><br>
 </body></html>

的Image3（名称：html3.html）

<html><body>
 <img src="/image3.jpg"><br>
 </body></html>

图像4（名称：html4.html）

<html><body>
 <img src="/image4.jpg"><br>
 </body></html>

图像5（名称：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 framework，这是一个较少写，更多的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

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 个答案: