changing DOM element after document loading - javascript

Have simple code:
<!DOCTYPE html>
<html>
<head>
<script>
window.addEventListener( 'DOMContentLoaded', function(){
document.getElementById( 'dog' ).src = 'https://www.petfinder.com/wp-content/uploads/2012/11/122163343-conditioning-dog-loud-noises-632x475.jpg';
document.getElementById( 'dog' ).alt = 'Doggy';
});
</script>
</head>
<body>
<div id="container">
<img id="dog" src="" alt="">
</div>
</body>
</html>
How can I catch IMG element downloading? Tried to use mutations but unsuccessfully

The download starts at .src =.
You can subscribe on the load event to check when it is done.
img.onload = () => console.log('Done!');
You can also check the boolean complete
if (img.complete) { }

Related

How to preload images in JavaScript

I need some help preloading images in javascript, here is my code right now. I have to preload the images and then attach a mouseover and mouseout event to them, but preloading is really the only problem I am having right now.
"use strict";
var $ = function(id) { return document.getElementById(id); };
window.onload = function preload() {
var image1 = $("image1");
var image2 = $("image2");
// preload images
var links = $("image_list").getElementsByTagName("a");
var i,link, image;
// attach mouseover and mouseout events for each image
image1.onmouseover = function() {
"images/release.jpg";
};
image1.onmouseout = function() {
};
image2.onmouseover = function() {
};
image2.onmouseout = function() {
};
};
Blockquote
Here is the HTML
<!DOCTYPE html>
<html>
<head>
<title>Image Rollover</title>
<link rel="stylesheet" type="text/css" href="rollover.css">
<script type="text/javascript" src="rollover.js"></script>
</head>
<body>
<main>
<h1>Fishing Images</h1>
<p>Move your mouse over an image to change it and back out of the
image to restore the original image.</p>
<ul id="image_list">
<li><a href="images/release.jpg" id="catch" title="Catch and
Release"></a></li>
<li></li>
<li></li>
<li></li>
</ul>
<p>
<img id="image1" src="images/hero.jpg" alt="">
<img id="image2" src="images/bison.jpg" alt="">
</p>
</main>
</body>
</html>
`
You can do that binding the event onload
image2.onload = function(){
image2.onmouseover = function() {
};
image2.onmouseout = function() {
};
}
If you want to wait for all images to load you can do it with jQuery
$(window).on("load", function() {
//This will be executed when every single DOM element is loaded
}

I cannot add images to the canvas of my thumbnail image gallery

I'm new to html and javascript. I am trying to add images to a canvas when clicked on by calling the image from the image gallery. I'm using the onclick method to my script and isn't working thus I am struggling. I've added my code below. Thank you for your help! The assignment ask...
Implement the imgOnClick(elmt) function so that it paints (to the canvas' drawImage() method) the image given by elmt. elmt will be an tag object. The canvas has the id imgresult.
In the document ready function, have each of the thumbnail images set their click event to the imgOnClick() function. I recommend you test this for one image before implementing it for the remaining images. Make sure you scale the image to a usable size.
<pre> <code><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel=stylesheet type="text/css" href="memeory.css">
<title>Meme-ory :: Javascript Meme Generator</title>
<script type="application/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
$( document ).ready(function() {
$('.thumbnail').click(imgOnClick('img'){
});
});
function imgOnClick('img') {
var canvas = document.getElementById("imgresult");
var ctx = canvas.getContext("2d");
var img = document.getElementById("closeenough");
ctx.drawImage(img, 10, 10);
};
};
function buttonOnClick() {
};
</script>
</head>
<body>
<header>
<h1>Meme-ory: Raging on in the Moonlight!</h1>
</header>
<main>
<div id="controls">
<form>
<label for="toptext">Top Text:</label>
<input id="toptext" type="text">
<label for="bottomtext">Bottom Text:</label>
<input id="bottomtext" type="text">
<input id="createMemeButton" type="button" value="Give me Meme!">
</form>
</div>
<div id="imagegallery">
<img class="thumbnail" id="closeenough" src="closeenough.png" alt="close enough">
<img class="thumbnail" id="cutenessoverload" src="cutenessoverload.png" alt="cuteness overload">
<img class="thumbnail" id="deskflip" src="deskflip.png" alt="deskflip">
<img class="thumbnail" id="lol" src="lol.png" alt="LOL">
<img class="thumbnail" id="trollface" src="trollface.png" alt="troll face">
</div>
<div id="memeresult">
<canvas id="imgresult">
</canvas>
</div>
</main>
</body>
</html>
If you try to select an element in a page, you can only do so when it has been created. You cannot select it BEFORE its existence. In this case you try to select a canvas and an image in the HEAD of you page, but these elements are only defined later on in your body.
There are two simple fixes:
Either you move your script code to the end of the page (just before </body>), or you include the code in the $( document ).ready(function() { block, like this:
$(document).ready(function() {
window.onclick = function imgOnClick(e) {
var canvas = document.getElementById("imgresult");
var ctx = canvas.getContext("2d");
var img = document.getElementById("closeenough");
ctx.drawImage(img, 0, 0);
};
});
Both ways ensure that you try to select the elements when they have been created.

Adding another image using Javascript

Please find the code and advise.
I am trying to add an another image ('correct10.png') onClick Event of displayed image i.e 'Van.png'. But nothing happend, so please suggest.
Here the html :
<!DOCTYPE html >
<html lang="en">
<head>
<title>Adding Another Image onClick</title>
<script>
function doImgSwap()
{
document.getElementById('newImg').addEventListener('click', function(e){
var img = document.createElement('img');
img.setAttribute('src','correct10.png');
e.target.appendChild(img);
});
}
</script>
</head>
<body>
<p><img src="van.png"></p>
</body>
</html>
Your doImgSwap method creates an event handler, it does not actually swap the image.
Should be:
function doImgSwap(el){
var img = document.createElement('img');
img.setAttribute('src','correct10.png');
el.appendChild(img);
}
And you'll have to pass in the element in the onClick attribute, like this
onClick="doImgSwap(this)"
here's a working jsfiddle of your code
Your code should be
<!DOCTYPE html>
<html lang="en">
<head>
<title>Adding Another Image onClick</title>
<script>
window.onload = function() {
document.getElementById('newImg').addEventListener('click', function(e) {
var img = document.createElement('img');
img.setAttribute('src', 'correct10.png');
this.appendChild(img);
});
}
</script>
</head>
<body>
<p>
<a href="#" id="newImg">
<img src="van.png"/>
</a>
</p>
</body>
</html>
start by putting the js file under your html or use window.onload function to be sure
<!DOCTYPE html >
<html lang="en">
<head>
<title>Adding Another Image onClick</title>
</head>
<body>
<p><img src="van.png"></p>
<script>
function doImgSwap()
{
document.getElementById('newImg').addEventListener('click', function(e){
var img = document.createElement('img');
img.setAttribute('src','correct10.png');
e.target.appendChild(img);
});
}
</script>
</body>
</html>

change thumbnail image for main image

do i have a syntax error? , could it be that im using notepad++?
nothing is happening when i click a thumbnail image
i am new to javascript so that may be the case.
my general idea was to create an event "changeimage" that onclick would change the source of my main image for my thumbnails image to make it bigger.
<head>
<script type="text/javascript">
function changeimage(event)
{
event = event;
var targetElement = event.target;
if (targetElement.tagName == "IMG")
{
document.getElementbyid("Main").src = targetelement.getattribute("src");
}
}
</script>
<meta charset="utf=8">
<style>
#Main
{
height:540px;
width:540px;
}
.imgthmb1
{
height:100px;
width:100px;
}
</style>
</head>
<body>
<img id="Main" src="img/rickroll1.jpg" </img>
<br />
<div id="thumbnail" onclick="changeimage(event)">
<img class="imgthmb1" src="img/rickroll1.jpg" />
<img class="imgthmb1" src="img/rickroll2.jpg" />
<img class="imgthmb1" src="img/rickroll3.jpg" />
<img class="imgthmb1" src="img/rickroll4.jpg" />
<img class="imgthmb1" src="img/rickroll5.jpg" />
</div>
</body>
</html>
Yes, you have a syntax error:
targetElement is spelled targetelement in the following line:
document.getElementbyid("Main").src = targetelement.getattribute("src");
Change it to the following:
document.getElementbyid("Main").src = targetElement.getattribute("src");
On a related note, the following line is extraneous and can be removed:
event = event;
Javascript is case-sensitive.
in place of
document.getElementbyid("Main").src = targetelement.getattribute("src");
write
document.getElementbyId("Main").src = targetElement.getAttribute("src");
Also your html markup has an error:
<img id="Main" src="img/rickroll1.jpg" </img>
should be
<img id="Main" src="img/rickroll1.jpg">

Javascript - Changing an image with variables

I'm trying to create a slide show but I'm having some difficulty. I've googled the problem and read loads of pages but I still can't get it to work. I'm doing this all in my header, then the header.php will be included on whichever page. I've tried setting the source to a string containing the location, creating an image before and then setting it to that image's source, and just trying odd things trying to get it to work.
The strange thing is when I call the updateSlider() function, the source of my image is null even though I can see it on the screen, and afterwards when I set it, it says there is a source but the image is the same.
But at the moment I'm just trying to change the image when I click a button and then I'm going to try and make the slide show. Here is the header.php code, you can see some of the different things I've tried in it:
<!DOCTYPE html>
<html>
<head>
<style type="text/css" media="all">#import "./includes/layout.css";</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
var slideImages = new Array("includes/images/mmSlideImage1.png",
"includes/images/mmSlideImage2.png", "includes/images/mmSlideImage3.png");
var slideImage = newImage();
slideImage.src = slideImages[0];
pic = document.createElement("img");
pic.setAttribute("src", "includes/images/mmSlideImage2.png");
pic.setAttribute("alt", "No Image");
var url2 = "includes/images/mmSlideImage2.png";
var img2 = new Image();
img2.src = url2;
function updateSlider() {
console.log(document.getElementById("ht").getAttribute("src"));
document.getElementById("ht").setAttribute("src", img2.src);
console.log(document.getElementById("ht").getAttribute("src"));
}
</script>
</head>
<body>
<img src="includes/images/mmSlideImage1.png" alt="Logo" width="970" height="278" />
<button type="button" onclick="updateSlider()">Update Slider</button>
<div id="nav">
Home
About
Gallery
Programs
</div>
Thank you in advance for any help!
==================================================================================
UPDATED CODE:
<!DOCTYPE html>
<html>
<head>
<style type="text/css" media="all">#import "./includes/layout.css";</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"
</script>
<script>
var url2 = "includes/images/mmSlideImage2.png";
function updateSlider() {
console.log(document.getElementById("ht").getAttribute("src"));
$('ht').attr('src', url2);
console.log(document.getElementById("ht").getAttribute("src"));
}
</script>
</head>
<body>
<img src="includes/images/mmSlideImage1.png" alt="Logo" width="970" height="278" />
<button type="button" onclick="updateSlider()">Update Slider</button>
Simple. You're trying to give an anchor a image attribute. Give your img an id and fix it in the Javascript. For example, if you give it an "currentSlideImage" id:
$('#currentSlideImage').attr('src', url2);
BTW, I'd suggest you take a read on Unobstrusive Javascript.
i am not sure why are you using new image when you are just changing src of an image tag.
the easiest way is to use jquery code
$('#imgTagID').attr('src', url2);
or in javascript
document.getElementById("imgTagID").src = url2;
Here you go you were just missing id Tag inside jquery i just tried it with online images
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
var url2 = "http://www.thinkstockphotos.com.au/CMS/StaticContent/WhyThinkstockImages/Best_Images.jpg";
function updateSlider() {
//console.log(document.getElementById("ht").getAttribute("src"));
$('#ht').attr('src', url2);
//console.log(document.getElementById("ht").getAttribute("src"));
}
</script>
</head>
<body>
<a href="index.html" class="logo" > <img id="ht" src="http://www.nasa.gov/sites/default/files/images/743348main_Timelapse_Sun_4k.jpg" alt="Logo" width="970" height="278" /></a>
<button type="button" onclick="updateSlider()">Update Slider</button>
</body>
</html>

Categories

Resources