Как превратить мое изображение в кнопку, которая ссылается на другую страницу html

Question

Я работаю над веб-страницей Солнечной системы. Идея состоит в том, что вы нажимаете на изображение одной из планет, и оно переместит вас на другую страницу html об этом pl anet. Я пытался выяснить, как заставить создать ссылку на другой html do c через изображение кнопки, но я не смог понять это.

body {
  margin: 0;
  padding: 0;
  background: #004882;
  display: flex;
  flex-direction: column;
}

html {
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

.header {
  width: 100%;
  height: 150px;
  display: black;
  background-color: #101010
  /* A lot of the information I got for making the header I got from this youtube video
    	https://www.youtube.com/watch?v=GxwHXxumdQk
    	*/
}

.logo {
  height: 100%;
  display: table;
  float: left;
}

.logo h1 {
  color: white;
  height: 100%;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  font-family: "Lucida Console", Courier, monospace;
  font-size: 50px;
}

.logo h3 {
  color: white;
  height: 100%;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  font-family: "Lucida Console", Courier, monospace;
}

.navigation {
  float: right;
  height: 100%;
}

.navigation a {
  height: 100%;
  display: table;
  ;
  float: left;
  padding: 0px 20px;
}

.drop-down {
  display: table-cell;
  vertical-align: middle;
  ;
  height: 100%;
  color: white;
  font-family: monospace;
  background-color: gray;
  font-size: 20px;
}

.drop-down select {
  font-family: monospace;
  font-weight: bold;
  font-style: italic;
  font-size: 15px;
}

.drop-down button {
  font-family: monospace;
  background-color: gray;
  color: white;
  font-size: 20px;
}

.drop-down button:hover {
  background-color: #008B8B;
}

.planets img {
  height: 300px;
  width: 300px;
  border-radius: 50%;
  min-height: 100%;
}


/* I got some info on arranging the layout of the 
    imgaes from here
    https://stackoverflow.com/questions/12813573/position-icons-into-circle
    */

.planets {
  position: relative;
  padding: 2.8em;
  border: dashed 3px;
  border-radius: 50%;
  margin: 1.75em auto 0;
  flex: 1;
}

.planets a {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4em;
  height: 4em;
  margin: -2em;
}

#footer {
  height: 100%;
  width: 100%;
  background: black;
  color: white;
  align-self: flex-end;
  bottom: 20px;
}

#footer img {
  height: 150px;
  width: 150px;
  border-radius: 50%;
}

#footer h4 {
  color: white;
  font-family: monospace;
  font-size: 30px;
  text-align: center;
}

.paragraph {
  color: white;
  font-family: monospace;
  font-size: 20px;
  text-align: center;
}

#footer button {
  color: white;
  background-color: gray;
}

#footer button:hover {
  background-color: #FF6347;
}

#footer a {
  background-color: gray;
  color: white;
  width: 100px;
  font-size: 16px;
}

#footer a:hover {
  background-color: #FF6347;
}

#footer .contact-links img {
  border-radius: 100%;
  height: 30px;
  width: 30px;
  border-radius: 100%;
}

aside {
  position: relative;
  left: 1720px;
  height: 500px;
  width: 30px;
}

aside .twitter-timeline {
  height: 1000px;
  width: 300px;
}

main {
  margin-right: 60%;
}

Answer 1

Вы бы использовали тег привязки. См. code ниже:

<a href="[place the title of the HTML page here with extension.html]" target="_blank"> <img src="img/imagenamehere.jpg" width="200px" height="200px" alt="image name"> </a>

Answer 2

Чтобы создать ссылку, используя изображение, просто окружите вашу img src ссылкой, например:

<a href="LINK HERE"><img src="C:\Users\evano\Downloads\Mercury.jpg" alt="Mercury"></a>

Если вам нужна текстовая ссылка, то это так:

<a href="LINK HERE">Click here</a>