Develop Reference

Image Swap on MouseOut (JavaScript, not JQ)

I am trying to create functions to mouseover and mouseout of images. The tricky part is this function needs to work for any image, and I cannot use direct image names. I have to therefore use variables.
The HTML code is as follows for the images:
The HTML for the images is like this, and there are 3 images:
<img src="images/h1.jpg" alt="" id="images/h4.jpg" onmouseover="swapToNewImage(this)" onmouseout="swapImageBack(this)">
I'm expecting that you have to reference the id for the new image, and then the src attribute for the previous image to revert when you mouseout.
The problem is that, if I reference the id attribute, the image no longer has information on the src attribute so I cannot call it to revert back.
Here is the JavaScript I have thus far. It works to swap the image to a new one, but not to swap it back :(
//FUNCTION
var $ = function (id) {
return document.getElementById(id);
}
//ONLOAD EVENT HANDLER
window.onload = function () {
//GET ALL IMG TAGS
var ulTree = $("image_rollovers");
var imgElements = ulTree.getElementsByTagName("img");
//PROCESS EACH IMAGE
//1. GET IMG TAG
for (var i = 0; i < imgElements.length; i++) {
console.log (imgElements[i]);
console.log (imgElements[i].getAttribute("src"));
//2. PRELOAD IMAGE FROM IMG TAG
var image = new Image();
image.setAttribute("src", imgElements[i].getAttribute("src"));
//3. Mouseover and Mouseout Functions Called
image.addEventListener("mouseover", swapToNewImage);
image.addEventListener("mouseout", swapImageBack);
}
}
//MOUSE EVENT FUNCTIONS
var swapToNewImage = function(img) {
var secondImage = img.getAttribute("id", "src");
img.src = secondImage;
}
var swapImageBack = function(img) {
var previousImage = img.getAttribute("src");
img.src = previousImage;
}
Let me know if you can help me figure out how to call the image's src attribute so it can be reverted back. Again, I cannot reference specific image names, because that would be a lot easier (: Thank you!

Well, You can use a data attribute to store your src, and a data attribute to store the image you want to swap when mouseover.
Please try the following example.
var swapToNewImage = function(img) {
var secondImage = img.dataset.swapSrc
img.src = secondImage;
}
var swapImageBack = function(img) {
var previousImage = img.dataset.src
img.src = previousImage;
}
<img src="https://images.pexels.com/photos/259803/pexels-photo-259803.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="" data-src="https://images.pexels.com/photos/259803/pexels-photo-259803.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" data-swap-src="https://images.pexels.com/photos/416160/pexels-photo-416160.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" onmouseover="swapToNewImage(this)" onmouseout="swapImageBack(this)">
I also notice that the image tag is generated by code, in order to set the dataset values, we can do this:
var image = new Image();
image.scr = [src]
image.dataset.src = [src]
image.dataset.swapSrc = [swap src]

Add link to image via javascript

Can someone help me add a link to an image that I am adding via Javascript? I know this should be something simple but I can't get it to work.
jsfiddle
<div class="toggle-panel">
Hi there!
</div>
var img = new Image();
var div = document.querySelector('.toggle-panel');
var link = document.createElement('a');
link.setAttribute('href', 'www.google.com');
img.onload = function() {
div.appendChild(img);
};
img.src = 'http://findicons.com/files/icons/2603/weezle/256/weezle_sun.png';
link.appendChild(img);

You still need to add the link to the div, like this:
var img = new Image();
var div = document.querySelector('.toggle-panel');
var link = document.createElement('a');
link.setAttribute('href', 'www.google.com');
img.src = 'http://findicons.com/files/icons/2603/weezle/256/weezle_sun.png';
link.appendChild(img);
div.appendChild(link);
No need to do it on the image's onload event.
Fiddle.

I get an error on trying to get the img.src from my Html textfield

The following is my function that is called on click of a button.
The goal is to get the text value entered by the user and use it as an image source and finally display the image on the html body.
function ButtonClick() {
var link = document.createElement("a");
// create an image element.
var MyImg = document.createElement("img");
var MyImg.src = document.getElementById("textfield").value;
// append it to a list of elements.
link.appendChild(MyImg);
// append the newly added image to the html page body.
document.body.appendChild(link);
// clear textfield for next image src.
document.getElementById("textfield").value = "";
}
The error I receive is on line#7: "var MyImg.src = document.getElementById("textfield").value;"
SyntaxError: missing ; before statement example.js:19
*edited code after the fist suggestion.

MyImg.src = document.getElementById("textfield").value;

you should define variable once,
change
var MyImg = document.createElement("img");
var MyImg.src = document.getElementById("textfield").value;
to
var MyImg = document.createElement("img");
MyImg.src = document.getElementById("textfield").value;

To display image using JavaScript

In the code below I have an image in C Directory and I want to display the image on window load using JavaScript. I tried but image is not displaying.
<div id="thmbDiv"></div>
Script:
window.onload=function() {
var thumbContainer = document.getElementById("thmbDiv");
var thumbnail = document.createElement("img");
thumbnail.onload=function() {
thumbContainer.appendChild(thumbnail);
}
thumbnail.src = "C:\Hello\Search\Image0529.jpg";
}

Try
<div id="thmbDiv"><img id="imageTag" src=""></div>
window.onload=function() {
var thumbnail = document.getElementById("imageTag");
thumbnail.src="C:\Hello\Search\Image0529.jpg";
}

image upload with php and javascript?

so so new at this and are trying to get a schooljob done, but I have got stuck..
This code is going to work like this. a user is going to be able to upload images, it will be stored in a database, a thumbnail is to be shown on the site and will be enlarged onclick.
my question. I get the picture to show on the page, but how do I make it as thumbnail? JQuery? Fancybox? I havn´t gotten the hang of how to implement it.
Please help!
Current code is:
<script type='text/javascript'>
function main()
{
var inputFileToLoad = document.createElement("input");
inputFileToLoad.type = "file";
inputFileToLoad.id = "inputFileToLoad";
document.body.appendChild(inputFileToLoad);
var buttonLoadFile = document.createElement("button");
buttonLoadFile.onclick = loadImageFileAsURL;
buttonLoadFile.textContent = "Load Selected File";
document.body.appendChild(buttonLoadFile);
}
function loadImageFileAsURL()
{
var filesSelected = document.getElementById("inputFileToLoad").files;
if (filesSelected.length > 0)
{
var fileToLoad = filesSelected[0];
if (fileToLoad.type.match("image.*"))
{
var fileReader = new FileReader();
fileReader.onload = function(fileLoadedEvent)
{
var imageLoaded = document.createElement("img");
imageLoaded.src = fileLoadedEvent.target.result;
document.body.appendChild(imageLoaded);
};
fileReader.readAsDataURL(fileToLoad);
}
}
}
main();
</script>
</body>
</html>

If you only have a copy of the image (the original), then you can adjust the image size with CSS Dimension Properties. This question shows how to create a thumbnail gallery.

No php, no fancybox, but this works:
insert the following into the body:
<div id="div1">
<img id="img1" height="100px" width="100px" />
</div>
replace the following 4 lines:
// var imageLoaded = document.createElement("img");
// imageLoaded.src = fileLoadedEvent.target.result;
// document.body.appendChild(imageLoaded);
// };
with the following 2 lines:
document.getElementById("img1").src = fileLoadedEvent.target.result;
}