Make clickable images .how?

HTML & CSS
1

Hi there. I want make a clickable images. If anyone clicked on the images then he go to directly main website. But don’t know how to make these types images.I have some image how I can add a website link inte images through Android device ? Help me :confused:

2

It is quite simple, you can wrap the image tag in anchor tags to create a link.

<a href="\main.html" title="Go the main website">
    <img src="images/main-image.jpg" alt="Main Website" width="200" height="200">
</a>
5 Likes
3

Hi there khalid446,

and a warm welcome to these forums. :winky:

Here is another possible method…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>Untitled document</title>

<!--
The internal CSS should be transferred to an external file
<link rel="stylesheet" href="screen.css" media="screen">
-->

<style media="screen">
body {
    background-color: #f0f0f0;
    font: normal 1em / 1.62em sans-serif;
 } 
#link {
    position: relative;
    display: block;
    width: 13em;
    height: 7.5em;
    margin: auto;
    border: 1px solid #000;
 }
#link span {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url( https://www.coothead.co.uk/images/gaze.gif );
    background-size: 100% 100%;
 }
</style>

</head>
<body>

<a id="link" 
 href="https://www.sitepoint.com/community/t/make-clickable-images-how/361613" 
 title="Go the SitePoint">
 sitepoint
 <span></span>
</a>

</body>
</html>

coothead

3 Likes
4

…and another…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>Untitled document</title>

<!--
The internal CSS should be transferred to an external file
<link rel="stylesheet" href="screen.css" media="screen">
-->

<style media="screen">
body {
    background-color: #f0f0f0;
    font: normal 1em / 1.62em sans-serif;
 } 
#link {
    position: relative;
    display: block;
    width: 13em;
    height: 7.5em;
    margin: auto;
    border: 1px solid #000;
 }
#link::after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url( https://www.coothead.co.uk/images/gaze.gif );
    background-size: 100% 100%;
    content: '';
 }
</style>

</head>
<body>

<a id="link" 
 href="https://www.sitepoint.com/community/t/make-clickable-images-how/361613" 
 title="Go the SitePoint">
 sitepoint
</a>

</body>
</html>

coothead

3 Likes
5

I already download some pics.those pics are in my phone. So how can do that ? Pinterest probably not allowed these types link

6

Hi there khalid446,

If you want to have linked images on “Pinterest”, then
surely you must ask them what procedure is required
to achieve that aim. :biggrin:

coothead

1 Like
7

This is a forum about HTML and CSS, so the answers given were under the assumption that you wanted to do this using HTML (or CSS).
Nowhere in your post did you previously mention Pinterest.
If HTML and CSS is not the answer you are looking for, this is probably the wrong forum.
If your question specifically asks how to do this in Pinterest, it could be moved to the Social Media section. Though it may also be a good idea to alter the wording, so people know this is about Pinterest.

2 Likes