You can modify the style of an element using document.getElementById(id).style.property = new style
Solution 1 :
Solution 2 :
Just set .style.width and .style.height.
const img = document.getElementById("imgClickAndChange");
function changeImage() {
if (img.src == "url-image in"")
{
img.src = "url-image out"";
img.style.height = "247px";
img.style.width = "70px";
}
else
{
img.src = "url-image in"";
img.style.height = "247px";
img.style.width = "600px";
}
}
Solution 3 :
Here is the solution Allais:
Don’t use quotes of the same, which means you’re using double quotes three times so it may cause error. Instead try this code :
<p>
<img alt="" src="url-image in" style="height: 200px; width: 220px" id="imgClickAndChange" onclick="changeImage()" />
</p>
<script language="javascript">
function changeImage() {
if (document.getElementById("imgClickAndChange").src == "url-image in")
{
document.getElementById("imgClickAndChange").src = "url-image out";
}
else
{
document.getElementById("imgClickAndChange").src = "url-image in";
}
}
</script>
Solution 4 :
ok think i have drink
cause i have test again..
<script language="javascript">
function changeImage() {
if (document.getElementById("imgClickAndChange").src == "url in"")
{
document.getElementById("imgClickAndChange").src = "url out"";
}
else
{
document.getElementById("imgClickAndChange").src = "urlin"";
}
}
</script>
well i think i must have drunk something weird, indeed the script works very well from the moment that the width is the same for the two images, the height will be modified automatically.
Sorry , and thanks for your help 🙂
Solution 5 :
If your image has a different size, remove the width and height from the image style attribute.
Just toggle the image and you don’t have to worry about the height which will be set automatically based on the original image height & width.
Here is a CodeSandbox link for demo.
https://codesandbox.io/s/toggle-image-onclick-u6m7p?file=/index.html
If you want a fixed height before and change later if some images are too large then remove the height from your image tag and set it when the click event is triggered.
<img alt="" src="url-image in" style="width: 220px" id="imgClickAndChange" onclick="changeImage()" />
and in your JS
document.getElementById("imgClickAndChange").style.height = "Your Height in px";
Example with refactored code to demonstrate the concept
let image_src = {
img_1: "https://via.placeholder.com/150",
img_2: "https://via.placeholder.com/200"
};
let img = document.getElementById("imgClickAndChange");
img.addEventListener("click", function() {
if (this.src === image_src.img_1) {
this.src = image_src.img_2;
// if you want to change the height - uncomment below
//this.style.height = "200px";
} else {
this.src = image_src.img_1;
// if you want to change the height - uncomment below
//this.style.height = "150px";
}
});<!DOCTYPE html>
<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" />
<title>Static Template</title>
</head>
<body>
<p>
<img
alt=""
src="https://via.placeholder.com/150"
id="imgClickAndChange"
/>
</p>
<p>Click on the image to toggle</p>
<script type="text/javascript" src="./script.js"></script>
</body>
</html>Problem :
In a particular context I have to display an image which at the click will display a second image.
I think the problem is not complicated in itself, but here I must admit that I am drying.
the size of the images is different:
the image in fact 247×70
the image out is 247×600
my problem is that i don’t see where i can declare the image size out.
because in this case the two images are the same size, for the time being I am cheating
adding a transparent background, but that shifts the design.
if you look the code , its blocked on 247×600
i must use javascript , i cant use on my contexte CSS.
<p>
<img alt="" src="url-image in"
style="height: 200px; width: 220px" id="imgClickAndChange" onclick="changeImage()" />
</p>
<script language="javascript">
function changeImage() {
if (document.getElementById("imgClickAndChange").src == "url-image in"")
{
document.getElementById("imgClickAndChange").src = "url-image out"";
}
else
{
document.getElementById("imgClickAndChange").src = "url-image in"";
}
}
</script>
How declare the second image?
Comments
Comment posted by Ashish Yadav
If I understood correctly, you want the image size to be
Comment posted by ALLAIS Ethem
Exactly 🙂 i dont know , i have try many times without succes.
Comment posted by epascarello
"url-image in""
Comment posted by Unmitigated
@epascarello I assume that’s just a placeholder.
Comment posted by epascarello
@hev1 um, no…
Comment posted by Ashish Yadav
That’s what I am talking about in my answer.