Just started learning HTML, and I came across a simple problem which I couldn't find the answer to. I know that I can use the line <img src ="link to src"/>
to display an image. I also know I can used the <script> </script>
tags to hold javascript code. My question is, how can I only display the img if a variable in my script is equal to true?
<!DOCTYPE html>
<HTML>
<TITLE>Img Tester</TITLE>
<BODY>
<h1>Image:</h1>
<img src ="link to src"/> <!--only display this if the variable c == true in the script-->
</BODY>
<SCRIPT>
var c = confirm("Display Image?");
if(c== true) {
//do something here that displays image?
}
</SCRIPT>
</HTML>
Just started learning HTML, and I came across a simple problem which I couldn't find the answer to. I know that I can use the line <img src ="link to src"/>
to display an image. I also know I can used the <script> </script>
tags to hold javascript code. My question is, how can I only display the img if a variable in my script is equal to true?
<!DOCTYPE html>
<HTML>
<TITLE>Img Tester</TITLE>
<BODY>
<h1>Image:</h1>
<img src ="link to src"/> <!--only display this if the variable c == true in the script-->
</BODY>
<SCRIPT>
var c = confirm("Display Image?");
if(c== true) {
//do something here that displays image?
}
</SCRIPT>
</HTML>
Share
asked Feb 24, 2016 at 5:06
Ashwin GuptaAshwin Gupta
2,2079 gold badges36 silver badges61 bronze badges
1
- stackoverflow./questions/6242976/… might help – seenukarthi Commented Feb 24, 2016 at 5:07
6 Answers
Reset to default 4First, I'd set the default style of the image with id="img1"
to hidden. Both display: none
and visibility: hidden
are similar however visibility takes up space.
Please take a look at the snippet below. If you press ok, you will see the image of the dragon. If you press cancel, it won't appear.
var image = document.getElementById("img1");
var c = confirm("Display Image?");
if (c) {
image.style.display = 'block';
}
#img1 {
display: none;
height: 200px;
width: 200px;
}
<h1>Image:</h1>
<img id="img1" src="http://cdn.playbuzz./cdn/df02649d-894e-4b82-94da-cd10dd2449a0/7833c7a7-6301-446b-8fbc-ed948aaaa0be.jpg"/>
A few pointers
- Tag names should be in lowercase, not uppercase
- Instead of
if(c == true)
, use the equivalentif (c)
Give an id to that image and hide the element with that id
<!DOCTYPE html>
<HTML>
<TITLE>Img Tester</TITLE>
<BODY>
<h1>Image:</h1>
<img style="display:none" id="img1" src ="link to src"/> <!--only display this if the variable c == true in the script-->
</BODY>
<SCRIPT>
var c = confirm("Display Image?");
if(c== true) {
document.getElementById( "img1" ).style.display = "inline";
}
</SCRIPT>
</HTML>
Observe two changes in the code
Id
attribute has been given to the image element and its display property is set tonone
In the
if
section, a line has been added to hide the image using that iddocument.getElementById( "img1" ).style.display = "inline";
by setting its display
property to 'inline'
.
Use div for this as following:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3/TR/html4/loose.dtd">
<html>
<head>
</head>
<body>
<div id = "display">
<h1>Image:</h1>
<img src ="link to src"/>
</div>
<script>
document.getElementById('display').style.visibility = 'hidden';
var c = confirm("Display Image?");
if(c== true) {
//do something here that displays image?
document.getElementById('display').style.visibility = 'visible';
}
</script>
</body>
</html>
display: none
will download the image even if the user clicks cancel. Here's another approach to download the image ONLY if the user clicks OK
<h1>Image:</h1>
<div id="myImg"></div>
</BODY>
<SCRIPT>
var c = confirm("Display Image?");
if(c== true) {
document.getElementById("myImg").innerHTML='<img src="img_src" />';
}
</SCRIPT>
You can replace the div
with p
or whatever you like.
Use this code
<HTML>
<TITLE>Img Tester</TITLE>
<BODY>
<h1>Image:</h1>
<img id="img"/>
</BODY>
<SCRIPT>
var c = confirm("Display Image?");
if(c== true) {
document.getElementById("img").setAttribute("src","1.jpg");
}
</SCRIPT>
</HTML>
I'd use classes for this task...
<img id="image-1" class="myimage" />
In your styles you should hide the image
.myimage {
display: none;
}
Also you need another class to show your image
.myimage-show {
display: block;
}
Now you need set myimage-show class to show your image
<script>
var c = confirm("Display Image?");
if(c== true) {
document.getElementById('image-1').classList.add('myimage-show');
}
</script>