How to turn my image into a button that links to another html page

Question

I'm working on a web-page of the solar system. The idea is that you click on a picture of one of the planets and it will take you to another html page about that planet. I've been trying to figure out how to make create a link to another html doc via a button image, but I haven't been able to figure it out.

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%;
}

<header class="header">
  <div class="logo">
    <h1>Neighbors from Space</h1>
    <br>
    <h3> Created by Evan O'Grady</h3>
  </div>
</header>
<nav class="drop-down">
  <a href="#About">
    <button type="button">About</button>
  </a>

  <label for="planets-nav"><strong>Planets: </strong></label>
  <select id="planets">
    <option value="Mercury">Mercury</option>
    <option value="Venus">Venus</option>
    <option value="Earth">Earth</option>
    <option value="Mars">Mars</option>
    <option value="Jupiter">Jupiter</option>
    <option value="Saturn">Saturn</option>
    <option value="Uranus">Uranus</option>
    <option value="Neptune">Neptune</option>
  </select>
  <label for="references"><strong>References for: </strong></label>
  <select id="references">
    <option value="Mercury">Mercury</option>
    <option value="Venus">Venus</option>
    <option value="Earth">Earth</option>
    <option value="Mars">Mars</option>
    <option value="Jupiter">Jupiter</option>
    <option value="Saturn">Saturn</option>
    <option value="Uranus">Uranus</option>
    <option value="Neptune">Neptune</option>
  </select>
  <label for="contact"><strong>Contact: </strong></label>
  <select id="contact">
    <a href="mailto:evanogrady603@gmail.com">
      <option value="email">Email</option>
    </a>
    <a href="https://www.linkedin.com/in/evan-o-grady-2a425218a/">
      <option value="linkedin">LinkedIn</option>
    </a>
    <a href="https://github.com/evanOGrady">
      <option value="github">GitHub</option>
    </a>
  </select>

</nav>

<main class="planets">
  <img src="C:\Users\evano\Downloads\Mercury.jpg" alt="Mercury">
  <img src="C:\Users\evano\Downloads\Venus.jpg" alt="Venus">
  <img src="C:\Users\evano\Downloads\Earth.jpg" alt="Earth">
  <img src="C:\Users\evano\Downloads\Mars.jpg" alt="Mars">
  <img src="C:\Users\evano\Downloads\Jupiter.jpg" alt="Jupiter">
  <img src="C:\Users\evano\Downloads\Saturn.jpeg" alt="Saturn">
  <img src="C:\Users\evano\Downloads\Uranus.jpg" alt="Uranus">
  <img src="C:\Users\evano\Downloads\Neptune.jpg" alt="Neptune">
</main>

<aside>
  <a class="twitter-timeline" data-width="400" data-height="500" data-theme="dark" href="https://twitter.com/NASA?ref_src=twsrc%5Etfw">Tweets by NASA</a>
  <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</aside>

<!-- I had trouble making the footer, so I got some help from stack overflow
      https://stackoverflow.com/questions/60687447/why-isnt-my-footer-at-the-bottom-of-the-page/60688208?noredirect=1#comment107377432_60688208
     -->
<footer id="footer">
  <h4 id="About">About The Creator...</h4>
  <img src="C:\Users\evano\Downloads\Evan NASA.jpg" align="evanNasa">
  <div class="paragraph">
    <p>Evan O'Grady is a Software Development student at NHTI-Concord's Community College in Concord, New Hampshire in the United States. He created this website as a school project for his web devlopment class. In his free time Evan enjoys, hiking, playing
      guitar, playing piano, and drawing.</p>
  </div>

  <div class="contact-links">

    <img src="C:\Users\evano\Downloads\email.jpeg" alt="email">
    <a href="mailto:evanogrady603@gmail.com">evanogrady603@gmail.com</a>
    <br>

    <img src="C:\Users\evano\Downloads\github.jpeg">
    <a href="https://github.com/evanOGrady">
      <button onclick="https://github.com/evanOGrady">https://github.com/evanOGrady</button>
    </a>
    <br>

    <img src="C:\Users\evano\Downloads\linkedin.jpeg">
    <a href="https://www.linkedin.com/in/evan-o-grady-2a425218a/">
      <button type="button">www.linkedin.com/in/evanogrady</button>
    </a>
    <br>
  </div>
</footer>

Hey, [check this question out](https://stackoverflow.com/questions/2000656/using-href-links-inside-option-tag). I think that you can find the solution there :) — ZombieChowder, Mar 16 '20 at 00:34

score 0 · Answer 1 · answered Mar 16 '20 at 00:33

To create a link using a picture simply surround your img src with the link, like this:

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

If you wanted a text link then it's like this:

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

score 0 · Answer 2 · answered Mar 16 '20 at 00:33

0

You would use an anchor tag. See the code below:

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

answered Mar 16 '20 at 00:33

AdrianAcostaPR

35
1
8

How to turn my image into a button that links to another html page

2 Answers2