Develop Reference

Javascript button slideshow

I am new to the javascript programming so can someone help me.
This is my code
var button = document.getElementsByTagName('button')[0];
var pic = document.getElementsByTagName('img')[0];
button.addEventListener('click', colorIt, false);
function colorIt(e) {
pic.innerHTML="src=/'https://picturejs.org/adv/banner.jpg\' width=\'400px\' height=\'150px\'>";
}
<div id="picture">
<img src="" id="picture" style="display:none;">
</div>
<button id="button">Click Me</button>

Change your colorIt function to the following. You need to set the src and then set the display to block. You might also want to move the height and width to CSS.
function colorIt(e) {
pic.src='https://picturejs.org/adv/banner.jpg';
pic.width = 400;
pic.height = 150;
pic.style.display = "block";
}

function fillIt(e) {
pic.innerHTML="src=/'https://picturejs.org/adv/banner.jpg\' width=\'400px\' height=\'150px\'>";
}
The Source for the image in JavaScript is invalid. You used HTML hyperlinks in JS.

.innerHTML modifies the content between the opening and closing tags (<div>THIS</div>), not the content of the tag itself (<div THIS></div>).
You can modify the tags attribute using setAttribute or by setting a property directly:
var button = document.getElementsByTagName('button')[0];
var pic = document.getElementsByTagName('img')[0];
button.addEventListener('click', colorIt, false);
function colorIt(e) {
pic.src='https://picturejs.org/adv/banner.jpg'
pic.width='400px'
pic.height='150px'
}
<div id="picture">
<img src="" id="picture" style="display:none;">
</div>
<button id="button">Click Me</button>

You were on the right track. However, you need to set each property in JS.
ALso I could not get picturejs.org to load so I placed a picsum pic in there instead.
var button = document.getElementsByTagName('button')[0];
var pic = document.getElementsByTagName('img')[0];
button.addEventListener('click', colorIt, false);
function colorIt(e) {
pic.src='https://picsum.photos/150/400'
pic.width='400'
pic.height='150';
pic.style.display='block';
}
<div id="picture">
<img src="" id="picture" style="display:none;">
</div>
<button id="button">Click Me</button>

Please try the below code:
function fillIt(e) {
pic.style.display = "block";
pic.src ="https://libertycity.net/uploads/download/gta5_lamborghini/thumbs/4qhllsfhd8fk9bm4mf36761u37/15205818409903_63e23c-pgta535987529.jpg";
}

You need to add the root of your image in , for example depeding on where you have the image downloaded in your PC.
Hope this helps !

Show different form based on what image is clicked

I've got 3 images in the screen. Each image should display a different form in the SAME POSITION in the screen and hide the other 2 forms.
Image1: When clicked show form1 and hide form2 and form 3
Image2: When clicked show form2 and hide form1 and form 3
Image3: When clicked show form3 and hide form1 and form 2
Forms should be shown at the same position. I just see a solution calling the whole page by sending a parameter in the URL stating which form to show on the screen. I would really like to show the right form depending on what image is clicked at the moment without that.
I'm using HTML5, Bootstrap 4 and JavaScript - any suggestion using any of these languages would be perfect.

There are a lot of answers to things like this, try looking around before asking a question.
Here is one of the simplest approaches you will ever see using only JS and HTML
JavaScript
const imageOne = document.getElementById('imageOne');
const imageTwo = document.getElementById('imageTwo');
const imageThree = document.getElementById('imageThree');
const formOne = document.getElementById('formOne');
const formTwo = document.getElementById('formTwo');
const formThree = document.getElementById('formThree');
imageOne.addEventListener("click", function() {
formOne.style.display = "block";
formTwo.style.display = "none";
formThree.style.display = "none";
});
imageTwo.addEventListener("click", function() {
formOne.style.display = "none";
formTwo.style.display = "block";
formThree.style.display = "none";
});
imageThree.addEventListener("click", function() {
formOne.style.display = "none";
formTwo.style.display = "none";
formThree.style.display = "block;
});
HTML
<img id="imageOne" src="http://foo.bar">
<img id="imageTwo" src="http://bar.foo">
<img id="imageThree" src="http://last.image">
<div id="formOne" style="display: none">
<form>
....
</form>
</div>
<div id="formTwo" style="display: none">
<form>
....
</form>
</div>
<div id="formThree" style="display: none">
<form>
....
</form>
</div>

Ok, you need:
the 3 images
the 3 forms, with position absolute or fixed (so that they stay in the same position)
a JS function attached to the click event of every image that changes the correspondet form style to display:block and the others to display:none.
Something like:
var form1 = document.getElementById('form1')
document.getElementById('form1').onclick = function() {
form1.style.display = 'block'
form2.style.display = 'none'
form3.style.display = 'none'
}
For each one of your forms.
Here is a working pen I made to show how to do it.
https://codepen.io/jaimelopez18/pen/zWOEMw
This is all made with pure js (vanilla). You should try to learn this first and after you get a good grasp of it, I recommend taking a look at VueJS.

I just made a simple skeleton in jsFiddle as per your requirements, have a look at the code.
HTML:
<html>
<head>
<script type='text/javascript' src="jquery.min.js"></script>
</head>
<body>
<div class="jsImgWrp">
<img src="http://via.placeholder.com/350x150" class="jsImg" data-formid="form1" />
<img src="http://via.placeholder.com/350x150" class="jsImg" data-formid="form2"/>
<img src="http://via.placeholder.com/350x150" class="jsImg" data-formid="form3" />
</div>
<div class="jsFormWrp form-wrapper">
<div class="jsFrm form1 active">
form 1
</div>
<div class="jsFrm form2">
form 2
</div>
<div class="jsFrm form3">
form 3
</div>
</div>
</body>
</html>
CSS:
.form-wrapper .jsFrm {
display:none;
padding:10px;
border:solid 2px #eee;
width:200px;
height:100px;
}
.form-wrapper .jsFrm.active {
display:block;
}
.jsImgWrp img {
width:100px;
display:inline-block;
}
Javascript:
$(document).ready(function(){
var imgWrapper = $('.jsImgWrp');
var formWrapper = $('.jsFormWrp');
$('.jsImg', imgWrapper).on('click', function(){
var formId = $(this).data('formid');
$('.jsFrm').removeClass('active');
$('.' + formId).addClass('active');
})
});
Hope this may help you.

changing background image when onmouseover [duplicate]

This question already has answers here:
Programmatically change the src of an img tag
(9 answers)
Closed 5 years ago.
function change(ele) {
document.getElementById('info').innerHTML = ele.alt;
document.getElementById('info').style.backgroundImage = "url(ele.src)";
}
<div id='info'>
This will tell you more about the below image
</div>
<div id='container'>
<div>
<img alt="The mini Barbarian" src="img\barbarian-thumb.jpg" class="pics" onmouseover="change(this)">
</div>
</div>
how do i change the background image of div with id info with the image on which the mouse hover that image is in div tag with id conatiner

please see this. Basically you can bind function inline with html. Or you can bind it dynamically. This is very simple solution. If your image path is fixed.
<script type="text/javascript">
function mouseaway(my_image) {
my_image.src = "someimage.jpg";
}
function rollover(my_image) {
my_image.src = "someimage2.jpg";
}
</script>
<img src="someimage3.jpg" onmouseover="rollover(this)" onmouseout="mouseaway(this)" />

Just assign an id to your image tag and change the image src like this.
function mouseOverImage() {
document.getElementById("img").src = "images/foo.png";
}
<img
id="img"
alt="some description/info"
src="images/blue.png"
onmouseover = "mouseOverImage()"
/>

Hope this will help
$(document).ready(function(){
$("img").hover(function(){
$(this).attr('src', 'images/alt/imagename.jpg');
});
});

Try this:
function change(e){
document.getElementById("info").style.backgroundImage = "url('"+e.src+"')";
document.getElementById("info").style.backgroundRepeat="no-repeat";
}
function change2(e){
document.getElementById("info").style.backgroundImage = "";
}
#info{
height:100px;
}
<div id='info'>
This will tell you more about the below image
</div>
<div id='container'>
<div>
<img alt="The mini Barbarian" src = "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2264%22%20height%3D%2264%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_1614068cdea%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A10pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_1614068cdea%22%3E%3Crect%20width%3D%2264%22%20height%3D%2264%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2213.84375%22%20y%3D%2236.5%22%3E64x64%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" class="pics" onmouseover="change(this)" onmouseout="change2(this)">
</div>
</div>

How to switch 4 images using a button

<html>
<head>
<title>How To Insert an Image</title>
<script>
function changeImage(){
var img = document.getElementById('image');
image.src='image4.jpg';
}
</script>
</head>
<body>
<img id="image" src="image1.jpg" />
<br><br><br>
<button id="clickme" onclick="changeImage();">Click to change image!</button>
</body>
</html>
I am quite new to Javascript so please dont be too harsh. Basically im trying to switch from one picture to another using a button. So far with this code i have only managed to do 2 images but when i try to add a 3rd or 4th the first image messess up. I was hoping if someone could help me fix this problem.

Here's simplest approach the I used before, for two images. Easily extended to accomodate three, four, or more alternate images.
<div id="image1">
<img ... >
<button ...>
</div>
<div id="image2" style="display: none">
<img ... >
<button ...>
</div>
That is, put the first image, and a button, inside a "< div >" element, and a second image, and a button inside a second "< div >" element that's initially hidden.
Then, each button's javascript simply needs to set its own div's CSS style to "display: none", and remove this style from the other div element, effectively hiding one image, and displaying the other one.
This approach also makes it possible to update the button's text or label, accordingly. If both buttons have the same label, the only apparent result is the image change.

Try this script block instead:
<script>
var images = ['image2.jpg', 'image3.jpg', 'image4.jpg', 'image1.jpg']
function changeImage() {
var img = document.getElementById( 'image' )
var url = images.shift() // remove first url from list
image.src = url // use it
images.push( url ) // append url to the end of the list
}
</script>

What you could do is declare an array which contains all your image urls:
var imageUrls = ["image2.jpg", "image3.jpg", "image4.jpg", "image1.jpg"];
Then when clicking the button, you remove the first image url from the the array by using shift and assign that to variable imageUrl.
Then you set that imageUrl to the src attribute of the image element on your page.
Then you add that imageUrl at the end of the array using push.
This will rotate the images in the imageUrls array on every click.
<html>
<head>
<title>How To Insert an Image</title>
<script>
var imageUrls = ["image2.jpg", "image3.jpg", "image4.jpg", "image1.jpg"];
function changeImage(){
var img = document.getElementById('image');
var imageUrl = imageUrls.shift();
img.src = imageUrl;
imageUrls.push(imageUrl);
}
</script>
</head>
<body>
<img id="image" src="image1.jpg" />
<br><br><br>
<button id="clickme" onclick="changeImage();">Click to change image!</button>
</body>
</html>

You were very close! You just made mistake to assign a value to image.src instead of img.src. have a look at the code below :)
Using clicks:
<html>
<head>
<title>How To Insert an Image</title>
<script>
i = 1; /*Default value, only executed when the page is loaded (default is the first image, so when i + 1 the second image is displayed on first click.)*/
function changeImage(){
var img = document.getElementById('image');
i = i + 1; /*next image*/
if(i == 5) /* if end is reached, reset to first image*/
{
i = 1;
}
img.src='http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image' + i + '.jpg'; /*number to text in variable, so image + 'number of the image (i)' + extension(.jpg in this case)*/
}
</script>
</head>
<body>
<img id="image" src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" height="100px" />
<br><br><br>
<button id="clickme" onclick="changeImage();">Click to change image!</button>
</body>
</html>
Automatic image slider
<html>
<head>
<title>How To Insert an Image</title>
<script>
i = 1; /*Default value, only executed when the page is loaded (default is the first image, so when i + 1 the second image is displayed on first click.)*/
setInterval(function changeImage(){
var img = document.getElementById('image');
i = i + 1; /*next image*/
if(i == 5) /* if end is reached, reset to first image*/
{
i = 1;
}
img.src='image' + i + '.jpg'; /*number to text in variable, so image + 'number of the image (i)' + extension(.jpg in this case)*/
}, 5000)
</script>
</head>
<body>
<img id="image" src="image1.jpg" height="100px" />
</body>
</html>

Issue in js onmouseover to change pictures.

I use this code to make a onmouseover change pictures. but in IE it works, in firefox it shows wrong, where is the problem? And can anyone add a onmouseout function that return to the first picture for me? Thanks.
<script type="text/javascript">
function changeimage(rel){
document.getElementById("image").src=rel;
}
</script>
<img src="img1.jpg" id="image" />
<a onmouseover="changeimage('img1.jpg')" rel="img1.jpg">img1</a>
<a onmouseover="changeimage('img2.jpg')" rel="img2.jpg">img2</a>
<a onmouseover="changeimage('img3.jpg')" rel="img3.jpg">img3</a>

you can use:
<script type="text/javascript">
function changeimage(rel)
{
var img = document.getElementById("image");
img.setAttribute("orig", img.src);
img.src=rel;
}
function SetOriginal()
{
var img = document.getElementById("image");
img.src = img.getAttribute("orig");
}
</script>
<img src="img1" id="image" />
<a onmouseover="changeimage('img1')" onmouseout="SetOriginal()" rel="img1">img1</a>
<a onmouseover="changeimage('img2')" onmouseout="SetOriginal()" rel="img2">img2</a>
<a onmouseover="changeimage('img3')" onmouseout="SetOriginal()" rel="img3">img3</a>
to return to the original image.
I tested this on firefox(3.6.12) and it is working