What I am looking to achieve is that when an image is clicked, the content is shown and the image changes to another image, and when this is clicked again the image reverts back and the content becomes hidden
Currently I have this in script tags
<script language="javascript" type="text/javascript">
function setVis(id, vis) {
document.getElementById(id).style.display = vis;
}
function swapImage() {
switch (imageNo) {
case 1:
image.src = "images/img.png"
imageNo = 2
return(false);
case 2:
image.src = "images/img1.png"
imageNo = 1
return(false);
}
}
</script>
and this in the main html page
<h4><img id="image" name="image" src="images/img.png" width="10" height="10" border="0" onclick="swapImage();"/> Content</h4>
This doesn't work it shows the content but it won't hide it again, and the images do not change.
I would appreciate any help that can be offered thanks
This code should do the toggle for you.
<head>
<script language="javascript" type="text/javascript">
var imageNo = 2;
function swapImage() {
image = document.getElementById('image')
switch (imageNo) {
case 1:
image.src = "images/img.png"
imageNo = 2
document.getElementById('content').style.display = 'none'
return(false);
case 2:
image.src = "images/img1.png"
imageNo = 1
document.getElementById('content').style.display = 'block'
return(false);
}
}
</script>
</head>
<body>
<h4><img id="image" name="image" src="images/img.png" border="0" onclick="swapImage();"/></h4>
<div id="content" style="display:none">This content toggles</span>
</body>
i think it may be easier (imho because i hate working in javascript) to use jquery, using jquery you can have a look at the toggle function which gives you this functionality very easy. I believe it has less of a learning curve than neat javascript. If you need any help let me know.
Jquery Toggle
Here is similar solution like dev_musings but with a few less lines of code (for more about Alternate image with javascript onclick follow the link):
<script language="javascript" type="text/javascript">
function swapImage() {
var image = document.getElementById('image');
if (image.src == "images/img.png")
{
image.src = "images/img1.png";
document.getElementById('content').style.display = 'none';
}
else
{
image.src = "images/img.png";
document.getElementById('content').style.display = 'block';
}
return(false);
}
</script>
</head>
<body>
<h4><img id="image" name="image" src="images/img.png" border="0" onclick="swapImage();"/></h4>
<div id="content" style="display:none">This content toggles</span>
</body>
Related
i did this code following my lecturer's code. When you click the button an image is supposed to come with a text. Also the when the mouse hovers over the button they change color (This part works fine).
The text also appears. But the image doesn't. In the lecturer's code it works fine. Can someone help me ? :)
<html>
<head>
<link rel="stylesheet" href="java.css">
<script language="JavaScript" type="text/javascript">
function haha() {
let i = document.getElementById("img");
let url = "haha.jpg";
i.style.backgroundImage = `url(${url})`;
document.getElementById("facetext").innerHTML = "This is my haha face";
}
function happy() {
let i = document.getElementById("img");
let url = "happy.png";
i.style.backgroundImage = `url(${url})`;
document.getElementById("facetext").innerHTML = "This is my happy face";
}
function angry() {
let i = document.getElementById("img");
let url = "angry.jpg";
i.style.backgroundImage = `url(${url})`;
document.getElementById("facetext").innerHTML = "This is my angry face";
}
function changebg(color) {
color.style.backgroundColor = "blue";
}
function defaultbg(color) {
color.style.backgroundColor = "white";
}
</script>
</head>
<body>
<script></script>
<div class="inner">
<button onclick="haha()" id="btn" onmouseover="changebg(this)" onmouseout="defaultbg(this)"> Happy Face</button> <br><br>
<button onclick="angry()" id="btn" onmouseover="changebg(this)" onmouseout="defaultbg(this)">Angry Face</button><br><br>
<button onclick="happy()" id="btn" onmouseover="changebg(this)" onmouseout="defaultbg(this)"> Haha Face </button><br><br>
<div id="img"></div>
<p id="facetext"></p>
</div>
<script src="java.js"></script>
</body>
</html>
Your code looks like it works fine, if the images are indeed in the same directory as the HTML page.
However, if the div #img does not have any styling, its height is 0px. You might just need to set a height for it:
#img { height: 200px; }
i have used the following code for image slider. and how can i set the link to each images
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'>
var imageID=0;
function changeimage(every_seconds){
//change the image
if(!imageID){
document.getElementById("myimage").src="1.png";
imageID++;
}
else{if(imageID==1){
document.getElementById("myimage").src="2.png";
imageID++;
}else{if(imageID==2){
document.getElementById("myimage").src="3.png";
imageID=0;
}}}
//call same function again for x of seconds
setTimeout("changeimage("+every_seconds+")",((every_seconds)*1000));
}
</script>
</head>
<body style='background:black;' onload='changeimage(2)'>
<div style='position:absolute;width:100%;height:100%;left:0px;top:0px;' align='center'><img width='700px' height='100px' id='myimage' src='http://www.photos.a-vsp.com/fotodb/14_green_cones.jpg'/></div>
</body>
</html>
please tell how to add link to each images
You can do like your image src.
use .setAttribute('href', "yoururl"); for set a html attribute with JS.
Add a link around your images and change the href attribute.
<script type='text/javascript'>
var imageID=0;
function changeimage(every_seconds){
var link = document.getElementById("mylink");
//change the image
if(!imageID){
document.getElementById("myimage").src="1.png";
link.setAttribute('href', "url1");
imageID++;
}
else{if(imageID==1){
document.getElementById("myimage").src="2.png";
link.setAttribute('href', "url2");
imageID++;
}else{if(imageID==2){
document.getElementById("myimage").src="3.png";
link.setAttribute('href', "url3");
imageID=0;
}}}
//call same function again for x of seconds
setTimeout("changeimage("+every_seconds+")",((every_seconds)*1000));
}
</script>
</head>
<body style='background:black;' onload='changeimage(2)'>
<div style='position:absolute;width:100%;height:100%;left:0px;top:0px;' align='center'>
<a id="mylink" href="#">
<img width='700px' height='100px' id='myimage' src='http://www.photos.a-vsp.com/fotodb/14_green_cones.jpg'/>
</a>
</div>
</body>
</html>
You can also use if-else-if instead of nested if-else statements. This works.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type='text/javascript'>
var imageID=0;
function changeimage(every_seconds){
//change the image
if(!imageID){
document.getElementById("myimage").src="https://pixabay.com/static/uploads/photo/2015/08/14/08/29/images-888133_960_720.jpg";
document.getElementById("link").href = "url1";
imageID++;
}
else if(imageID==1){
document.getElementById("myimage").src="http://eyespired.nl/wp-content/uploads/2013/09/bronzen-beelden-matteo-pugliese-607x458.jpg";
document.getElementById("link").href = "url2";
imageID++;
}else if(imageID==2){
document.getElementById("myimage").src="http://www.gettyimages.ca/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg";
document.getElementById("link").href = "url3";
imageID=0;
}
//call same function again for x of seconds
setTimeout("changeimage("+every_seconds+")",((every_seconds)*1000));
}
</script>
<body style='background:black;' onload='changeimage(2)'>
<div style='position:absolute;width:100%;height:100%;left:0px;top:0px;' align='center'>
<a id="link" href="#">
<img width='700px' height='100px' id='myimage' src='http://www.photos.a-vsp.com/fotodb/14_green_cones.jpg'/>
</a></div>
</body>
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>
First, 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.com/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 equivalent if (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 to none
In the if section, a line has been added to hide the image using that id
document.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.org/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>
I am very new to JavaScript and I am creating a simple slideshow and I got it work ok. The only thing is I can't seem to create a web link to each of the images in my slideshow. I would like for it to link to a different web page to the 4 different images I have for the slideshow as it scrolls though.
Here is what I have:
<head>
<script type="text/javascript">
<!--
//preload images
var image1=new Image()
image1.src="Images/slideshow_1_home_2013.jpg"
var image2=new Image()
image2.src="Images/slideshow_2_home_2013.jpg"
var image3=new Image()
image3.src="Images/slideshow_3_home_2013.jpg"
var image4=new Image()
image4.src="Images/slideshow_4_home_2013.jpg"
//-->
</script>
</head>
<body>
<div align="left"><img src="Images/slideshow_1_home_2013.jpg"
name="slide" width="974" height="305" align="left"/></div>
<script type="text/javascript">
<!--
var step=1
var whichimage=1
function slideit(){
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
whichimage=step
if (step<4)
step++
else
step=1
setTimeout("slideit()",10000)
}
slideit()
function slidelink(){
if (whichimage==1)
window.location="link1.htm"
else if (whichimage==2)
window.location="link2.htm"
}
</script>
</body>
</html>
One way is to use a link to wrap up your images:
<head>
<script type="text/javascript">
<!--
//preload images
var image1=new Image()
image1.src="Images/slideshow_1_home_2013.jpg"
var image2=new Image()
image2.src="Images/slideshow_2_home_2013.jpg"
var image3=new Image()
image3.src="Images/slideshow_3_home_2013.jpg"
var image4=new Image()
image4.src="Images/slideshow_4_home_2013.jpg"
//-->
</script>
</head>
<body>
<div align="left"><a name="mylink" href=""><img src="Images/slideshow_1_home_2013.jpg"
name="slide" width="974" height="305" align="left"/></a></div>
<script type="text/javascript">
<!--
var step=1
var whichimage=1
function slideit(){
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
whichimage=step
if (step<4)
step++
else
step=1
setTimeout("slideit()",10000)
}
slideit();
if (whichimage==1)
document.links.mylink.src="link1.htm"
else if (whichimage==2)
document.links.mylink.src="link2.htm"
</script>
</body>
</html>
There is an easier ways to do that:
first:create an HTML document and we are going to call it images.html
in that file just add all the images you want to load
like:
<img src="img1.jpg" onload="parent.loadedimg()" />
<img src="img2.jpg" onload="parent.loadedimg()" />
<img src="img3.jpg" onload="parent.loadedimg()" />
we use parent to call a function from our iframe to our index.html file
then just add to your page index.html this anywhere you want it wont affect your page
<div style="display:none>
<iframe src="images.html">
</iframe>
</div>
so now the images will start loading automatically.
now add this HTML anywhere you want your image to be displayed
<img src="img1.jpg" width="400" height="300" id="slider" />
finally the Javascript:
<script type="text/javascript">
startslide();
var imgnum=parseInt;
imgnum=0;
maximg=parseInt;
maximg=0;
function loadedimg(){
maximg++;
}
function startslide(){
if(imgnum<=maximg && maximg>0){
imgnum++;
document.getElementById('slider').src='img'+imgnum+'.jpg';
if(imgnum==maximg){
imgnum=0;
}
}
window.setTimeout(function(){startslide()},2000);
}
</script>
now explanation:
if you remember in the iframe every time that an image load sends a function to the javascript in this javascript when the function is called the var maximg change by 1 so every time an image load this var sum up 1 in this example when all the images finish to load the final number for maximg is going to be 3 cause in the iframe you only loaded 3 images, and now you don't need to worry for the ammount of the images you want to load you just add so many images as you want in the iframe.
the var imgnum it is used to change the src of the image to be displayed, so be sure that al your images have the same name, and then the number of the order to be displayed.
and the line that used window.setTimeout will define how much time will wait to change to the next image in this case i use 2000 and it means 2 seconds, 500 means 0.5 seconds,5000 means 5 seconds, so change it to any number you want to wait.
that it's all so i hope been helpful for you!.
I was wondering is there a way to only specify the source of an image in javascript. So if I had the following image tag:
<img class="CustomerPict" id="Image" alt="name" src=src style="left: 18px; top: 18.5px;">
And in javascript I want to declare the variable src? Any help would be appreciated!
HTML provides no way to set an attribute value using JavaScript.
You either need to set the src to a default value (possible a 1x1 transparent gif) and then change it with JavaScript later, or to generate the entire img element from JS.
<img class="CustomerPict" id="Image" alt="name" src="1x1.gif" style="left: 18px; top: 18.5px;">
<script>
document.getElementById('Image').src = src;
</script>
or
<script>
var container = document.getElementById('image-container');
var image = document.createElement('img');
image.src = src;
image.id = "Image";
image.className = "CustomerPict";
image.alt = "name";
// You can move these to a style sheet ruleset with a class or id selector
image.style.left = "18px";
image.style.top = "18.5px";
container.appendChild(image);
</script>
document.getElementById('Image').src = 'http://domain.com/picture.png';
<img src="src" id="Image">
document.getElementById('Image').setAttribute('src', 'http://www.gravatar.com/avatar/c9bef77e2d810012d8c96f84b9fc9bc9?s=32&d=identicon&r=PG');
img=document.getElementById("Image");
console.log(img.src);
or the nicer way (in my opinion)
img=document.getElementsByTagName("img");
console.log(img[0].src);
then you can assign img[0].src a value
You can make it a oneliner by using the img-tags onerror attribute:
<img src='not-found.zzz' onerror='this.src=window.src;'>
But make sure that the specified image in window.src (global scope) is correct or the script will loop forever...
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<script type='text/javascript'>
var src = 'my_real_image.png';
</script>
</head>
<body>
<img src='not-found.zzz' onerror='this.src=window.src;'>
</body>
</html>
DEMO: http://jsbin.com/ozimov/1/embed