Menu
I'm looking to make a very basic html doc that shows an image (or multiple images) and when I click on the image, it hides the image. I can achieve this using jquery. It works in jsfiddle but for some reason will not work when I just click on the html doc on my desktop and launch it in the browser that way. What am I missing? Here is the exact code as I have it in my html doc:
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
<img id="book" src="C:\Users\user123\Desktop\homeButton.png" alt="" width="100" height="123">
<script>
$(document).ready(function(){
$( "#book" ).click(function( event ) {
event.preventDefault();
$( this ).hide();
});
});
</script>
</body>
</html>
And here is a link to the working jsfiddle:
http://jsfiddle.net/pLXGu/
When I launch the html doc on my desktop, it takes a long time to load the image (15-20 sec) and when I click the image nothing happens (supposed to hide the image on click).
617
asked Feb 07 '26 17:02
Local documents have no protocol, so you need to supply one for jQuery:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
try
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With