I have to change the src of an image using java script and I am pretty sure i hit a road block, in the html I have 3 li elements and in the id is the source of the mouseenter img. I feel like I am close but so far. Heres my code so far. Thanks for any help!
Javascript:
var $ = function (id) {
return document.getElementById(id);};
window.onload = function () {
var links = document.getElementsByTagName("li"),
imgElements = document.getElementsByTagName("img"),
imgNode,
i,
URLone,
URLtwo,
link,
image;
for (i = 0; i < imgElements.length; i++) {
imgNode = imgElements[i];
}
imgNode.mouseenter = function () {
var img = this;
URLtwo = img.getAttribute('id');
img.src = URLtwo;
}
imgNode.mouseout = function () {
var img = this;
URLone = img.getAttribute('src');
img.src = URLone;
};
//preload
for (i = 0; i < links.length * 2; i++) {
link = links[i];
image = new Image();
image.src = link.src;
image = new Image();
image.src = link.id;
}};
HTML ::
<body>
<section>
<h1>Ram Tap Combined Test</h1>
<ul id="image_rollovers">
<li><img src="images/h1.jpg" alt="" id="images/h4.jpg"></li>
<li><img src="images/h2.jpg" alt="" id="images/h5.jpg"></li>
<li><img src="images/h3.jpg" alt="" id="images/h6.jpg"></li>
</ul>
</section>
Working jQuery :
$(document).ready(function() {
$("#image_rollovers img").each(function() {
var oldURL = $(this).attr("src"); // gets the src attribute
var newURL = $(this).attr("id"); // gets the id attribute
// preload images
var rolloverImage = new Image();
rolloverImage.src = newURL;
$(this).hover(
function() {
$(this).attr("src", newURL); // sets the src attribute
},
function() {
$(this).attr("src", oldURL); // sets the src attribute
}
); // end hover
}); // end each
}); // end ready
for (i = 0; i < imgElements.length; i++) {
(function(imgNode) {
imgNode.addEventListener("mouseenter", function () {
var img = this;
URLtwo = img.getAttribute('id');
img.src = URLtwo;
}, false);
imgNode.addEventListener("mouseout", function () {
var img = this;
URLone = img.getAttribute('src');
img.src = URLone;
}, false);
})(imgElements[i]);
}
A couple of problems in your code.
First for loop closing right away, instead should close after your
imgNode.mouseout function
for (i = 0; i < imgElements.length; i++) {
imgNode = imgElements[i];
imgNode.mouseenter = function () {
var img = this;
URLtwo = img.getAttribute('id');
img.src = URLtwo;
}
imgNode.mouseout = function () {
var img = this;
URLone = img.getAttribute('src');
img.src = URLone;
};
}
//preload
for (i = 0; i < links.length * 2; i++) {
link = links[i];
image = new Image();
image.src = link.src;
image = new Image();
image.src = link.id;
}};
Last for loop runs 6 times but there are only 3 tags in html. When it coming to loop no. 3 it doesn't get any value for link.src.
Also links variable provides a collection of 'li' tags and not 'img', last for loop requires src from link.src which doesn't have any value, need to change
var links = document.getElementsByTagName("li"),
to
var links = document.getElementsByTagName("img"),
Try that. Hopefully after correcting above errors your code should work.
Related
I have two arrays.One of videos and one of images. I need to play only one video at a time when image is clicked. Like if clicked on img[1] then it should play video[1] and if img[2] then video[2].
I need to do something like this : IMAGE
I have gone through few examples but didn't find any similar answer using only javascript. Now when i click on image it opens anchor tag link which i have added for testing but not able to play videos.
var videosList = [
"http://media.w3.org/2010/05/sintel/trailer.mp4",
"http://media.w3.org/2010/05/bunny/trailer.mp4",
"http://vjs.zencdn.net/v/oceans.mp4"
];
var allVideos = videosList.length;
var i = 0;
for (; i < allVideos; i++) {
var vid = document.createElement('source');
vid.src = videosList[i];
document.getElementById('myVideo').appendChild(vid);
}
var images = [
'https://picsum.photos/200/300',
'https://picsum.photos/id/237/200/300',
'https://picsum.photos/200/300?grayscale',
'https://picsum.photos/id/237/200/300',
'https://picsum.photos/200/300'
];
var allPics = images.length;
var i = 0;
for (; i < allPics; i++) {
var a = document.createElement('a');
a.href = 'example.html';
var img = document.createElement('img');
img.src = images[i];
a.appendChild(img);
document.getElementById('myImg').appendChild(a);
}
Here is running code as example:codepen
// JavaScript can be change in the following way
// Assuming that the video to be played is the same as index of the image clicked
// make it as global to access in all functions
var videosList = [
"http://media.w3.org/2010/05/sintel/trailer.mp4",
"http://media.w3.org/2010/05/bunny/trailer.mp4",
"http://media.w3.org/2010/05/bunny/movie.mp4",
"http://vjs.zencdn.net/v/oceans.mp4"
];
window.onload = function() {
// for videos
var vid = document.createElement('source');
vid.src = videosList[0]; // playing first video in the array by default
document.getElementById('myVideo').appendChild(vid);
// for images
var images = [
'https://picsum.photos/200/300',
'https://picsum.photos/id/237/200/300',
'https://picsum.photos/200/300?grayscale',
'https://picsum.photos/id/237/200/300',
'https://picsum.photos/200/300'
];
var allPics = images.length;
var i = 0;
for (; i < allPics; i++) {
var a = document.createElement('a');
// a.href = 'example.html';
var img = document.createElement('img');
img.src = images[i];
img.id = i; // for the reference of clicked image
a.appendChild(img);
a.addEventListener("click", clickFn, false);
document.getElementById('myImg').appendChild(a);
}
}
/**click function for the image of the image */
clickFn = function(e){
var video = document.getElementById('myVideo');
video.src = videosList[parseInt(e.srcElement.id,10)];
video.play();
}
Hope it helps ..!!
modified code in codepen
i would like to create a function (javascript) where some images are displayed on the screen and the user can chose one of them by simply clicking over it. Once chosen, the src of the picture will be stored in a var. So far i made an images array, but i dont know if it's the right way to proceed, do any of you have some tips? Thanks all!
<script typre="text/javascript">
var img = new Array();
img[0] = new Image();
img[0].src = "../images/poggiatesta2.jpg";
img[1] = new Image();
img[1].src = "../images/poggiatesta1.JPG";
for (var i = 0; i < img.length; i++) {
document.body.appendChild(img[i]);
};
</script>
Try this :
var img = new Array();
img[0] = new Image();
img[0].src = "http://dummyimage.com/200/000/fff&text=Img0";
img[1] = new Image();
img[1].src = "http://dummyimage.com/200/000/fff&text=Img1";
img[2] = new Image();
img[2].src = "http://dummyimage.com/200/000/fff&text=Img2";
for (var i = 0; i < img.length; i++) {
var imagetag = document.createElement("img");
var onclick = document.createAttribute("onclick");
onclick.value = "myfun("+i+")";
var sorc = document.createAttribute("src");
sorc.value = img[i].src;
var id = document.createAttribute("id");
id.value = "my_image"+i;
imagetag.setAttributeNode(onclick);
imagetag.setAttributeNode(sorc);
imagetag.setAttributeNode(id);
document.body.appendChild(imagetag);
};
function myfun(i) {
var src = document.getElementById('my_image'+i).src;
//you can do anything with 'src' here
document.getElementById('demo').innerHTML = src; //for demo purpose
}
<p id="demo"></p>
<img id="opeth"> </img>
<script type="text/javascript">
var gearpics = [];
document.getElementById("opeth").innerHTML = gearpics;
var prs = new Image();
prs.onload = function() {
};
prs.src = src
var prs2 = new Image();
prs2.onload= function() {
};
prs2.src = src
var prs3 = new Image();
prs3.onload= function() {
};
prs3.src = src
function insert() {
gearpics.push(document.getElementById('opeth').src = prs.src);
gearpics.push(document.getElementById('opeth').src = prs2.src);
gearpics.push(document.getElementById('opeth').src = prs3.src);
}
</script>
This is my code. When I run it, and press the "Show pictures" button, only the third picture (id=prs3) appears. I want all of them to show up.
You are using the same ID for your 3 pictures:
gearpics.push(document.getElementById('opeth').src = ...);
ID should be unique in HTML document.
I have a table with a background image that, when clicked, displays other images for the user to choose from. This is working and appears or hides on click events. However, when the user clicks to add a second image the menu of images appears again (as it should) but twice. I have commented out a solution I tried. I thought on first click I could display my_div and then delete it in allImages.onclick. This is throwing up a null error in Chrome, probably understandably. The problem here is similar. Hope I added link correctly. Anyway, advice or help appreciated.
function addImage(col) {
var img = new Image();
img.src = "../www/images/TEST.png";
col.appendChild(img);
img.onclick = function () {
var myImages = new Array();
myImages[0] = "../www/images/TEST3.png";
myImages[1] = "../www/images/TEST2.png";
myImages[2] = "../www/images/TEST4.png";
for (var i = 0; i < myImages.length; i++) {
var allImages = new Image();
allImages.src = myImages[i];
var newList = document.createElement("ul");
newList.appendChild(allImages);
my_div = document.getElementById("showPics");
my_div.appendChild(newList);
my_div.style.display = 'block';
allImages.onclick = function (e) {
img.src = e.target.src;
my_div.style.display = 'none';
//var element = document.getElementById("showPics");
//element.parentNode.removeChild(element);
};
}
};
};
for (r = 0; r < howOften; r++) {
row = table.insertRow(-1);
for (c = 0; c < numDays; c++) {
col = row.insertCell(-1);
addImage(col);
}
}
document.getElementById('holdTable').appendChild(table);
I modified your code adding ul to hold all img. It works, but could be better.
function addImage(col) {
var img = new Image();
img.src = "../www/images/TEST.png";
col.appendChild(img);
var myImages = new Array();
myImages[0] = "../www/images/TEST1.png";
myImages[1] = "../www/images/TEST2.png";
myImages[2] = "../www/images/TEST3.png";
var container = document.createElement("ul"); //ul to simplify hide/show
container.style.display = "none";
for (var i = 0; i < myImages.length; i++) {
var newList = document.createElement("li");
var im = document.createElement("img");
im.src = myImages[i];
newList.appendChild(im);
im.onclick = function () {
img.src = this.src;
};
container.appendChild(newList);
}
col.appendChild(container);
col.onclick = function () {
if (container.style.display == "none")
container.style.display = "block";
else
container.style.display = "none";
};
}
I'm trying to preload images with javascript:
$(document).ready(function () {
preloadImages(
['../../Content/Resources/close_mouse_over.png',
'../../Content/Resources/close.png']);
});
function preloadImages(sources) {
var image = new Array();
for (var i = 0; i < sources.length; i++) {
image[i] = new Image();
image[i].src = sources[i];
}
}
function mouseOverForImage(imgId, imgSrcs) {
document.getElementById(imgId).src = imgSrcs;
}
In Html:
<input type="image" src="../../Content/Resources/close.png" name="Action" value="Save" onmouseover="mouseOverForImage('close', '../../Content/Resources/close_mouse_over.png')"
onmouseout = "mouseOverForImage('close', '../../Content/Resources/close.png')" id="close" title = "Close" />
But request is still sending to server after mouseover. Is not working only in chrome
As noted within my comment, you are passing an array of arrays to the preLoadImages method.
As a result, you are passing an array to image[i].src which means it won't get loaded.
Try
$(document).ready(function () {
preloadImages(
['../../Content/Resources/close_mouse_over.png', '../../Content/Resources/close.png']);
});
function preloadImages(sources) {
var image = new Array();
for (var i = 0; i < sources.length; i++) {
image[i] = new Image();
image[i].src = sources[i];
}
}
function mouseOverForImage(imgId, imgSrcs) {
document.getElementById(imgId).src = imgSrcs;
}
or, if you want to keep the array of array's, then use
function preloadImages(sources) {
var image = new Array();
for (var i = 0; i < sources.length; i++) {
image[i] = new Image();
image[i].src = sources[i][0];
}
}
Edit, on further investigation, a possible cause is preloadImages destroys the image array after preloading the images.
try this instead:
function preloadImages(sources) {
window.preloadedImages = new Array();
for (var i = 0; i < sources.length; i++) {
window.preloadedImages[i] = new Image();
window.preloadedImages[i].src = sources[i];
}
}
This stores the preloaded images within the window object, allowing them to preload properly.
Hope that helps?