I am trying to get these pictures to swap when the button is pressed, the pictures are local to my computer and need to change in sequence. When I press the button, it just generates a new picture, I need them to interchange
<html>
<head>
<script>
var imgs=document.images;
function changeLight() {
var firstImage = imgs[0].src + "";
for(var i=0; i<imgs.length-1; i++){
imgs[i].src=imgs[i+1].src+"";
}
imgs[imgs.length-1].src=firstImage;
}
</script>
</head>
<body>
<div id="splash">
<img src="Traffic Light Red.gif" alt="" id="mainImg">
</div>
<body>
<div id="wrapper">
<div>
<img id="image" src="images/test" />
<br><br><br>
<button id="clickme" onclick="changeLight();">Click to change</button>
<img src="Traffic Light Yellow.gif" hidden />
<img src="Traffic Light Green.gif" hidden />
<img src="Traffic Light Yellow2.gif" hidden />
</div>
</div>
</body>
Here is some code. It works by comparing the src attributes of the hidden images, not a very elegant technique, but it works. This method will also break if you add images before the last hidden image, so use with care.
Also remember to rename the files so that they have no spaces. On the web, spaces get turned into %20s when being requested, which tends to break things :)
Anyways, here’s the code.
<!doctype html>
<html>
<body>
<div id="splash">
<img src="TrafficLightRed.gif" alt="" id="mainImg">
</div>
<div id="wrapper">
<div>
<button id="clickme" onclick="changeLight();">Click to change</button>
<img src="TrafficLightRed.gif" hidden>
<img src="TrafficLightYellow.gif" hidden>
<img src="TrafficLightGreen.gif" hidden>
</div>
</div>
<script>
function changeLight() {
var currentImg = document.getElementById("mainImg");
for(var i=1;i<3;i++) {
if(document.images[i].src == currentImg.src) {
currentImg.src = document.images[i + 1].src;
return;
}
}
currentImg.src = document.images[1].src;
}
</script>
</body>
</html>
A more robust technique would be to store an array of image links in your JavaScript, instead of the hacky hidden images. Brownie points for implementing that!
so you mean first come as third, second as first and third as second??
and again the same on next click??
check the fiddle http://jsfiddle.net/stdeepak22/hax3d8cv/
$(document).ready(
function(){
$('#nextImage').click(function(){
var firstImage = $('#AllImages img:first');
$(firstImage).remove();
$('#AllImages').append(firstImage);
});
});
UPDATE
pure JavaScript. for those who says "jQuery for just this? my my" ;)
http://jsfiddle.net/stdeepak22/0mcLcozk/
function f(){
var allImage = document.getElementById('AllImages');
var firstImage = allImage.getElementsByTagName('img')[0];
allImage.removeChild(firstImage);
allImage.appendChild(firstImage);
}
Refer the script :
<html>
<head>
<script>
var imgs=document.getElementsByTagName('img');
var init = 3;
console.log(imgs[2].src);
function changeLight(){
var target = document.getElementById('imaget');
var firstImage = imgs[0].src + "";
if(init < 5 ){
target.src = imgs[init].src;
init = init +1;
}
else{
init = 3;
target.src = imgs[init].src;
}
}
</script>
</head>
<div id="splash">
<img src="Traffic Light Red.gif" alt="" id="mainImg">
</div>
<body>
<div id="wrapper">
<div>
<img id="imaget" src="images/test" />
<br><br><br>
<button id="clickme" onclick="changeLight();">Click to change</button>
<img src="Traffic Light Yellow.gif" hidden />
<img src="Traffic Light Green.gif" hidden />
<img src="Traffic Light Yellow2.gif" hidden />
</div>
</div>
</body>
This works for me. I would like to suggest you to use array values (image srcs) set in javascript instead of using hidden images.
Related
I have an issue with my onclick event. I want to have a sub-menu within my page. I have 5 icons on my page. when I click on one icon, the other 4 icons disappear. when the 4 icons disappear, there will show up an couple of buttons to go to other pages.
my problem with this event is that the other buttons, don't show up. and i do not know what the problem is...
I made a video to show the problem;
https://youtu.be/F2NUj3KVIIk
my code;
<div id="column">
<p id="afbeelding-spiraal">
<img width="150" id="spiraal" src="https://www.spiralex.nl/wp-content/uploads/2020/12/spiraal-correct.png">
</p>
</div>
<div id="column">
<p id="afbeelding-plaat">
<img width="150" id="plaat" src="https://www.spiralex.nl/wp-content/uploads/2020/12/platenwisselaar-correct.png">
</p>
</div>
<div id="column">
<p id="afbeelding-lucht">
<img width="150" id="lucht" src="https://www.spiralex.nl/wp-content/uploads/2020/12/lucht-1.png">
</p>
</div>
<div id="column">
<p id="afbeelding-skids">
<img width="150" id="skids" src="https://www.spiralex.nl/wp-content/uploads/2020/12/skids-correct.png">
</p>
</div>
</div>
<div id="text">
<div id="text-buis">
<button id="zwembadwarmtewisselaar">Zwembadwarmtewisselaar</button>
</div>
<script type="text/javascript">
var buis = document.getElementById("buis")
var spiraal = document.getElementById("spiraal")
var plaat = document.getElementById("plaat")
var lucht = document.getElementById("lucht")
var skids = document.getElementById("skids")
buis.onclick = function(){
if(spiraal.className ==""){
spiraal.className = "hide";
plaat.className = "hide";
lucht.className = "hide";
skids.className = "hide";
zwembadwarmtewisselaar.className = "show";
You need to make a reference to zwembadwarmtewisselaar also. var zwembadwarmtewisselaar = document.getElementById("zwembadwarmtewisselaar");
This question already has answers here:
Changing the order of elements
(4 answers)
Closed 8 years ago.
Help me to solve this trivial problem.
I need to change an image order within button_Click. How can I do this?
Actualy I need the **simplest** way, **no jQuery**.
Will be very grateful for piece of working code with explanation - It's a headache for me
[Here][1] is my code
PS I already got some advises, but all them conneted to jQuery
No jQuery
<div id="one">
<input id="b1" value="Change the image order" onclick="change_order()" type="button"/>
<h1 style="font-size: 12"> Header HeaderHeaderHeader</h1>
<p style="font-size:8"> text text text </p>
</div>
<div id="picContainer">
<img id="pict_01" src="http://heaversfarm.files.wordpress.com/2013/01/i-love-maths.jpg" />
<img id="pict_02" src="http://www.uplandsoutreach.org/wp-content/uploads/2013/04/20maths1.jpg" />
<img id="pict_03" src="http://www.milldamschool.ik.org/img/d666f5fc-db14-11de-a689-0014220c8f46-5812526.jpg" />
<img src="http://www.birdsontheblog.co.uk/wp-content/uploads/2010/05/maths.jpg" />
</div>
Hope you find the below code working as per your requirement.
<!DOCTYPE html>
<html>
<body>
<button onclick="myFunction()">Click me</button><br/>
<br/>
<img height="50" width="50" id="demo1" src="http://www.largeyellowbutton.com/largeyellowbutton.jpg"></img>
<br/>
<img height="50" width="50" id="demo2" src= "http://libn.com/wp-files/graphics/register-button_0.jpg"></img>
<br/>
<img height="50" width="50" id="demo3" src= "http://mygimptutorial.com/images/button-with-reflection/11.jpg"></img>
<script>
function myFunction() {
var temp=document.getElementById("demo1").src;
document.getElementById("demo1").src = document.getElementById("demo2").src;
document.getElementById("demo2").src = document.getElementById("demo3").src;
document.getElementById("demo3").src = temp;
}
</script>
</body>
</html>
Use the code which I have posted above in case you know the number of image inside your div. If your unsure about the number of images your going to add then use the below code.
<html>
<head>
<script>
function myFunction() {
var count=document.getElementById("picContainer").getElementsByTagName("img").length;
//below code captures the first image source before
//changing the image order. This is also used to assign as source to the
// last image tag.
var temp=document.getElementById("pict_01").src;
var i;
for(i=1;i<=count;i++)
{
//If value of i is equal to count then, assign the first image source
// captured in temp variable to the last image inside the div.
if(i==count){
document.getElementById("pict_0"+i).src=temp;
}
//below code assigns image in decreasing order.
document.getElementById("pict_0"+i).src = document.getElementById("pict_0"+(i+1)).src;
}
}
</script>
</head>
<body>
<input type="button" onclick="myFunction()" value=" Change an image order"></input>
<br/>
<div id="picContainer">
<img id="pict_01" src="http://heaversfarm.files.wordpress.com/2013/01/i-love-maths.jpg" />
<img id="pict_02" src="http://www.uplandsoutreach.org/wp-content/uploads/2013/04/20maths1.jpg" />
<img id="pict_03" src="http://www.milldamschool.ik.org/img/d666f5fc-db14-11de-a689-0014220c8f46-5812526.jpg" />
<img id="pict_04" src="http://www.birdsontheblog.co.uk/wp-content/uploads/2010/05/maths.jpg" />
</div>
</body>
</html>
<title></title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<script type="text/javascript">
function showImage(image) {
document.getElementById("image").style.visibilty = "visible";
document.getElementById("image").src = images / GreenLight.jpg;
}
function startTimer() {
var con = confirm("Press a button");
if (con == true) {
x = setTimeout(function () { showImage('image') }, 1);
}
else {
x = "You pressed Cancel!";
}
}
</script>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1> Page 1</h1>
</div>
<div id="menu">
<ul>
<li> Home </li>
<li class="here">Page 1</li>
<li>Page 2</li>
</ul>
</div>
<div id="content">
<form id="formpage1" method="post" action="default.htm"></form>
<button onclick="startTimer()">Click Here</button>
<div>
<img id="image" src=images/GreenLight.jpg style="visibility:hidden" />
</div>
</div>
<div id="footer">
</div>
</div>
</body>
</html>
I am trying to get an image to display 5 seconds after the "ok" button is clicked on the alert box. I am so confused as to what i am doing wrong.
You have to form a legal javascript string in this line to get the .src property assigned as you wanted. So change this:
document.getElementById("image").src = images / GreenLight.jpg;
to this:
document.getElementById("image").src = "images/GreenLight.jpg";
FYI, the error console would probably have been your friend here as this probably would have been a javascript error and would have given you the error and line number.
Your HTML should also use quotes:
<img id="image" src="images/GreenLight.jpg" style="visibility:hidden" />
And, if you want a 5 second delay, then you need to set the time to 5000 milliseconds:
setTimeout(function () { showImage('image') }, 5000);
Changed showImage functions as
function showImage(image) {
document.getElementById(image).style.visibilty = "visible";
document.getElementById(image).src = "images/GreenLight.jpg";
}
Your HTMLtag of img should be use quotes:
<img id="image" src="images/GreenLight.jpg" style="visibility:hidden" />
I'm having some trouble with my onClick event. No matter which image I click on it always opens the first image on the page. It just won't open any other image.
javascript:
function opennew() {
var largeImage = document.getElementById('largeImage');
largeImage.style.display = 'block';
largeImage.style.width=130+"px";
largeImage.style.height=130+"px";
var url=largeImage.getAttribute('src');
window.open(url,'Image','width=largeImage.stylewidth,
height=largeImage.style.height,resizable=1');
}
HTML:
<div class="oneitem">
<div><img id="largeImage" onClick="opennew();" src="Books-001.jpg" />
</div>
<p>Caption goes here</p>
</div>
are you using for every img the same ID attribute largeImage?
Id is an unique field and you are only allowed to use one ID Name within a Page.
Solution would be that you do someting like this:
Html:
<div class="oneitem">
<div>
<img id="1" onClick="opennew(1);" src="Books-001.jpg" />
</div><p>Caption goes here</p>
</div>
<div class="oneitem">
<div>
<img id="2" onClick="opennew(2);" src="Books-001.jpg" />
</div><p>Caption goes here</p>
</div>
Js:
function opennew(Id) {
var largeImage = document.getElementById(Id);
largeImage.style.display = 'block';
largeImage.style.width=130+"px";
largeImage.style.height=130+"px";
var url=largeImage.getAttribute('src');
window.open(url,'Image','width=largeImage.stylewidth,height=largeImage.style.height,resizable=1');
}
<div class="outerBox">
<img src="pics/folder1/img1.jpg" alt="small image" class="unmarkedImg">
<div class="innerBox">
<img src="pics/folder1/img1.jpg" alt="big image">
<input type="checkbox"><span>Image</span>
</div> <!-- innerBox -->
</div> <!-- outerBox -->
I've a problem with javascript to change
<img src="pics/folder1/img1.jpg" alt="small image" class="unmarkedImg">
class with the checkbox <input type="checkbox">.
When the checkbox is checked the img class will change from "unmarkedImg" to "markedImg", and when you checked-off the checkbox the change will reverse.
<div class="outerBox">
<img src="pics/folder1/img1.jpg" alt="small image" class="unmarkedImg">
<div class="innerBox">
<img src="pics/folder1/img1.jpg" alt="big image">
<input type="checkbox"><span>Image</span>
</div> <!-- innerBox -->
</div> <!-- outerBox -->
<div class="outerBox">
<img src="pics/folder1/img2.jpg" alt="small image" class="unmarkedImg">
<div class="innerBox">
<img src="pics/folder1/img2.jpg" alt="big image">
<input type="checkbox"><span>Image</span>
</div> <!-- innerBox -->
</div> <!-- outerBox -->
<div class="outerBox">
<img src="pics/folder1/img3.jpg" alt="small image" class="unmarkedImg">
<div class="innerBox">
<img src="pics/folder1/img3.jpg" alt="big image">
<input type="checkbox"><span>Image</span>
</div> <!-- innerBox -->
</div> <!-- outerBox -->
<div class="outerBox">
<img src="pics/folder1/img4.jpg" alt="small image" class="unmarkedImg">
<div class="innerBox">
<img src="pics/folder1/img4.jpg" alt="big image">
<input type="checkbox"><span>Image</span>
</div> <!-- innerBox -->
</div> <!-- outerBox -->
If I can bother with another question. How would I change the javascript you have given so more then one do the same thing. If you check one of the boxes the image of that checkbox become change from "unmarkedImg" to "markedImg", and reverse. Do I just give theme their own "id" (because ElementByClassName("class").onclick/onchange does not work) or is there any more easier or more dynamic way to do so?
jsFiddle here.
I've outlined a simple way to do it (I'm assuming you're just wanting pure JavaScript here) below with explanations:
HTML:
<img id="theImage" src="pics/flowers/f0.jpg" alt="Liten bild" class="unmarkedImg">
<input onclick="toggleImgClass()" id="example" type="checkbox">
Javascript:
function toggleImgClass(){
var example = document.getElementById('example');
// Set a variable for the checkbox element with the ID 'example'
if (example.checked){ // If the checkbox is checked
document.getElementById("theImage").className = "markedImg";
// Other classes are removed from the image and replaced with markedImg
}else{ // Else if the checkbox isn't checked
document.getElementById("theImage").className = "unmarkedImg";
// Other classes are removed from the image and replaced with unmarkedImg
}
}
Edit: In reply to your updated question, an alternative to #smerny's answer for an adaptable function could look like this.
Firstly, check this new jsFiddle.
HTML:
<div class="outerBox">
<img src="http://www.microugly.com/images/tutorials/inkscape-small-icon/icon-zoom-pixelated.png" alt="Liten bild" name="images" class="unmarkedImg"/>
<div class="innerBox">
<input type="checkbox" onclick="toggleImgClass()" class="example"/>
<span>Prästkrage</span>
</div>
</div>
Javascript:
function toggleImgClass() {
var example = document.getElementsByClassName('example');
// Set a variable for all checkbox elements with the class name 'example'
for(i=0; i<example.length; i++) { // For each element with the class name 'example'
if (example[i].checked){ // If this one is checked
document.getElementsByName("images")[i].className = "markedImg";
// Set its corresponding image to have the markedImg class.
}else{
document.getElementsByName("images")[i].className = "unmarkedImg";
// Set its corresponding image to have the unmarkedImg class.
}
}
}
Note that using inline JavaScript (such as <input onclick="toggleImgClass()">) isn't best practice, but in this case I'm simply trying to show you a simple example of how the basics of JavaScript work, so hopefully you can start to make improvements on it yourself.
Here is a way to write it without adding javascript to an element:
http://jsfiddle.net/Jb7yM/
document.getElementById("MyCheckbox").onclick=function() {
if(this.checked) {
document.getElementById("MyImage").className = "markedImg";
} else {
document.getElementById("MyImage").className = "unMarkedImg";
}
}
Edit: if you want to be able to do multiple images, you could do something like this:
http://jsfiddle.net/Jb7yM/2/
var checkboxes = document.getElementsByClassName("MyCheckbox");
for (var i = 0; i < checkboxes.length; i++) {
checkboxes[i].onclick = function () {
var imgNode = this.parentNode.firstChild;
while (imgNode.tagName != "DIV") { //change to IMG in your case
imgNode = imgNode.nextSibling
}
if (this.checked) {
imgNode.className = "markedImg";
} else {
imgNode.className = "unMarkedImg";
}
}
}
and wrap your image/checkbox groupings like this:
<div class="imgGroup">
<div class="unMarkedImg">img</div><!-- div for example, you'd have an image -->
<br />
<input type="checkbox" class="MyCheckbox" />
</div>
Edit2: i see you added your html to your question, this will work with your current html without having to put onclicks in your elements (generally a practice I always try to avoid), all you need to do is add "MyCheckbox" class to your checkboxes (or change the name of the class to something that suits you better):
http://jsfiddle.net/c8DPz/
var checkboxes = document.getElementsByClassName("MyCheckbox");
for (var i = 0; i < checkboxes.length; i++) {
checkboxes[i].onclick = function () {
var imgNode = this.parentNode.parentNode.firstChild;
while(imgNode.tagName != "IMG") {
imgNode = imgNode.nextSibling
}
if (this.checked) {
imgNode.className = "markedImg";
} else {
imgNode.className = "unMarkedImg";
}
}
}