问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

社区维基
1
新手上路，请多包涵

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

原文由 LAYTH ZAKAR 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译html
阅读 587
1 个回答
得票最新
社区维基
1

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

原文由 Deepak Kamat 发布，翻译遵循 CC BY-SA 3.0 许可协议

查看全部 1 个回答
推荐问题