How can I add a clickable image?

Question

What can I do to make the image I put, be able to redirect someone to a different webpage if the user clicks it?

Answer 1

<a href= "link where you want to redirect the user"><img = "link to the image" alt= "sentence you want to say if the image isn't loading" /> </a>

Answer 2

<img src="myImage.jpg" onclick="location.href = 'http://www.google.com'">

Answer 3

You just have to create a link <a> with an image in it like this : <a href="#"><img src=""></a>

Answer 4

@Ninja - Using # in an anchor is an in-page redirect; OP wants a different webpage.

Note for others: One of the main issues with images inside anchors is that anchors apply additional formatting and behavior.

This will require you to fiddle with block/border/inline CSS depending on your preferences (you may not care about presentation/quirks, just be aware that CSS can help resolve problems--or be the source of them if you include someone else's stylesheets).For <a><img ... you should also specify width and height so the preprocessor can get on with rendering the DOM and not force the user to wait*.

Those with script solutions can just skip the trouble.

Answer 5

* (the render wait + update can be one of the more maddening/infuriating things to users--they go to click/tap/even READ something and the document CHANGES position on them. Then it does it again. Don't be that dev.)

Answer 6

Write this code

<a href="your webpage address">img src="location of your image"</a>

Answer 7

u can use Image maping techniques which works as anchor tag!! and awesome to link web page in the image... if any help related to image mapping u can ask me

Answer 8

put the IMG tag inside an anchor tag

Answer 9

* items already taken below.

Using jQuery for...

====One image...
<img id="myImage" .../>
$("#myImage").click(function() {
document.location.href="...";
})

====A gallery...
<img class="galleryPic" data-seq="1" .../>
<img class="galleryPic" data-seq="2" .../>

$(".galleryPic").click(function() {
var seq=$(this).data("seq");
window.location.href="build_link-" + seq + ".html";
});

Obviously (for large pages) you would want to generate the sequences automatically (server or client side).

*Taken:
<a>nchor wrapping image...
image with location.href redirect on tag...
custom function + onclick..

Answer 10

if you know how to use images and know how to create links, simply combine the two: create your link and replace the text part with the image source.

Answer 11

<a href="LINK"> <img src"image link"> </IMG> </a>
that it

Answer 12

Put an image tag in between the anchor start and end tags

Answer 13

by using the <a href="www.example.com"><\a> method

Answer 14

I made a solution with a user input section so you can link to wherever you want depending on what you type in, defaults to Google.com but can be changed... so can the source image to click of course. Since I can't figure out how to link to the code I made just click on my profile and go to codes, it'll be the most recent.

Answer 15

You must write a function on javascript.Example:(
<script type="text/javascript">
function abc(){
//action that you want
}
</script>)
And add an atribute called "onclick".
Example:
(<button onclick="abc"></button>)