So I have this gallery page where I have multiple <img> tags with a unique picture. Clicking on the picture should take you to a another webpage with more info on that specific picture. Hence, all onclick()s are unique, depending on the src of the image.
Now, given the fact that all these <img> tags are virtually same save for picture, I decided to use JavaScript to make all of them in a loop, as seen below:
loadImageGalleryData
for (var i = 0; i < 21; i++) {
var imgSrc = "http://localhost:63342/Performance%20Task/Website/imgs/gallery/img/" + i + ".jpg";
console.log(imgSrc);
var imgDiv = document.createElement('div');
imgDiv.className = "img";
var descDiv = document.createElement('div');
descDiv.className = "desc";
var imgView = document.createElement('img');
imgView.src = imgSrc;
imgView.onclick = (function() {{openWebpage(imgSrc);}})();
console.log(imgSrc);
imgView.width = 300;
imgView.height = 200;
imgDiv.appendChild(imgView);
imgDiv.appendChild(descDiv);
document.getElementsByTagName('body')[0].appendChild(imgDiv);
}
The openWebpage() function in particular is this one:
openWebpage()
function openWebpage(src) {
var orig = window.document.title;
window.document.title = src;
open("imagePage.html");
}
The imagePage has a jscript which tells ITS OWN img and div tag to display the image, whose source is received from window.document.opener.title or somethign like that.
All the images get built, but the onclick() doesn't register. A peek in the developer mode in Chrome, and the images don't have an onlick() attribute.
Also, if I change this snippet of code:
imgView.onclick = (function() {{openWebpage(imgSrc);}})();
into this:
imgView.onclick = function() {openWebpage(imgSrc);};
The onlick() DOES register, but for every image simultaneously, with the src of the last image created. So when I click on Picture 1, it goes to the information of Picture 22. Same goes for every other picture. It's all the same info.
What am I doing wrong here?
EDIT: ADDITIONAL INFO
imagePage.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/imagePage.css"/>
<script src="jscript/imageData.js"></script>
<script src="jscript/loadImageData.js"></script>
</head>
<ul>
<li>Home</li>
<li>Gallery</li>
<li>About</li>
<li>Contact</li>
</ul>
<body>
<div>
<h1 id="imageTitle">TESTTITLE</h1>
</div>
<div>
<img id="imageView">
</div>
<div class="boxed" id="imageDesc">
</div>
</body>
</html>
loadImageData
window.onload = function() {
var imageSrc = opener.document.title;
var imageDesc = map[imageSrc];
var imageView = document.getElementById("imageView");
var imageDescView = document.getElementById("imageDesc");
imageView.src = imageSrc;
imageDescView.innerHTML = imageDesc;
};
On the last iteration of your loop, you set imgSrc to the url of picture 22. So on the click event your function openWebPage fires with that url in the argument.
Try this.
imgView.addEventListener("click", function() {openWebpage(imgSrc);});
Related
I'm trying to make a main menu for a game. The first frame contains buttons "Start game" and "Quit". The second frame contains buttons "Start", "Back" and a clickable icon for turning the in-game music on or off.
In my onload function I'm adding event listeners to both the "start game" button and the clickable icon. However, it seems, that it only registers the first event listener as when I changed the order the "start game" button stopped working too. What am I doing wrong and am I missing something about handling input with DOM?
window.onload = function (){
document.getElementById("button_play").addEventListener("click", showInstructionPage);
document.getElementById("Link_sound").addEventListener("click", setSound);
}
function setSound(){
if(sound == 1){
document.getElementById("Icon_sound").setAttribute("src", "../media/vypnuty_zvuk.png");
sound = 0;
}
else{
document.getElementById("Icon_sound").setAttribute("src", "../media/zapnuty_zvuk.png");
sound = 1;
}
}
function showInstructionPage(){
//this part is long but works
document.getElementById("button_play").innerHTML = "Start";
document.getElementById("button_play").style.left = "350px";
var quit = document.getElementById("button_quit");
var back = document.createElement("a");
var id = document.createAttribute("id");
id.value = "button_back";
back.setAttributeNode(id);
var link = document.createAttribute("href");
link.value = "#";
back.setAttributeNode(link);
text = document.createTextNode("Back");
back.appendChild(text);
document.getElementById("menu").replaceChild(back, quit);
document.getElementById("button_back").style.left = "346px";
//add instructions and sound icon
var header = document.createElement("h1");
text = document.createTextNode("Instructions");
header.appendChild(text);
document.getElementById("menu").appendChild(header);
var id = document.createAttribute("id");
id.value = "Header_instructions";
header.setAttributeNode(id);
var goal = document.createElement("p");
text = document.createTextNode("Your goal is to get as many frogs to the other side of the river without losing all your lives. To do this, you need to avoid the traffic and alligators.");
goal.appendChild(text);
document.getElementById("menu").appendChild(goal);
var id = document.createAttribute("id");
id.value = "Paragraph_goal";
goal.setAttributeNode(id);
var instructions = document.createElement("p");
text = document.createTextNode("Move in any direction using the arrow keys");
instructions.appendChild(text);
document.getElementById("menu").appendChild(instructions);
var id = document.createAttribute("id");
id.value = "Paragraph_instructions";
instructions.setAttributeNode(id);
var soundLink = document.createElement("a");
var link = document.createAttribute("href");
link.value = "#";
soundLink.setAttributeNode(link)
var id = document.createAttribute("id");
id.value = "Link_sound";
soundLink.setAttributeNode(id);
var soundImage = document.createElement("img");
var id = document.createAttribute("id");
id.value = "Icon_sound";
soundImage.setAttributeNode(id);
var source = document.createAttribute("src");
source.value = "../media/zapnuty_zvuk.png";
soundImage.setAttributeNode(source);
soundLink.appendChild(soundImage);
document.getElementById("menu").appendChild(soundLink);
}
<html>
<head>
<meta charset="UTF-8">
<title>FROGGER</title>
<link rel="stylesheet" href="../css/styles.css" type="text/css">
<script type="text/javascript" src="../js/main.js"></script>
</head>
<body>
<div id="wrapper">
<div id="menu">
<img id="game_title" src="../media/title.png">
Start game
Quit
</div>
<canvas id="canvas" width="800" height="800"></canvas>
<img src="../media/menu_background.jpg" hidden="true" id="menuBackground">
</div>
</body>
</html>
The issue was, that when I called
document.getElementById("Link_sound").addEventListener("click", setSound);
inside the .onload function it couldn't assign the event listener because at the time of loading the page the clickable image doesn't exit yet, as it is only created using DOM after clicking a button. I solved it by moving the code snipped above to the bottom of the showInstructionPage() function after creating the image element.
I'm making a slideshow in javascript for a class assignment and I have the slideshow working but it's not displaying the images. I can see that the image icon changes but the actual image is not showing.
<script type="text/javascript">
//put images in array
var pics = new Array();
pics[0] = new Image();
pics[0].src = "images/forest.jpg";
pics[1] = new Image();
pics[1].src = "images/mountains.jpg";
pics[2] = new Image();
pics[2].src = "images/nature.jpg";
pics[3] = new Image();
pics[3].src = "images/snowtops.jpg";
var index = 0; //start point
var piclength = pics.length - 1;
function slideshow() {
document.slide.src = pics[index];
if (index < piclength) {
index++;
}
else {
index = 0;
}
}
function slide() {
setInterval(slideshow, 3000);
}
</script>
<body onload="slide()">
<h1>Nature Photography</h1>
<main>
<section>
<p>I am an enthusiastic about nature photography. Here is a slideshow of my
works.</p>
<aside> <img id="myImage" src="images/forest.jpg" name="slide" width="95%">
</aside>
First, I would put the script tag after your HTML. This will allow you to cache DOM elements without waiting for the "DOMContentLoaded" event or the "load" (window) event to be fired.
Second, you should cache the "myImage" element. Something like const slider = document.getElementById('myImage').
Third, check your console. Maybe your image URLs are wrong? And make sure your HTML is valid. From what you posted, you are missing a lot of things (doctype, html/head tags, you didn't close body tag and similar)
I am trying to swap the src image with the id image. From what I see on other examples I thought this would be the way to go about doing it. It definitely does not work for me. This is my first time posting here so any help with formatting my question would be greatly appreciated also.
HTML:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Image Rollovers</title>
<link rel="stylesheet" href="main.css">
<script src="rollover.js"></script>
</head>
<body>
<section>
<h1>Image Rollovers</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>
</body>
</html>
Javascript:
//FUNCTION
var $ = function (id) {
return document.getElementById(id);
}
//MOUSE EVENT FUNCTIONS
var rollover = function(evt) {
var link = this;
var imageNode = $("img");
imageNode.setAttribute("img", link.getAttribute("id"));
}
var rollout = function(evt) {
var link = this;
var imageNode = $("id");
imageNode.setAttribute("id", link.getAttribute("img"));
}
//ONLOAD EVENT HANDLER
window.onload = function () {
//GET ALL IMG TAGS
var linkNode = $("image_rollovers");
var images = linkNode.getElementsByTagName("img");
//PROCESS EACH IMAGE
var i, linkNode, image;
for ( i=0; i<images.length; i++)
{
linkNode = images[i];
linkNode.onmouseover = rollover;
linkNode.onmouseout = rollout;
}
}
First, you have a typo in the HTML, you're missing the > at the end of the third <img.
<li><img src="images/h3.jpg" alt="" id="images/h6.jpg"></li>
^
Second, you're calling $("img") and $("id"), but there are no elements with those IDs. You should just be setting a variable to the appropriate attribute of link. There's no need for different functions for rollover and rollout, since they both just swap the id and src attributes.
//MOUSE EVENT FUNCTIONS
function swap_src_and_id(evt) {
var link = this;
var src = link.getAttribute("src");
link.setAttribute("src", link.getAttribute("id"));
link.setAttribute("id", src);
}
Third, you're calling linkNode.getElementsByTagName("src"), but there's no such tag. It should be img.
window.onload = function () {
//GET ALL IMG TAGS
var linkNode = $("image_rollovers");
var images = linkNode.getElementsByTagName("img");
//PROCESS EACH IMAGE
var i, linkNode, image;
for ( i=0; i<images.length; i++)
{
linkNode = images[i];
linkNode.onmouseover = swap_src_and_id;
linkNode.onmouseout = swap_src_and_id;
}
}
I am trying to add a link to a single image that already has a change source function attached to it.
The site has a gallery that uses thumbnails to change the larger image so there are 27 images. I am triyng to add an individual link to one of this images.
all the code i am finding uses id's and in order to keep the change source function working, none of these solutions will work.
The link is for only one image. Here is my code:
<script>function changeImage27()
{
var img = document.getElementById("image");
img.src="thestudio/thestudio_27.gif";
}
</script>
And my HTML:
<div id="slideshow">
<img id="image" src="thestudio/thestudio_1.gif" />
</div>
<a id="clickme" onClick="changeImage();"><img border="0"src="thestudio/thestudio_1t.gif"></a>
I only need to link one image. so i am looking for a solution that adds a hyperlink in the script. a.href="" is not working and i cant seem to find any other solutions.
This may be a better solution:
<head>
<script type="text/javascript">
var images = ["image1.gif","image2.gif",...,"image27.gif"];
var thumbs = ["image1t.gif","image2t.gif",...,"image27t.gif"];
var basePath = "thestudio/";
var currentImage = 0;
function changeImage() {
var img = document.getElementById("image");
var thumb = document.getElementById("thumb");
img.src = basePath + images[currentImage];
thumb.src = basePath + thumbs[currentImage];
currentImage ++;
if (currentImage >= images.length) {
currentImage = 0; // this will cause it to loop
}
}
</script>
</head>
<body onLoad="changeImage();">
<div id="slideshow">
<img id="image">
</div>
<a onClick="changeImage();" href="#"><img border="0" id="thumb"></a>
</body>
So you don't have to have 27 different functions.
You could also define the images like follows:
var images = [{image:"image1.gif",thumb:"image1t.gif"},...{image:"image27.gif",thumb:"image271.gif"}];
Then in changeImage:
var image = images[currentImage];
img.src = basePath + image.image;
thumb.src = basePath + image.thumb;
Here you go:
Take a look at this JSFiddle I put together for you.
Cheers!
http://jsfiddle.net/douglasloyo/aR83b/
<script>
window.changeImage = function changeImage()
{
var img = document.getElementById("my-img");
var newImgSrc = "http://www.johnlund.com/ArticleImages/Artcl38-stock-ideas/dog-leader-pack.jpg";
img.src=newImgSrc;
}
</script>
<img id="my-img" src="http://www.johnlund.com/ArticleImages/Artcl38-stock-ideas/ocean-island- palm.jpg" />
<button onclick="window.changeImage();">ClickMe</button>
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>