We Keep Coding

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 replacing image source

I am trying to change the contents of the src tag within a web page (without changing the HTML/naming structure)
My code looks something like this at the moment:
....
<div class="main">
<button>
<img src="image/placeHolder.png"/>
<div>the nothing</div>
</button>
</div>
....
I need to change the src of this img tag
My javascript looks like this at the moment
....
<script type="text/javascript">
function changeSource() {
var image = document.querySelectorAll("img");
var source = image.getAttribute("src").replace("placeHolder.png", "01.png");
image.setAttribute("src", source);
}
changeSource();
</script>
....
I have no idea why it isn't working but I'm hoping someone out there does :D

Change your function to:
function changeSource() {
var image = document.querySelectorAll("img")[0];
var source = image.src = image.src.replace("placeholder.png","01.png");
}
changeSource();
querySelectorAll returns an array. I took the first one by doing [0].
But you should use document.getElementById('id of img here') to target a specific <img>
If you want to target all <img> that has placeholder.png.
function changeSourceAll() {
var images = document.getElementsByTagName('img');
for (var i = 0; i < images.length; i++) {
if (images[i].src.indexOf('placeholder.png') !== -1) {
images[i].src = images[i].src.replace("placeholder.png", "01.png");
}
}
}
changeSourceAll();

function changeSource() {
var img = document.getElementsByTagName('img')[0];
img.setAttribute('src', img.getAttribute('src').replace("placeHolder.png", "image.png"));
}

Change Image OnClick & OnMouseover

I am a complete nub with JS, but I fiddle with it occasionally when necessary. I am writing a function that changes two images on a page (before & after gallery images) when a sliding image is click / selected from a marquee below them. I have that working. The problem is that I also need to change the AFTER image when the BEFORE image is moused over, and I dont seem to be able to pass that variable to the function correctly - here is what I have:
<script>
function changeImage(imgName)
{
var img = imgName;
img += 'a.jpg';
var img1 = imgName;
img1 += 'b.jpg';
image = document.getElementById('imgDisp');
image.src = img;
image = document.getElementById('imgDisp1');
image.src = img1;
}
function swap1(image)
{
var img = 'newgallery/';
img += image;
img += 'b.jpg';
image = document.getElementById('imgDisp');
image.src = img;
}
function swap2(image)
{
var img = 'newgallery/';
img += image;
img += 'a.jpg';
image = document.getElementById('imgDisp');
image.src = img;
}
</script>
<table border=0 width=85%>
<tr>
<td align=center valign=top>
<img id="imgDisp1" src=newgallery/1b.jpg height=80
onmouseover="swap1(img)"
onmouseout="swap2(img)"
>
<p class=content>BEFORE</b></p></td>
<td width=35></td>
<td align=center><img id="imgDisp" src=newgallery/1a.jpg width=550></td>
</tr>
</table>
<marquee behavior="scroll" direction="left" scrollamount="3" onMouseOver="this.stop();" onMouseOut="this.start();">
<?php
$imagenum = '1';
$imageset = 'a.jpg';
$imagesetalt = 'b.jpg';
while($imagenum < 37){
$imagename = "$imagenum$imageset";
$imagethumb = "$imagenum$imagesetalt";
if($imagenum == '13'){
}else{
echo"
<img src=\"newgallery/$imagename\" height=\"120\" border=0 onclick=\"changeImage('newgallery/$imagenum')\">
<img src=images/spacer.gif width=25 height=1>";
}
$imagenum++;
}
?>
I can change the images on click in the marquee calling the changeImage function because I can pass the assigned image name variable to the function. I cannot seem to figure out how to pass the BEFORE thumbnail image name variable to the mouseover functions (swap1) & (swap2) respectively. This may just be a simple syntax solution - but again I dont know JS well enough to figure it out - any assistance would be appreciated.

Honestly, your code is a little overcomplicated. You can simplify this by taking advantage of the data attribute of HTML elements.
Lets say you have a container defined as
<div id = 'img_container' class = 'some_class'>
<img id = 'image' class = 'some_image_class' src = '/path/to/default/image.jpg'
data-alt = '/path/to/hover/image.jpg' />
</div>
You can define a function to retrieve the path stored in the data attribute and swap the data and source values via
function swap(image){
//temporary variable to hold the alternate image path
var newImage = image.data("alt");
//store the image src attribute in the `data-alt` attribute
image.data("alt", image.attr("src");
//replace the image src attribute with the new image path
image.attr("src", newImage);
}
Now, you can apply events to the image via
$("#image").on("mouseover", function(e){
swap($(e.currentTarget));
})
.on("mouseout", function(e){
swap($(e.currentTarget));
});
This will allow you to replace the onmouseover and onmouseout events in your HTML.

How can i return img.src by clicking on an image with javascript?

I am trying to create a function with javascript where a user upon clicking on an image can retrieve that images src as a URL. I am very new to javascript and my attempts so far at creating a function activated by "onclick" of an image are:
var showsrc = function(imageurl)
var img = new Image();
img.src = imageurl
return img.src
to call the results i have been trying to insert the image.src into my html using
document.getElementById("x").innerHTML=imageurl;
Im having very little success. Any help would be greatly appreciated. Thank you.

I tested this in IE9 and Chrome 17. Add an onclick handler to the body (or nearest container for all your images) and then monitor if the clicked element is an image. If so show the url.
http://jsfiddle.net/JbHdP/
var body = document.getElementsByTagName('body')[0];
body.onclick = function(e) {
if (e.srcElement.tagName == 'IMG') alert(e.srcElement.src);
};​

I think you want something like this: http://jsfiddle.net/dLAkL/
See code here:
HTML:
<div id="urldiv">KEINE URL</div>
<div>
<img src="http://www.scstattegg.at/images/netz-auge.jpg" onclick="picurl(this);">
<img src="http://www.pictokon.net/bilder/2007-06-g/sonnenhut-bestimmung-pflege-bilder.jpg.jpg" onclick="picurl(this);">
</div>​
JAVASCRIPT
picurl = function(imgtag) {
document.getElementById("urldiv").innerHTML = imgtag.getAttribute("src");
}​

Image tags do not have an 'innerHTML', since they're singleton tags - they cannot have any children. If your x id is the image tag itself, then:
alert(document.getElementById('x').src);
would spit out the src of the image.

Here's a naïve solution with just javascript (probably not cross-browser compatible):
<!doctype html>
<html>
<head>
<script>
function init() {
var images = document.getElementsByTagName('img');
for(var i = 0, len = images.length; i < len; i++) {
images[i].addEventListener('click', showImageSrc);
}
}
function showImageSrc(e) {
alert(e.target.src);
}
</script>
</head>
<body onload="init()">
<img src="http://placekitten.com/300/300">
</body>
</html>

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