Question 213573 in Html Question posted in
Some basic documentation can be found here.

Html – Link/href/url attached to my image is not working

I’m simply trying to make the images clickable so that when a user clicks on the image, it will bring them to another page. I’m almost 100% positive I have the correct code to do so, but it is not working for some reason.

I looked up how to attach a link to an image and used the code I found, but there is still an error. I don’t receive any error messages, its just not functioning as it is supposed to. Perhaps it could be something to do with how I set up my background and its blocking the link?

body {
  margin: 0;
  overflow: hidden;
}

@keyframes matrix-rain {
  0% { background-image: url("matrix-pride.png"); }
  5% { background-image: url("matrix-stripes.png"); }
  10% { background-image: url("matrix-green.png");  }
  15% { background-image: url("matrix-pride.png"); }
  20% { background-image: url("matrix-stripes.png"); }
  25% { background-image: url("matrix-green.png"); }
  30% { background-image: url("matrix-pride.png"); }
  35% { background-image: url("matrix-stripes.png"); }
  40% { background-image: url("matrix-green.png"); }
  45% { background-image: url("matrix-pride.png"); }
  50% { background-image: url("matrix-stripes.png"); }
  55% { background-image: url("matrix-green.png"); }
  60% { background-image: url("matrix-pride.png"); }
  65% { background-image: url("matrix-stripes.png"); }
  70% { background-image: url("matrix-green.png"); }
  75% { background-image: url("matrix-pride.png"); }
  80% { background-image: url("matrix-stripes.png"); }
  85% { background-image: url("matrix-green.png"); }
  90% { background-image: url("matrix-pride.png"); }
  95% { background-image: url("matrix-stripes.png"); }
  100% { background-image: url("matrix-green.png"); }
}

#background {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  pointer-events: none;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  animation: matrix-rain 10s linear infinite;
  text-align: center;
}

#background a {
  display: inline-block;
  max-width: 40%;
}

#background a img {
  max-width: 100%;
}

#header {
  font-family: fantasy;
  color: white;
  text-align: center;
  font-size: 400%;
  margin-top: 50px;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" />

<div id="background">
  <h1 id="header">Pills</h1>

  <a href="google.com"><img src="redpill.png" /></a>
  <a href="youtube.com"><img src="bluepill.png" /></a>

</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    I had set pointer-events: none on #background. Therefore that element and its children wouldn't not accept any mouse input. I simply removed that line of CSS, and the links worked.


  2. 0

    maybe like this:

    <img style="cursor:pointer;" onclick="var url='https://google.com'; window.open(url, '_blank');" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
    Login or Signup to reply.
  3. 0

    Number 1, put all of your link and script sources in the head section, make sure that your image is linking to the direct url and that the name of your images are the actual names and can be found. Give your background a color as well.

     <!DOCTYPE html>
    <html>
    <head>
 

     <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
    integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>order</title>
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" />
      <style>
        body {
      margin: 0;
      overflow: hidden;
    }
    
    #background {
      position: fixed;
      top: 0;
      left: 0;
      z-index: 1;
      pointer-events: none;
      width: 100%;
      height: 100%;
      background-size: cover;
      background-position: center;
      animation: matrix-rain 10s linear infinite;
      text-align: center;
    }
    
    #background a {
      display: inline-block;
      max-width: 40%;
    }
    
    #background a img {
      max-width: 100%;
    }
    
    #header {
      font-family: fantasy;
      color: white;
      text-align: center;
      font-size: 400%;
      margin-top: 50px;
    }
      </style>
    </head>
    <body>
    <div id="background">
      <h1 id="header">Pills</h1>
    
      <a href="google.com"><img src="redpill.png" /></a>
      <a href="youtube.com"><img src="bluepill.png" /></a>
    </div>
    </body>
    </html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search