Changing picture serveral times by click in HTML with javascript - javascript

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.

Related

how to change an image source more than once using onclick on html and javascript

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.

Change image within div on image icon click

I have created a Javascript function which will allow me to change the image to another when the div is directly clicked but I am trying to get this function to work depending on which other image icon i select.
As you can see by the above image, i have a main div which contains a picture on browser load, and two further thumbnail divs which include different pictures, I want to create the function to change the main div if one of the smaller thumbnail divs are selected.
Current Javascript Function
function diffImage(img) {
if(img.src.match(/blank/)) img.src = "bognor.jpg";
else img.src = "images/bognor2.jpg";
}
Thanks in advance,
Sam
You would just use onclick event listeners on the icons and the function would change the large image to the image of the item clicked:
document.getElementById("icon1").onclick = function() {
document.getElementById("mainImage").src = this.src;
}
document.getElementById("icon2").onclick = function() {
document.getElementById("mainImage").src = this.src;
}
If you happen to have several icons you could make an icon class and apply the event listener like so:
var icons = document.getElementsByClassName("icon");
for(var i=0; i<icons.length; i++) {
icons[i].onclick = function(){
document.getElementById("main").src = this.src;
}
}
Fiddle Example for using classes
Although it's easier in that case to use jQuery and simply attach the event handler doing $('.icon').click(function(){ ... }). Of course you are not required to do so.
I recently did something similar where I had a table underneath the feature image of just smaller thumnail images.
$(".browseTable").on('click', 'td', function () {
var thumbNail = $(this).parent('tr').find('img').attr('src');
var feature = $('#featureImg img').attr('src');
$('#featureImg img').fadeOut(400, function () {
$(this).fadeIn(400)[0].src = thumbNail;
});
});
You could put the url of the big image in a custom data-attribute on the thumb element, such as <img src="thumb1.png" data-bigsrc="image1.png" />. Then you can add an event to all thumbnails like this:
var thumbs = document.querySelectorAll('.thumbnail');
var mainImage = document.querySelector('#mainImage');
for(var i=0; i<thumbs.length; ++i) {
thumbs[i].addEventListener('click', function(e) {
mainImage.src = e.target.getAttribute("data-bigsrc");
});
}
If you have high quality images and actually want to make them load when the user clicks, you could also use a radio button for each image, with the value set to the URL of the big image. Make the radio buttons invisible and put the thumbnails inside labels. Then you can just bind an event listener to all radio buttons and make them change the main image URL based on the radiobutton value.
Or if you want all the images to load in advance, you should just make tons of big-small image pairs and make the big image only visible if the small image's radiobutton is clicked, making an all-css solution.
As an alternative, this uses vanilla JavaScript, and three different ways of storing/naming the image files are covered.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
</head>
<body>
<div id="divMainImage">
<img id="mainImage" src="/images/image01Main.jpg" alt="Main image" />
</div>
<div id="divThumbnails">
<img class="thumb" src="/images/image01.jpg" alt="image01 thumbnail" />
<img class="thumb" src="/images/image02.jpg" alt="image02 thumbnail" />
<img class="thumb" src="/images/image03.jpg" alt="image03 thumbnail" />
</div>
<script type="text/javascript">
// Name both small and large images the same but with a prefix or suffix depicting thumbnail/main:
// image01.jpg (image01small.jpg) or image01Main.jpg (image01.jpg)
// image02.jpg (image02small.jpg) or image02Main.jpg (image02.jpg) etc.
// Or use two folders - one with main images, the other with thumbnails - both files named the same,
// then swap the folder to use when getting the image.
// Then use the displayed thumbnails' class to load originals:
var thumbnails = document.getElementsByClassName("thumb");
var mainImage = document.getElementById("mainImage");
for (index in thumbnails)
{
thumbnails[index].onclick = function () {
// Depending on the way used use on of the following:
mainImage.src = this.src.replace('.jpg', 'Main.jpg');
// Or
// mainImage.src = this.src.replace('thumb.jpg', '.jpg');
// Or
// mainImage.src = this.src.replace('/images/small/', '/images/large/');
}
}
</script>
</body>
</html>

Automatically load an image using javascript

I'm using this code to build a gallery:
window.onload=function(){
var image = document.getElementsByClassName('thumbnails')[0].getElementsByTagName('img');
var mainImage = document.getElementById('rr_lrg_img');
[].forEach.call(image,function(x){
x.onmouseover = function(){
mainImage.src = x.src;
};
});
}
The code loads different thumbnails on the big image when "onmouseover". Now I would like to "preload" the first image from that gallery of thumbnails. I tried using onload with
rr_lrg_img.src=document.getElementsByClassName('thumbnails')[0].getElementsByTagName('img')[0].src
but then it conflicts with the onmouseover. Any ideas? I can only use javascript, no jquery.
Since your var image is actually a collection of images, you need to use the [0] index pointer to target the first one:
window.onload=function(){
var image = document.getElementsByClassName('thumbnails')[0].getElementsByTagName('img');
var mainImage = document.getElementById('rr_lrg_img');
mainImage.src = image[0].src; // Add this line (preload first image into main one)
function toMainImage() {
mainImage.src = this.src;
}
[].forEach.call(image,function(x){
x.addEventListener("mouseenter", toMainImage, false);
});
}
.thumbnails img{height:50px;}
<img src="//placehold.it/200x200&text=default" id="rr_lrg_img">
<div class="thumbnails">
<img src="//placehold.it/200x200/cf5&text=1">
<img src="//placehold.it/200x200/f0f&text=2">
<img src="//placehold.it/200x200/444&text=3">
</div>

Javascript onMouseover to swap images

I have some code that makes an image larger when moused over:
<script>
function bigImg(x)
{
x.style.height="70px";
x.style.width="237px";
}
function normalImg(x)
{
x.style.height="56px";
x.style.width="218px";
}
</script>
and I call those functions with:
<a><img border="0" src="category_icons/addorder.png" onmouseover="bigImg(this)" onmouseout="normalImg(this)"></a>
But what I would really like to do is make it so the bigIMG(x) function also changes the image. I'm not extremely familiar with javascript and was wondering if someone knew what I can code in, to swap the image. The image name is addorder2.png. I've tried using this.src="addorder2.png"; but that is not working.
This will do. Change the image src into "addorder2.png".
<script>
function bigImg(x)
{
x.style.height="70px";
x.style.width="237px";
x.src = "addorder2.png";
}
function normalImg(x)
{
x.style.height="56px";
x.style.width="218px";
x.src = " addorder.png";
}
</script>
My 2 cents:
LIVE DEMONSTRATION
Don't use inline JS, rather you can set a data.* attribute
and an object literal that will contain your desired changes
and read it with JS:
<img class="zoom" src="img.jpg" data-enlarge='{"src":"img2.jpg", "zoom":"1.2"}'>
As you can see above we'll target with JS every element with class "zoom"
function enlarge(){
var el = this,
src = el.src,
data = JSON.parse(el.dataset.enlarge);
el.src = data.src;
el.style.transition = "0.3s";
el.style.transform = "scale("+data.zoom+")";
el.addEventListener('mouseleave', function(){
el.src = src;
el.style.transform = "scale(1)";
},false);
}
var $ZOOM = document.querySelectorAll('.zoom');
for(var i=0; i<$ZOOM.length; i++){
$ZOOM[i].addEventListener('mouseenter', enlarge, false);
}
With Javascript you can edit the src attribute of the img.
Javascript:
function bigImg()
{
document.getElementById("myImg").src="addorder2.gif";
}
HTML:
<!DOCTYPE html>
<html>
<body>
<img id="myImg" onmouseover="bigImg()" src="addorder.png">
</body>
</html>
I recommend checking out w3schools to learn more about image document manipulation and of course specifically getting and setting the image src element
Just change x.src property according to function:
function bigImg(x)
{
x.style.height="70px";
x.style.width="237px";
x.src = "category_icons/addorder2.png";
}
function normalImg(x)
{
x.style.height="56px";
x.style.width="218px";
x.src = "category_icons/addorder.png";
}

JavaScript to change images

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()" />

Categories