Just beginning to learn HTML & Javascript.
I have the following code, which works. however, because I have have an img tag in my body it is trying to show a place holder for an image before I click the button. How can I stop this.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Tesco JSONP</title>
<script type="text/javascript">
function picture(){
var pic = "http://img.tesco.com/Groceries/pi/118/5000175411118/IDShot_90x90.jpg"
document.getElementById('bigpic').src = pic.replace('90x90', '225x225');
}
</script>
</head>
<body>
<img id="bigpic" src="bigpic" />
<button onclick="picture()">Enlarge</button>
</body>
</html>
Best wishes.
Add style "display:none" to picture tag
<img id="bigpic" src="bigpic" style="display:none;"/>
And in function picture change it for show image
document.getElementById('bigpic').style.display='block';
There is demo: http://jsfiddle.net/eX5kx/
Use display property in css, try this:
javascript:
function showPicture() {
var sourceOfPicture = "http://img.tesco.com/Groceries/pi/118/5000175411118/IDShot_90x90.jpg";
var img = document.getElementById('bigpic')
img.src = sourceOfPicture.replace('90x90', '225x225');
img.style.display = "block";
}
html:
<img style="display:none;" id="bigpic" src="bigpic" />
<button onclick="showPicture()">Enlarge</button>
I like shin solution, i would do the same thing myself. However theres a lot of way to do that, another option is to put a tiny trasparent image as default and then replace like you did to the other one. like this:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Tesco JSONP</title>
<script type="text/javascript">
function picture(){
var pic = "http://img.tesco.com/Groceries/pi/118/5000175411118/IDShot_90x90.jpg"
document.getElementById('bigpic').src = pic.replace('90x90', '225x225');
}
</script>
</head>
<body>
// tiny trasparent image
<img id="bigpic" src="https://maps.gstatic.com/mapfiles/markers2/dd-via-transparent.png" alt="" />
<button onclick="picture()">Enlarge</button>
</body>
</html>
this way no css is needed but like i said before i prefer Shin's solution.
Related
I'm making an image gallery using vanilla JavaScript. I'm trying to make it so that clicking on a thumbnail will change the srcattribute in the img tag with the class gallery-highlight, updating the image shown to the user. But when I open my HTML file in Firefox and click on an image thumbnail, it does nothing. My JavaScript doesn't seem to be doing anything to the page. How can I fix this?
Here's what I've got:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width-device-width, initial-scale-1.0" />
<title>Image Gallery</title>
<link rel="stylesheet" href="./style.css" />
<script src="./script.js"></script>
</head>
<body>
<img src="./efrain-big.jpg" class="gallery-highlight" alt="" />
<div class="room-preview">
<img src="./efrain-small.jpg" alt="" />
<img src="./heather-small.jpg" alt="" />
<img src="./jimmy-small.jpg" alt="" />
</div>
</body>
</html>
function imageGallery() {
const highlight = document.querySelector(".gallery-highlight");
const previews = document.querySelectorAll(".room-preview img");
previews.forEach(preview => {
preview.addEventListener("click", function() {
const smallSrc = this.src;
const bigSrc = smallSrc.replace('small', 'big');
highlight.src = bigSrc;
});
});
}
imageGallery();
I think the problem is with the way you organized your project. From what can i see ( the HTML code) you happen to have all the files in one folders. No subfolders for js and css. If that’s not the case you need to fix the src of js in the script tag .
Here's my problem:
I am new to Javascript and I am trying to make my image change on click.
It's a simple counter game that does a 2 frame animation of squidward hitting the dab.
So far I have got the counter to work but I cannot get the image to change on click as well. Also, it's going to have to change back to the original image so that it can be clicked and counted again.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./style.css">
<title>Document</title>
</head>
<body>
<div class="container">
<button onclick="dabMan()"><img src="./squid-dab1.gif"> .
</button>
<br><br>
How many dabs??
<input type="text" id="text">
</div>
<script src="./script.js"></script>
</body>
</html>
var dabcount = 0;
function dabMan() {
dabcount = dabcount + 1
document.getElementById('text').value = dabcount;
console.log("dabMan", dabMan)
document.getElementById("./squid-dab1.gif") .src = "./squid-dab2.gif";
console.log("changeimage", dabMan)
}
instead of using the "onclick(){}" attribute in your html, write an event listener in js. Assuming your image tag is like this:
<img src='./squid-dab1.gif' id='myImage'>
Note: Javascript needs to know how to find your image... Hence the ID
Your javascript code should look like this:
<script>
var image = document.getElementById('myImage');
image.addEventListener('click', function(){
changeImage();
});
function changeImage(){
image.src = './squid-dab2.gif';
}
</script>
That will make it so that when you click the image, it will change. If you wanted a button to do that, simply create a button with the id "myImage" instead like so:
<button id='myImage'>Click me to change the picture</button>
I'm trying to display the title of my image right underneath the image itself. I have an onClick event in the image that changes the title of the image once you click on it.
<!DOCTYPE html>
<html>
<head>
<title>
onClick Handler
</title>
<h3 style="text-align:center">onClick Handler</h3>
</head>
<body style="text-align:center">
<img src="NukaCola.jpg" title="Nuka Cola" id="id1" height="550" width="350" onClick="this.title='You Clicked!';"/>
</br><script>
var x=document.getElementById("id1");
document.write(x.title);
</script>
</body>
</html>
Now, I know it's bad form to use document.write( ), and it doesn't even accomplish what I want to do, because I would like to display the new image title after the user has clicked on the image. How can I achieve this?
<!DOCTYPE html>
<html>
<head>
<title>
onClick Handler
</title>
<h3 style="text-align:center">onClick Handler</h3>
</head>
<body style="text-align:center">
<img src=NukaCola.jpg title="Nuka Cola" id="id1" height=550 width=350 onClick="updateTitle(this)"/>
<p id='id1Text'></p>
</br>
<script>
function updateTitle(img) {
img.title = 'You clicked!';
document.getElementById(img.id +'Text').textContent = img.title;
}
</script>
</body>
</html>
Noticed something: you have a h3 tag declared within the head tag.
When I click the link "show pdf" I want to display the embeded pdf. However there must be something wrong. The pdf will now load. Some help?
Check out my fiddle: http://jsfiddle.net/benjones337/7jkmvLL9/2/
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset=utf-8 />
<script type="text/javascript">
window.onload = function() {
document.getElementById("showPDF").onclick = function() {
document.getElementById("thePDF").style.visibility = "visible";
}
}
</script>
</head>
<body>
<div>
<object data="http://www.elml.org/website/en/download/gitta_databases.pdf" type="application/pdf">
<embed id="thePDF" src="http://www.elml.org/website/en/download/gitta_databases.pdf" width="700" height="575" type="application/pdf" />
</object>
<p><a id="showPDF">Show PDF</a></p>
</div>
</body>
</html>
Avoid using onload event in jsfiddle as this event already happened when the page is "loaded".
Hide the object itself (I moved your id to the parent element) as the embed element is not affected with your style.
jsfiddle.net/7jkmvLL9/6/
I made a small image gallery with one big image along with few small ones under neath. there is a zoomer attached with big image and when i click on small image it replaces the big image but zoomer shows the old image instead of new one
jQuery
jQuery(document).ready(function($){ //fire on DOM ready
$('#myimage').addpowerzoom()
})
javascript
function movImg(img){
var bImg = document.getElementById('myimage');
bImg.src=img.src;
$(document).trigger("ready");
}
html
<img id="myimage" src="img/abc.jpg" alt="" />
<image src="thumbnails/xyz.jpg" onClick="movImg(this);" width="73px" style="cursor: pointer;" />
where i am wrong or what's the right way to do it?
Thanks
Try to call $('#myimage').addpowerzoom(); instead of $(document).trigger("ready");
This worked for me. It looks like the slight delay that happens when you change the source of the image breaks powerzoom. The idea is to call addpowerzoom() after image is loaded.
<!DOCTYPE html>
<html lang="en-AU">
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
<script type="text/javascript" src="ddpowerzoomer.js"></script>
<script type="text/javascript">
function movImg(img){
var bImg = document.getElementById('myimage');
bImg.src = img.src;
jQuery('#myimage').one("load", function() {
jQuery('#myimage').addpowerzoom();
});
};
jQuery(document).ready(function($){
$('#myimage').addpowerzoom();
});
</script>
</head>
<body>
<img id="myimage" src="img/abc.jpg" alt="" />
<img id="thumb" src="thumbnails/xyz.jpg" onClick="movImg(this);" width="64px" style="cursor: pointer;" />
</body>
</html>