JS load image on click only

Question

I need a function in JS to load an image on click only. I use an API and if i load a captcha image every page load after a few requests bans me because not all visitors enter captcha.

O i have http://site.tld/?captcha_image=3382894 wich if i load every time page loads i got banned for flood.

So i need something when visitor uses api let's say it appears a text with "Click here to enter captcha", then when it clicks the image is loaded.

I don't know JS at all, i appreciate any help... Thanks!

score 1 · Accepted Answer · edited May 23 '17 at 11:53

1

$("button").click(function () {
    var imgUrl = $(this).data('rel');
    $("#area").html("<img src='" + imgUrl + "' alt='description' />");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button data-rel="http://www.lemis.com/grog/Photos/20110726/big/capcha.gif">Click</button>
<div id="area"></div>

Reference link

edited May 23 '17 at 11:53

Community

1
1

answered Jul 14 '15 at 16:53

Keerthi

923
6
22

Thanks so much Keerthi, you saved my life. (and my website) – MRS Jul 14 '15 at 16:56
No problem. Please mark as an answer so that it'll help others too. – Keerthi Jul 14 '15 at 17:00

JS load image on click only

1 Answers1