如何在 HTML 中制作文本按钮

Question

我正在制作一个摄影网站，我想要一个图片库和一个列表，例如

野生动物
横向
海洋

当我点击它们时，它会打开一个图片库。

我尝试在 youtube 和 google 上查找一些教程，但找不到任何内容，因为我在 HTML 和 CSS 方面不是很有经验，我不知道从哪里开始

目前我只有这样一个图库

<h1>###&nbsp;</h1>


<h1>###</h1>

<table align="center">
  <tr>
    <td>
      <img src="Images/plant_with_web.png" height="150" width="200" alt="rocks" />
    </td>
    <td>
      <img src="Images/rock_in_water.png" height="150" width="200" alt="rock_on_log" />
    </td>
    <td>
      <img src="Images/rock_on_log.png" height="150" width="200" alt="sunset" />
    </td>
  </tr>
  <tr>
    <td>
      <img src="Images/Rocks.png" height="150" width="200" alt="sun_on_beach" />
    </td>
    <td>
      <img src="Images/sunset.png" height="150" width="200" alt="rock_in_water" />
    </td>
    <td>
      <img src="Images/waves_crashing.png" height="150" width="200" alt="bird" />
    </td>
  </tr>
  <tr>
    <td>
      <img src="Images/bird.png" height="150" width="200" />
    </td>
    <td>
      <img src="Images/birdrock.png" height="150" width="200" />
    </td>
    <td>
      <img src="Images/DSC04758.jpg" height="150" width="200" />
    </td>
  </tr>

Answer 1

我不太明白你的问题。

但是，如果您尝试制作按钮，请使用 <input type='text'> button </input> 或按钮元素。

或者，如果您希望图片可点击，请使用 <a href="image_URL"><img href="image_URL></a>"

Answer 2

如果画廊位于其单独的页面上：使用 <a href="SITE.COM/gallary/wildlife">Wildlife</a>

如果画廊将全屏打开 pop-up：使用 <button id="wildlife">Wildlife</button>

您也可以使用 <details><summary> 元素来获得相同的功能，而无需更多地依赖 JavaScript

编辑 1：

你可以使用像 PhotoSwipe 这样的 js 库，它完全适合您的用例

Answer 3

你是说这个？？

button {
    background-color:white;
    border:0px;
}

button:hover {
    text-decoration:underline;
    }

<button> Button 1 as a text
</button>

<button> Button 2 as a text
</button>

$(document).ready(function() {
  $("button#wildlife").click(function() {
    $(".wildlife> img").toggle();
    $(".landscape> img").hide();
    $(".ocean> img").hide();
  });

  $("button#landscape").click(function() {
    $(".landscape> img").toggle();
    $(".ocean> img").hide();
    $(".wildlife> img").hide();
  });

  $("button#ocean").click(function() {
    $(".ocean> img").toggle();
    $(".wildlife> img").hide();
    $(".landscape> img").hide();
  });

});

button {
  background-color: white;
  border: 0px;
}

button:hover {
  text-decoration: underline;
  cursor: pointer;
}

.landscape>img {
  display: none;
}

.ocean>img {
  display: none;
}

<html>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<body>

  <button id="wildlife">Wildlife</button><br>
  <button id="landscape">Landscape</button><br>
  <button id="ocean">Ocean</button>

  <div class="wildlife">
    <img src=https://image.shutterstock.com/image-vector/squirrel-silhouette-hand-drawn-image-260nw-748191586.jpg eight="150" width="200" alt="rocks" />
    <img src=https://image.shutterstock.com/image-vector/squirrel-silhouette-hand-drawn-image-260nw-748191586.jpg eight="150" width="200" alt="rocks" />
    <img src=https://image.shutterstock.com/image-vector/squirrel-silhouette-hand-drawn-image-260nw-748191586.jpg eight="150" width="200" alt="rocks" />
    <img src=https://image.shutterstock.com/image-vector/squirrel-silhouette-hand-drawn-image-260nw-748191586.jpg eight="150" width="200" alt="rocks" />
    <img src=https://image.shutterstock.com/image-vector/squirrel-silhouette-hand-drawn-image-260nw-748191586.jpg eight="150" width="200" alt="rocks" />
    <img src=https://image.shutterstock.com/image-vector/squirrel-silhouette-hand-drawn-image-260nw-748191586.jpg eight="150" width="200" alt="rocks" />
  </div>

  <div class="landscape">
    <img src="https://media-cdn.tripadvisor.com/media/photo-s/0e/54/cb/51/beautiful-morning-green.jpg" height="150" width="200" alt="rocks" />
    <img src="https://media-cdn.tripadvisor.com/media/photo-s/0e/54/cb/51/beautiful-morning-green.jpg" height="150" width="200" alt="rocks" />
    <img src="https://media-cdn.tripadvisor.com/media/photo-s/0e/54/cb/51/beautiful-morning-green.jpg" height="150" width="200" alt="rocks" />
    <img src="https://media-cdn.tripadvisor.com/media/photo-s/0e/54/cb/51/beautiful-morning-green.jpg" height="150" width="200" alt="rocks" />
    <img src="https://media-cdn.tripadvisor.com/media/photo-s/0e/54/cb/51/beautiful-morning-green.jpg" height="150" width="200" alt="rocks" />
    <img src="https://media-cdn.tripadvisor.com/media/photo-s/0e/54/cb/51/beautiful-morning-green.jpg" height="150" width="200" alt="rocks" />
  </div>


  <div class="ocean">
    <img src="https://image.shutterstock.com/image-photo/school-dolphins-underwater-photography-260nw-1582116775.jpg" height="150" width="200" alt="rocks" />
    <img src="https://image.shutterstock.com/image-photo/school-dolphins-underwater-photography-260nw-1582116775.jpg" height="150" width="200" alt="rocks" />
    <img src="https://image.shutterstock.com/image-photo/school-dolphins-underwater-photography-260nw-1582116775.jpg" height="150" width="200" alt="rocks" />
    <img src="https://image.shutterstock.com/image-photo/school-dolphins-underwater-photography-260nw-1582116775.jpg" height="150" width="200" alt="rocks" />
    <img src="https://image.shutterstock.com/image-photo/school-dolphins-underwater-photography-260nw-1582116775.jpg" height="150" width="200" alt="rocks" />
    <img src="https://image.shutterstock.com/image-photo/school-dolphins-underwater-photography-260nw-1582116775.jpg" height="150" width="200" alt="rocks" />
  </div>
</body>

</html>

Answer 4

使用 input type="submit" value="add"

值均值名称这个按钮的名字是add

Answer 5

我不建议使用 table 作为画廊。您或许可以将每个图库放在不同的 html 页面中，然后使用标签访问它们。喜欢：

<a href="wildlife.html">Wildelife</a>

但是如果您希望它们在同一页面上动态显示或滑动，您可能需要一些 javascript 或 jquery。

Answer 6

你应该使用 <a href="/"><img src="" alt="" /></a>

Answer 7

嘿，你的问题有点不清楚，但如果你想要一个点击按钮打开野生动物画廊，你可以有这样的东西 <button> <a href = www.wildlife-photos.com/gallery></a> Wildlife </button> 或者只做一个名为 wildlife.html 的页面并使按钮直接指向它 <button> <a href = wildlife.html></a> Wildlife </button>

希望对您有所帮助 :D 对不起，如果这不是一个很大的方向。

如何在 HTML 中制作文本按钮

How can i make a text button in HTML

html

css

button

photography