We Keep Coding

How to efficiently create 100's of toggle image buttons?

I was looking for a way to change image A to B and B to A by just
clicking them.
So far, this is what I'm using.
<img id="pixelbutton" src="images/pixelbutton.png" />
<img id="pixelbutton2" src="images/pixelbutton_press.png" style="display: none;" />
<script type="text/javascript">
$(document).ready(function(){
$("#pixelbutton").click(function(){
$("#pixelbutton").css({'display':'none'})
$("#pixelbutton2").css({'display':'block'});
})
$("#pixelbutton2").click(function(){
$("#pixelbutton2").css({'display':'none'})
$("#pixelbutton").css({'display':'block'});
})
})
</script>
The script works well for a pair of image.
Now if I have 100 pair of image.
"A <--> B"
"C <--> D"
"E <--> F"
and so on...
Do I have to copy the body HTML and script 100 times and change their ID+URL or there is another more efficient way?

To create hundreds of them... First, use a class.
Then, use a data attribute to store the "alternate" URL.
<img class="pixelbutton" src="images/pixelbutton.png" data-altsrc="images/pixelbutton_press.png"/>
<script type="text/javascript">
$(document).ready(function(){
$(".pixelbutton").click(function(){
// Get the two values
var src = $(this).attr("src");
var altSrc = $(this).data("altsrc");
// Switch them
$(this).attr("src",altSrc).data("altsrc",src);
});
})
</script>
This will work for thousands of .pixelbutton...
;)
EDIT
As per this other .data() documentation, (I wonder why there's two different documentation pages...) the data-* have to be lowercase... Because when trying to get altSrc, it is interpreted as alt-src.
I just learned that... That is quite a strange new standard, from jQuery 3.
So here is your CodePen updated.

You could probably set a naming pattern and use delegation to make an event handler on the images' container.
You could check if the event's target is an image and retrieve its id. Using that id, you could use the pattern you've set to change the images interchangeably.

There are multiple solutions to this, but this is by far the simplest approach:
Wrap your image pairs in a parent <div>
Use .toggleClass() to toggle a class, say .hide, in the images in the element
This solution assumes that you have images in pairs :) see proof-of-concept example:
$(document).ready(function() {
$('img').click(function() {
console.log($(this).siblings());
$(this).add($(this).siblings()).toggleClass('hide');
});
});
/* For layout only */
div {
display: inline-block;
}
/* Used to hide image */
.hide {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<img src="http://via.placeholder.com/100x100/999999/ffffff" />
<img src="http://via.placeholder.com/100x100/b13131/ffffff" class="hide" />
</div>
<div>
<img src="http://via.placeholder.com/100x100/999999/ffffff" />
<img src="http://via.placeholder.com/100x100/b13131/ffffff" class="hide" />
</div>
<div>
<img src="http://via.placeholder.com/100x100/999999/ffffff" />
<img src="http://via.placeholder.com/100x100/b13131/ffffff" class="hide" />
</div>
<div>
<img src="http://via.placeholder.com/100x100/999999/ffffff" />
<img src="http://via.placeholder.com/100x100/b13131/ffffff" class="hide" />
</div>
<div>
<img src="http://via.placeholder.com/100x100/999999/ffffff" />
<img src="http://via.placeholder.com/100x100/b13131/ffffff" class="hide" />
</div>
<div>
<img src="http://via.placeholder.com/100x100/999999/ffffff" />
<img src="http://via.placeholder.com/100x100/b13131/ffffff" class="hide" />
</div>

Try this one:
jQuery(document).ready(function($) {
var $imgBlock = $('#images');
var html = '';
var imgArr = [
'http://i0.wallpaperscraft.com/image/surface_shape_metal_116716_200x300.jpg',
'http://i0.wallpaperscraft.com/image/universe_space_face_rocket_116714_200x300.jpg',
'http://i0.wallpaperscraft.com/image/letter_surface_wooden_116674_200x300.jpg',
'http://i0.wallpaperscraft.com/image/mountains_lake_reflection_116663_200x300.jpg',
'http://i1.wallpaperscraft.com/image/leaf_drops_surface_116678_200x300.jpg',
'http://i1.wallpaperscraft.com/image/candle_spruce_christmas_decoration_116684_200x300.jpg'
];
$.each(imgArr, function(index, url) {
html += (index % 2 === 0) ? '<div>' : '';
html += '<img src="' + url + '"/>';
html += (index % 2 === 1 || index === imgArr.length - 1) ? '</div>' : '';
});
$imgBlock.append(html);
$imgBlock.on('click', 'img', function(e) {
$(this).parent('div').find('img').removeClass('red');
$(this).addClass('red');
});
});
img {
border: 2px solid #ccc;
}
.red {
border: 2px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="images"></div>

JS can't delete all images from page

I'm trying to delete all images from page. The page is in HTML. This is my HTML button:
<input id="clickMe" type="button" value="Delete Images" onclick="click();" />
And the function is:
<script type="text/javascript">
function click(){
var images = document.getElementsByTagName('img');
for (var i = 0; i < images.length; i++) {
images[i].Node.removeChild(images[0]);
}
}
</script>
All elements are tagged "img"

Removing a child can only be done from the parent:
function removeImages() {
var images = [].slice.call(document.getElementsByTagName('img'), 0); // get the images as array like object, and turn it into an array using slice
images.forEach(function(img) { // iterate the images array
img.parentNode.removeChild(img); // remove the child node via the parent node
});
}
<button type="button" onclick="removeImages()">Remove Images</button>
<div>
<img src="http://static.wixstatic.com/media/60d837_94f714500a3145a1b98efd7a6fe78ce7~mv2_d_3456_3456_s_4_2.jpg_256" />
<img src="https://static-s.aa-cdn.net/img/ios/442131982/82d94c67fc3d8eb87e07d9bb568c5d4d?v=1" />
<img src="https://pbs.twimg.com/profile_images/625769159339737088/2dwpQAXA.jpg" />
</div>
You can also use img.remove() instead of the cumbersome img.parentNode.removeChild(img), but it won't work in IE - see ChildNode.remove() on MDN.

You cannot have click as the function name because click is a reserved js method.
For deleting you just need to use delete() on that node.
<script type="text/javascript">
function c(){
var images = document.getElementsByTagName('img');
for (var i = images.length - 1; i >= 0; i--) {
images[0].parentNode.removeChild(images[0]);
}
}
</script>
<img src="http://unsplash.it/200/300/"/>
<img src="http://unsplash.it/200/300/"/>
<img src="http://unsplash.it/200/300/"/>
<img src="http://unsplash.it/200/300/"/>
<img src="http://unsplash.it/200/300/"/>
<input id="clickMe" type="button" value="Delete Images" onclick="c()"/>

Few inputs:
click function will never get fired as it is reserved and take precedence over the click() handler attached to onclick event. Change the handler name to something meaningful.
Use querySelectorAll to find the img elements. It returns a non-live NodeList of all elements descended from the element on which it is invoked that match the specified group of CSS selectors.
the code images[i].Node.removeChild(images[0]); is not correct as we should remove the element from the parentNode; Indexing was not correct (images[0])
function deleteImages() {
// query non-live NodeList of all `img` elements
var images = document.querySelectorAll('img');
// Loop through each `image` object.
Object.values(images).forEach(function(element, index, array) {
element.parentNode.removeChild(element);
});
}
img {
width: 200px;
height: 200px;
margin: 5px;
}
<div>
<div>My List of ducks</div>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/dd/Tufted_duck_%28aythya_fuligula%29.JPG/120px-Tufted_duck_%28aythya_fuligula%29.JPG" />
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d6/Tufted_Duck_pangolakha_Wildlife_Sanctuary_East_Sikkim_India_27.03.2016.jpg/120px-Tufted_Duck_pangolakha_Wildlife_Sanctuary_East_Sikkim_India_27.03.2016.jpg" />
</div>
<div>
<div>My List of Flowers</div>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a4/Lillium_Stamens.jpg/300px-Lillium_Stamens.jpg" />
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5d/Crateva_religiosa.jpg/220px-Crateva_religiosa.jpg" />
</div>
<input id="clickMe" type="button" value="Delete Images" onclick="deleteImages();" />

Load images one after another in a sequence.

I would like to use JQuery to load 2 images after the page has loaded. I would like to request and load one image at a time. I tried this, but the requests and loads are happening simultaneously. First image should be come from 'src' and second from'data-src' html attributes.
<img id="image4" src="image/large.jpg" width="100%" data-src="image/full-size.jpg" />
Can anybody help me on this?

Maybe this work for you
$(document).ready(function(){
$('img[data-src]').each(function( key, value ){
var _this = $(this);
var bigImage = _this.attr('data-src');
_this.after('<img class="preLoadingImage'+key+' hide" src="' + bigImage + '" />');
$('.preLoadingImage'+key).one('load',function(){
_this.addClass('hide');
$(this).removeClass('hide');
});
});
});
.hide{ display:none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="image4" src="https://upload.wikimedia.org/wikipedia/commons/b/b1/Loading_icon.gif"
width="100%" data-src="http://www.planwallpaper.com/static/images/ZhGEqAP.jpg" />

Without seeing your JS, I believe this is what you want:
var img = $("#image4");
var image1Url = img.attr("src");
var image2Url = img.attr("data-src");
$.get(image1Url)
.done(function () {
$.get(image2Url);
});

I'm not sure you want this but take a look
JS:
setTimeout(function(){
$("#image4").after("<img src='" + $("#image4").attr("data-src") + "' width='100%' />");
},2000);
HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img id="image4" src="image/large.jpg" width="100%" data-src="image/full-size.jpg" />

click on image and change a text

U have 2 images on a page and a textbox (php)
When u click on the image i want to change the text.
I am a starter, please sent a code that isn't to hard to understand.
<body>
<img src="bier1.jpg" alt="u mad" onclick= "">
<img src="bier2.jpg" alt="u mad" onclick= ""><br>
<form>
<input type="text" name="Example"/>
</form>
</body>

Are I'm right that you want to change the text of the Textbox? If yes here's the code:
<body>
<img src="bier1.jpg" alt="u mad" onclick= "document.forms[0].elements['Example'].value = 'Image 1'">
<img src="bier2.jpg" alt="u mad" onclick= "document.forms[0].elements['Example'].value = 'Image 2'"><br>
<form>
<input type="text" name="Example"/>
</form>
</body>

You'll need to use Javascript, I prefer to give javascript code using jQuery, so please do a quick Google search on jQuery.
<script type="text/javascript">
$(function(){
//You need to bind click events to your images and probably
$("img.has-message").click(function(){
var msg = $(this).attr("data-msg");
//get the message from that particular image
$("#text_box_id").attr("value",msg);
//changes the value of the text box to display the message
return false;
});
});
</script>
So you place this code in the <head></head> tag of your page
This code will work perfectly assuming you could change your HTML to look like so:
<body>
<img src="bier1.jpg" alt="u mad" class="has-message" data-msg="message to be displayed when the image is clicked">
<img src="bier2.jpg" alt="u mad" class="has-message" data-msg="message to be displayed when the image is clicked"><br>
<form>
<input type="text" id="text_box_id" name="Example"/>
</form>
</body>
Please remember that jQuery needs to have been included on your page for the above to work.

You need to first add id to the text field:
<input type="text" name="Example" id="myTextBox" />
Then you can do such thing:
<img src="bier1.jpg" alt="u mad" onclick="document.getElementById('myTextBox').value = this.alt;" />
<img src="bier2.jpg" alt="u mad" onclick="document.getElementById('myTextBox').value = this.alt;" />
This is not very elegant though, you have it applied to all images without having to change the markup, have such JavaScript:
window.onload = function() {
var oTextbox = document.getElementById('myTextBox');
for (var i = 0; i < document.images.length; i++) {
document.images[i].onclick = function() {
oTextbox.value = this.alt;
};
}
};
Live test case of above code.
You can also have the above code work only for certain images by applying a class to those images you want "clickable", for example:
<img src="bier1.jpg" alt="u mad" />
<img class="clickable" src="bier2.jpg" alt="u mad 2" />
To have only the second cause the textbox to change, have such code:
window.onload = function() {
var oTextbox = document.getElementById('myTextBox');
for (var i = 0; i < document.images.length; i++) {
var image = document.images[i];
if (image.className === "clickable" || image.className.indexOf("clickable ") >= 0 || image.className.indexOf(" clickable") >= 0) {
image.onclick = function() {
oTextbox.value = this.alt;
};
}
}
};​
Updated fiddle to demonstrate.

I am guessing they mean the page is served as a php page. I would do this purely in javascript. In pseudo code I would do the following.
Create function in javascript
Function looks up input using name
Function sets the text of the input to whatever you like (this could be based on which image was clicked
Id deffinately suggest looking at w3schools website which will give you lots of simple examples to get you started.
Also start basic and work your way up, if you cant get it all working at once, do it bit by bit, get your onclick to alert when you click it, then try setting the text once you knwo your onclicks are working.

JQuery Check for Class in ID ..if exists change img src content

I have the code:
<img id="myid" class="myclass" src="image1.png" />
What I need to do is:
if myid contains a class="myclass" then change src="image1.png" to src="image2.png"
How can I do that with JQuery?

if ($('#myid').hasClass('myclass')){
$('#myid').attr('src','image2.png');
}

var e = $("#myid");
var ans = e.hasClass("myclass");
if(ans){
e.attr("src","image2.png");
}
$("#debug").text(ans+", src"+ e.attr("src"));
working example http://jsbin.com/evipuz/edit#javascript,html,live