0

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

4

4 回答 4

0

您必须为所有图像集创建不同的 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 文件重复这些步骤。

于 2013-01-06T09:16:34.717 回答
0

将您的图像放在像“images.html”这样的sperated html文件中，并将超链接链接到该页面

<a href="images.html">click me </a>

这是 HTML 示例页面：将所有图像放在同一 HTML 页面根目录的 images 文件夹中

<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>

在此处输入图像描述

于 2013-01-06T06:42:29.397 回答
0

将所有 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 岁的男孩。为任何错误道歉

于 2013-01-06T07:16:43.380 回答
0

工作示例：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

于 2013-01-06T08:04:32.567 回答