I'm trying to make a sort of a minimal clickable "slideshow". So far I have only managed to make the image change into another. but I want to add other images to it. I tried to add other ifs and elses on the javascript but it doesn't work. (I'm a noob...) How can I do it? I juts want to click and the images change. This is my code so far:
<div> <img alt="" src="1.jpg" id="imgClickAndChange" onclick="changeImage()"/> </div>
<script language="javascript">
function changeImage() {
if (document.getElementById("imgClickAndChange").src = "1.jpg")
{
document.getElementById("imgClickAndChange").src = "2.jpg";
document.getElementById("imgClickAndChange").src = "3.jpg";
}
}
</script>
thank you!
In your condition you need a double equals == - you can also pass this in to avoid getElementById multiple times. If you want to make a cycler - you can put your sources into an array and cycle thru that:
<img alt="" src="1.jpg" id="imgClickAndChange" onclick="changeImage(this)"/>
var images = ["1.jpg", "2.jpg", "3.jpg"];
function changeImage(img) {
var currentIndex = images.indexOf(img.src);
var zeroBasedLength = images.length - 1;
if (currentIndex == zeroBasedLength)
img.src = images[0];
else
img.src = images[++currentIndex];
}
If you want to cycle through those images, I'd make an array and swap the position of the elements in it like:
var imgs = ["2.jpg", "3.jpg", "1.jpg"];
function changeImage() {
document.getElementById("imgClickAndChange").src = imgs[0];
imgs.push(imgs.shift())
}
jsFiddle example
Related
I am trying to have an image, once clicked move on to image 2, then once image 2 is clicked it moves on to image 3, then image 4 and so on, but I am struggling to find a way to have more than 2 images? So far I have tried various different ways such as repeating the code I already have, using multiple if statements and switch statement but I just cannot seem to be able to use more than 2 images. I am only a beginner coder so it is difficult to see where I am going wrong. the expected outcome would be just to have a number of images appearing after each one is clicked.
So far the code that I have that's working is:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Social Media</title>
<link rel="stylesheet" type="text/css" href="css/styles.css">
<script type="text/javascript">
var mysrc = "image1.jpg";
function changeImage() {
if (mysrc == "image1.jpg") {
document.images["pic"].src = "image1.jpg";
document.images["pic"].alt = "image1";
mysrc = "image.jpg";
}
else {
document.images["pic"].src = "image.jpg";
document.images["pic"].alt = "image";
mysrc = "image1.jpg";
}
}
</script>
</head>
<body>
<img src="image.jpg"
alt="image" id="pic" class="portrait"
onclick="changeImage()"
width="1000px" height="500px"
style="cursor:pointer">
</body>
</html>
and i have been able to get the same results by doing:
function change() {
var image = document.getElementById('image');
image.src = "image1.jpg"
}
</script>
</head>
<body>
<img src="image.jpg" alt="text" id="image" onclick="change();">
but i just cant seem to get more than 2 images? as mentioned I am just a beginner so I'm really not sure if it's just me making stupid mistakes, any advice would be really helpful
You should be to do this using an array and a simple variable counter.
var imgCount = 0;
var images = ["img1.png", "img2.png", "img3.png", "img4.png"...];
imgCount will get added to every time <img> is clicked.
<script>
var imgCount = -1;
var images = ["img1.png", "img2.png", "img3.png", "img4.png"...];
function change() {
imgCount++;
var image = document.getElementById('image');
image.src = images[imgCount];
}
</script>
<img src="image.jpg" alt="text" id="image" onclick="change()">
The src is now called from the array. imgCount serves as the counter of the amount of times the image has been clicked and is used to find the correct src with the array since it also serves as an index.
If you don't know much about arrays read MDN.
I'm sure that you don't have an endless amount of pictures, so you can also use this:
<script>
var imgCount = -1;
var images = ["img1.png", "img2.png", "img3.png", "img4.png"];
function change() {
if (imgCount !== images.length - 1)
imgCount++;
else
imgCount = 0;
var image = document.getElementById('image');
image.src = images[imgCount];
}
</script>
<img src="image.jpg" alt="text" id="image" onclick="change()">
Now, if <img> is clicked and it is on the last image, it will go back to the beginning. The if statement sees whether or not the counter equals the amount of images in the array. If it hasn't it keeps adding. If it hasn't, it sets the counter back to 0.
I need a programm in HTML with javascript which has two pictures that by click changes from picture A to B and from picture B to A and so on. I think I need a loop...
Please Try Following Code
function changeImage() {
var image = document.getElementById('myImage');
if (image.src.match("bulbon")) {
image.src = "pic_bulboff.gif";
} else {
image.src = "pic_bulbon.gif";
}
}
<img id="myImage" onclick="changeImage()" src="pic_bulboff.gif" width="100" height="180">
<p>Click the light bulb to turn on/off the light.</p>
You Can Have example here https://www.w3schools.com/js/tryit.asp?filename=tryjs_lightbulb
you can find a good example of what you want to do in here:
https://www.w3schools.com/js/tryit.asp?filename=tryjs_intro_lightbulb
you just need to tweak it a bit so it will change the images correctly.
I would recommend building a function with variables to store the images name.
<script>
function ChangeImage(){
var picElement1 = document.getElementById('HTMLImgElement1');
var picElement2 = document.getElementById('HTMLImgElement2');
var temp = picElement1.src;
picElement1.src = picElement2.src;
picElement2.src = temp;
}
</script>
In the html just set up 2 images with ID HTMLImgElement1 and HTMLImgElement2.
and a button with an onclick attr that will forward to this function.
I have 6 pictures of the lovely Serena Williams, I've been researching how to change the images every time I click on them. However the code is not working, please help me identify whether I've made a logic or syntax error:
<html>
<head>
<title>SerenaWilliams</title>
</head>
<body>
<img src="http://1.bp.blogspot.com/-hGUyOlpoeB0/UROyeHgMXcI/AAAAAAAAAZ4/L32zLAQvQj0/s1600/Hot-Serena-Williams+_sexy+16.jpg" id="serenaGallery" onclick="changeImage" />
</body>
<script type="text/javascript">
function changeImage() {
var currentImage = document.getElementById("serenaGallery").src;
var image1 = "http://1.bp.blogspot.com/-hGUyOlpoeB0/UROyeHgMXcI/AAAAAAAAAZ4/L32zLAQvQj0/s1600/Hot-Serena-Williams+_sexy+16.jpg";
var image2 = "http://usatthebiglead.files.wordpress.com/2011/04/serena-williams-is-big-boned.jpg";
var image3 = "http://www.strangecosmos.com/images/content/109963.jpg";
var image4 = "http://1.bp.blogspot.com/-HiJxcIjMmFg/UWo9JtbfCEI/AAAAAAAAF1g/aUU42F3V9Ic/s1600/Serena+Williams+Hot+2013+04.jpg";
var image5 = "http://mystarclub.com/wp-content/uploads/2012/11/Serena-Williams-is-a-Bikini-Babe.jpg";
var image6 = "http://1.bp.blogspot.com/-vCsx4sswzeM/UA5GtbEwJ1I/AAAAAAAAACE/tMiP_p-0rB0/s1600/serena+williams+tennis+ball+in+butt.jpg";
if (currentImage==image1){ currentImage=image2; }
if (currentImage==image2){ currentImage=image3; }
if (currentImage==image3){ currentImage=image4; }
if (currentImage==image4){ currentImage=image5; }
if (currentImage==image5){ currentImage=image6; }
else { currentImage=image1; }
}
</script>
</html>
First of all, you need to modify the onclick attribute so it will actually execute the function:
onclick="changeImage()"
The command
var currentImage = document.getElementById("serenaGallery").src;
just stores the source attribute of the image in a variable; it doesn't reference it.
Also, you have to change all if statements to else if or the function will change image1 to image2, then to image3, etc.
This would work:
var currentImage = document.getElementById("serenaGallery");
...
if (currentImage.src == image1){ currentImage.src=image2;}
else if (currentImage.src == image2){ currentImage.src=image3;}
...
Lastly, using an array for the image sources would allow you to condense the if statements into a single for loop. Not really needed for six images, but better if you want to add more.
I am trying to add a link to a single image that already has a change source function attached to it.
The site has a gallery that uses thumbnails to change the larger image so there are 27 images. I am triyng to add an individual link to one of this images.
all the code i am finding uses id's and in order to keep the change source function working, none of these solutions will work.
The link is for only one image. Here is my code:
<script>function changeImage27()
{
var img = document.getElementById("image");
img.src="thestudio/thestudio_27.gif";
}
</script>
And my HTML:
<div id="slideshow">
<img id="image" src="thestudio/thestudio_1.gif" />
</div>
<a id="clickme" onClick="changeImage();"><img border="0"src="thestudio/thestudio_1t.gif"></a>
I only need to link one image. so i am looking for a solution that adds a hyperlink in the script. a.href="" is not working and i cant seem to find any other solutions.
This may be a better solution:
<head>
<script type="text/javascript">
var images = ["image1.gif","image2.gif",...,"image27.gif"];
var thumbs = ["image1t.gif","image2t.gif",...,"image27t.gif"];
var basePath = "thestudio/";
var currentImage = 0;
function changeImage() {
var img = document.getElementById("image");
var thumb = document.getElementById("thumb");
img.src = basePath + images[currentImage];
thumb.src = basePath + thumbs[currentImage];
currentImage ++;
if (currentImage >= images.length) {
currentImage = 0; // this will cause it to loop
}
}
</script>
</head>
<body onLoad="changeImage();">
<div id="slideshow">
<img id="image">
</div>
<a onClick="changeImage();" href="#"><img border="0" id="thumb"></a>
</body>
So you don't have to have 27 different functions.
You could also define the images like follows:
var images = [{image:"image1.gif",thumb:"image1t.gif"},...{image:"image27.gif",thumb:"image271.gif"}];
Then in changeImage:
var image = images[currentImage];
img.src = basePath + image.image;
thumb.src = basePath + image.thumb;
Here you go:
Take a look at this JSFiddle I put together for you.
Cheers!
http://jsfiddle.net/douglasloyo/aR83b/
<script>
window.changeImage = function changeImage()
{
var img = document.getElementById("my-img");
var newImgSrc = "http://www.johnlund.com/ArticleImages/Artcl38-stock-ideas/dog-leader-pack.jpg";
img.src=newImgSrc;
}
</script>
<img id="my-img" src="http://www.johnlund.com/ArticleImages/Artcl38-stock-ideas/ocean-island- palm.jpg" />
<button onclick="window.changeImage();">ClickMe</button>
I have set of images named as img1, img2, img3, img4,......., imgx. So, I want to code a JavaScript to display an image img1 at document.onload() and on first click image to be changed to img2 next on second click the image to be changed at img3 and then same to the next image on every NEXT button click. In this manner I need even PREVIOUS button to go back to the previously viewed images.
How to implement this?
var currentImage = 1;
window.onload = function() {
showImage();
};
document.getElementById("next").onclick = function() {
currentImage++;
showImage();
}
function showImage() {
document.getElementById("image").src = "img" + currentImage + ".jpg";
}
These are the basics and should help you get started. If you need help implementing the rest, ask us what you want to do specificially and what you tried. Hint, you'll need to handle the case where there is no "next" image to show. Do you want it to come back to the beggining or just not work?
<script type="text/javascript">
var images = new Array("img/image1.jpg", "img/image2.jpg", "img/image3.jpg");
var cur_image = 0;
function goNextImage() {
var img = document.getElementById('image');
cur_image++;
if (cur_image == images.length) {
cur_image = 0;
}
img.src = images[cur_image];
}
</script>
<img src="img/image1.jpg" id="image" onclick="goNextImage()" />