CODEWITHSUNDEEP
htmlcss
Arminas Šaltenis
Arminas Šaltenis

Reputation: 166

How to put links on image?

I'm learning HTML, CSS and Javascript and trying to make a website. Now what I want to do is to put links on image, it should look like this:

enter image description here

Now, I did the styling of my links, I try to put positions absolute and relative, but nothing works. Everything puts those links before image. Here are my HTML and css codes. Maybe I am doing something wrong.

body {
  background-image: url("img/bg.png");
  margin: 0px 0px 0px 0px;
}
img {
  width: 100%;
  background: no-repeat;
  position: relative;
}
#header #nav {
  float: right;
}
a {
  font-family: 'Open Sans Condensed', sans-serif;
  border: none;
  background-color: transparent;
  font-size: 20px;
  color: black;
  text-decoration: none;
  margin-left: 30px;
  margin-right: 20px;
  font-weight: 700;
  text-transform: uppercase;
}
a:focus,
a:hover {
  color: #bebcc1;
}
<!DOCTYPE html>

<html>

<head>
  <meta charset="UTF-8">
  <link type="text/css" rel="stylesheet" href="style.css">
  <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:700" rel="stylesheet">
</head>

<body>
  <div id="header">
    <div id="nav">
      <a href="google.lt">Meniu</a>
      <a href="google.lt">Istorija</a>
      <a href="google.lt">Atsiliepimai</a>
      <a href="google.lt">Kontaktai</a>
    </div>
    <img src="img/sumustinis.jpg">
  </div>
</body>

</html>

Upvotes: 1

Views: 172

Answers (4)

DamiToma
DamiToma

Reputation: 1106

This is pretty simple to do. You just need to include your image into a tag. For example, if you want to redirect to http://www.google.com by clicking an image, you just need to use this code.

<!DOCTYPE html>
<html>
<body>
<a href="http://www.google.com"><img src="IMAGE_URL" alt="Image"></a>
</body>
</html>

Upvotes: 0

Plenarto
Plenarto

Reputation: 649

If you want to put list with links INSIDE the area of your image, you might try to put both: links and image inside of a div.

.container {
  position: relative;
  }

.container img {
  width: 100%;
  }

.links {
  position: absolute;
  top: 0;
  left: 0;
  }
<div class="container">
  <img src="http://placehold.it/300x300">
  <div class="links">
    <ul>
      <li> test </li>
      <li> test </li>

     </ul>
  </div>
</div>

Upvotes: 1

Anonymous
Anonymous

Reputation: 1990

to put link on a image try this:

<a href="http://stackoverflow.com"><img src="#" alt="img"></a>

Upvotes: 1

Sreetam Das
Sreetam Das

Reputation: 3389

A simple way is to wrap the image around with an anchor tag.

body {
  background-image: url("img/bg.png");
  margin: 0px 0px 0px 0px;
}
img {
  width: 100%;
  background: no-repeat;
  position: relative;
}
#header #nav {
  float: right;
}
a {
  font-family: 'Open Sans Condensed', sans-serif;
  border: none;
  background-color: transparent;
  font-size: 20px;
  color: black;
  text-decoration: none;
  margin-left: 30px;
  margin-right: 20px;
  font-weight: 700;
  text-transform: uppercase;
}
a:focus,
a:hover {
  color: #bebcc1;
}
<!DOCTYPE html>

<html>

<head>
  <meta charset="UTF-8">
  <link type="text/css" rel="stylesheet" href="style.css">
  <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:700" rel="stylesheet">
</head>

<body>
  <div id="header">
    <div id="nav">
      <a href="google.lt">Meniu</a>
      <a href="google.lt">Istorija</a>
      <a href="google.lt">Atsiliepimai</a>
      <a href="google.lt">Kontaktai</a>
    </div>
    <a href="#"><img src="img/sumustinis.jpg"></a>
  </div>
</body>

</html>

Upvotes: 2

Related Questions