I am looking for a simple way to add a close icon image to another image in Javascript. I am trying to position an icon in the top right corner of the an image.
Code So Far:
function drawImages(imagevalue){
var array = localStorage.getItem('images');
array = JSON.parse(imagevalue);
//Add HTML to screen:
//Clear the elements that might already be in the div so they don't appear twice:
var theDiv = document.getElementById("saveArea");
while (theDiv.firstChild) {
theDiv.removeChild(theDiv.firstChild);
}
for (var x=0; x < array.length; x++){
//Create image for each value in array:
var img = document.createElement("img");
img.src = array[x];
img.width = 300;
img.height = 150;
img.style.marginRight="10px";
img.className = "saveImg";
//this image needs to be placed in the top right corner of the
//image named img.
var close = document.createElement("close");
close.src="close.png";
document.getElementById("saveArea").appendChild(img);
}
}
CSS doesn't work? Something like position:relative;right:0;top:0;
Related
I am trying to loop a small image to 100% width of the page using a for loop.
var gameW = window.innerWidth;
var gameH = window.innerHeight;
var grass = document.getElementById("grass");
var sand = document.getElementById("sand");
grass.src = "images/grass.png"
function makeMap(){
for(var i = 0; i < gameW; i++){
grass++;
}
}makeMap();
You can do this with css (if that is an option). background-repeat will probably do the job.
For example, you can add a single div that has the width of your viewport and set its background to the image you want.
I have an array that contains 5 images. When I mouseover the images I want them to double in size and then return to original size onmouseout. I know how to do this by coding each image individually but I was wondering if there was a way to write one Javascript function (please only Javascript, I'm not allowed to use JQuery for this assignment) that will affect all the images? Here is what I have so far:
My array:
var myImages = new Array("usa.png", "canada.png", "jamaica.png", "mexico.png", "pig.png");
The function I wrote... I'm not sure about the getElements line...:
var doubles = document.getElementsByTagName("img");
doublesWidth = doubles.width;
doublesHeight = doubles.height;
doubles.onmouseover = function() {
doubles.width = 2 * doublesWidth;
doubles.height = 2 * doublesHeight;
}
doubles.onmouseout = function() {
doubles.width = doublesWidth;
doubles.height = doublesHeight;
}
And then in the body I call the images with a height, width and src. For example:
<img id="pig" name="img2" src="pig.png" border="0" height="200" width="350">
Thanks!!!!!
I created a fiddle that here should help you. In the example, it loops over all images and applies event listeners to mouseover and mouseout, handling the image size accordingly.
var images = document.getElementsByTagName('img');
for (var i = 0; i < images.length; i++) {
images[i].addEventListener("mouseover", function(e) {
e.target.width = e.target.width * 2;
});
images[i].addEventListener("mouseout", function(e) {
e.target.width = e.target.width / 2;
});
}
I have a app that shows coloured dots moving across the screen, following set routes. There is a save button the saves the current screen to a .png format.
The problem I am having is that if I click the save image button several times the images don't just show the current position of that click, they show all previous positions from when the save button was clicked.
E.g. if at click 1 the dot is as position 1 and click 2 it is at position 2. Image two will show positions 1 and 2. A third image would show positions 1,2 and 3.
Obviously there is an issue with layering or not clearing the canvas but I can't see the problem.
the save code (wrapped in an AngularJS app) is :
$scope.saveImage = function() {
var stageWidth = jQuery("#mainStage").width();
var stageHeight = jQuery("#mainStage").height();
var html = d3.select("#mainStage")
.attr("version", 1.1)
.attr("xmlns", "http://www.w3.org/2000/svg")
.attr("width",stageWidth)
.attr("height",stageHeight)
.node().parentNode.innerHTML;
var imgsrc = 'data:image/svg+xml;base64,' + btoa(html);
jQuery("#canvas").height(stageHeight);
jQuery("#canvas").width(stageWidth);
var canvas = document.getElementById("canvas");
var context = document.querySelector('canvas').getContext("2d");
var image = new Image;
image.src = imgsrc;
image.onload = function() {
context.drawImage(image,0,0);
var canvasdata = canvas.toDataURL("image/png");
var pngimg = '<img src="' + canvasdata + '">';
var a = document.createElement("a");
console.log(a);
a.download = "sample.png";
a.href = canvasdata;
a.click();
};
}
Thanks in advance.
This would mean that it has not been through the digest loop. A common problem with mixing jQuery and AngularJs. Add a watcher.
if (yardss > 0.1 && yardss < 0.3) {
var img = document.createElement("img");
img.src = "images/wrench1.jpg";
img.align = "center";
document.body.appendChild(img);
} else if (yardss > 0.3) {
var img = document.createElement("img");
img.src = "images/wrench.jpg";
img.width = 500;
img.height = 300;
document.body.appendChild(img);
}
This script is activated by the user clicking on a button, and it prompts the user to enter a certain number of yards. If the yards are above a certain number, it displays a certain sized wrench. If it is below a certain number, it displays a different sized wrench.
My problem is that because the script can be run over and over again by clicking on the button, every time that the script is run, a new image of a wrench is produced below the previous image, creating a really long web page with a lot of images.
How do I make the newly created image replace the image created from the previous running of the script, instead of having the page fill with images from the script being run multiple times?
Use replaceChild instead of appendChild.
You can just change the .src property on the current image. There is no need to create a whole new image:
// get the current image object
// assumes you set id="wrenchImg" on it
var img = document.getElementById("wrenchImg");
if (yardss > 0.1 && yardss < 0.3) {
img.src = "images/wrench1.jpg";
img.height = ... // set this to whatever you need it to be for this image
img.width = ... // set this to whatever you need it to be for this image
img.align = "center";
} else if (yardss > 0.3) {
img.src = "images/wrench.jpg";
img.height = 300;
img.width = 500;
img.align = "left";
}
If you have any other properties of the image that must also be changed (height or width or alignment, for example), then you can add those to each branch of the if/else, but doing it this way, you have to fully initialize the image object because it may have been set a different way based on the previous image.
Don't create the img element again and again. Just create once and set some id on it. Then just change the src and width, height etc..
In HTML:
<img id= "wrench_img"/> // Setting id as wrench_img
In JavaScript:
function changer(yardss) {
var img1 = document.getElementById("wrench_img"); // Get the img
if (yardss > 0.1 && yardss < 0.3) {
img1.src = "images/wrench1.jpg"; // Change the src
img1.align = "center";
} else if (yardss > 0.3) {
img1.src = "images/wrench.jpg"; // Change the src
img1.width = 500; // Change width
img1.height = 300;
}
}
In your code, you were appending new image elements to the document.body. That is why you were getting multiple image elements. But if you look at this code, we don't create the image elements multiple times. We just change the one created.
Online Demo
I want to use JavaScript to draw a series of images onto an HTML5 canvas. I have the following while loop, which I had hoped would draw all of the images to the canvas, however, it is currently only drawing the first one:
function drawLevelOneElements(){
/*First, clear the canvas */
context.clearRect(0, 0, myGameCanvas.width, myGameCanvas.height);
/*This line clears all of the elements that were previously drawn on the canvas. */
/*Then redraw the game elements */
drawGameElements();
/*Draw the elements needed for level 1 (26/04/2012) */
var fileName = 1;
var imagePositionX = 20;
var imagePositionY = 30;
while(fileName < 11){
/*Create an array of images here, move to next element of array on each iteration */
var numbers = new Array();
numbers[0] = "1.png"
numbers[1] = "2.png"
numbers[3] = "3.png"
numbers[4] = "4.png"
numbers[5] = "5.png"
image.src = fileName+".png";
image.src = numbers[0];
image.onload = function(){
context.drawImage(image, imagePositionX, imagePositionY, 50, 50);
}
fileName = fileName+1;
imageY = imageY+20;
console.dir(fileName); /* displays in the console- helpful for debugging */
}
To talk through what I had hoped this function would do:
Load each of the images into a different element of the array (so 1.png would be in numbers[0], 2.png in numbers[1], etc. )
It would then take the global variable 'image', and assign its source to the contents of numbers[0]
Then draw that image at the specified position on the canvas.
Then increment the value of the variable fileName by 1, giving it a value of '2'
Next it would increment the value of the Y co-ordinate where it will draw the image on the canvas by 20- moving the position of the image to be drawn down by 20 pixels
After that it would go back to the start of the loop and draw the next image (2.png) on the canvas in a position that is 20 pixels below the position of the first image that was drawn.
It should continue doing this while the value of the variable 'fileName' is less than 11, i.e. it should draw 10 images each new one below the last one that was drawn.
However, for some reason, my function only draws the first image. Could someone point out what I'm doing wrong, and how I could correct this?
Thanks very much.
Edited and commented some points of your code.
The most effective change was at imageY = imageY+20; that was edited to use imagePositionY variable.
function drawLevelOneElements() {
/*First, clear the canvas */
context.clearRect(0, 0, myGameCanvas.width, myGameCanvas.height);
/*This line clears all of the elements that were previously drawn on the canvas. */
/*Then redraw the game elements */
drawGameElements();
/*Draw the elements needed for level 1 (26/04/2012) */
var fileName = 1;
var imagePositionX = 20;
var imagePositionY = 30;
while(fileName < 11){
/*Create an array of images here, move to next element of array on each iteration */
var numbers = new Array();
/* what is not used is not necessary :)
numbers[0] = "1.png"
numbers[1] = "2.png"
numbers[3] = "3.png"
numbers[4] = "4.png"
numbers[5] = "5.png"*/
image.src = fileName+".png";
// image.src = numbers[0];
image.onload = function(){
context.drawImage(image, imagePositionX, imagePositionY, 50, 50);
}
fileName = fileName+1;
imagePositionY = imagePositionY+20; //before: imageY = imageY+20;
console.dir(fileName); /* displays in the console- helpful for debugging */
}
If you take the drawImg stuff and shove it in its own function you can clean this up a bit :) Now we've yanked the async stuff out of the loop, so the image variable doesn't get over-written each time you loop. You're also using a for loop now, which to me is clearer to understand.
function drawLevelOneElements() {
// your stuff
for (var i = 0; i > 5; i++) {
drawImg(ctx, i, x, y);
// update x or y and whatever else
}
}
// put all your image drawing stuff here
function drawImg(ctx, i, x, y) {
var img = new Image();
img.src = i + ".png";
img.onload = function(){
ctx.drawImage(img, x, y, 50, 50);
}
}