How to load image on onload with javascript? - javascript

I am new with HTML and JavaScript. I am trying to load image using onload event through JavaScript.
My code is as below:
<script>
function createImage() {
('testimonialhulk').src='photo.jpg';
</script>
and the HTML is
<body onload="createImage()">
<div class="testimonialhulk">
</div>
</body>
</html>
I have to display image in div tag.

This works in my jsfiddle
<body onload="createImage();">
<div id="testimonialhulk">
Hello
</div>
</body>
Js:
function createImage()
{
var myElement = document.getElementById("testimonialhulk");
myElement.style.backgroundImage = "url('https://placehold.it/350x150')";
}
JS fiddle
https://jsfiddle.net/wuskc68d/1/

Try this
function createImage() {
var par = document.getElementsByClassName("testimonialhulk")[0];
var img = document.createElement('img');
img.src = 'put path here';
par.appendChild(img);
}
or use <div id="testimonialhulk">
document.getElementById('testimonialhulk')
.innerHTML = '<img src="imageName.png" />';

Related

JavaScript Image Swap Errors

I am trying to create an Image Swap with Javascript. Can anyone point me in the direction of where my coding error is in JavaScript? Am I using the getElementByID incorrectly? Any help or direction is much appreciated!
<title>Photo Gallery</title>
</head>
<header>
<h1>Gallery</h1>
<div>
<img alt="images" src="Skelton_ImageSwap/images/Lilly.jpg"
style="height: 350px; width: 350px" id="Lilly">
</div>
</header>
<body>
<img src="Skelton_ImageSwap/images/Lilly.jpg" alt ="images" id ='Lilly' onclick.changeImage()>
<img src ="Skelton_ImageSwap/images/Lotus.jpg" alt = "images" id='Lotus' onclick.changeImage()>
<img src="Skelton_ImageSwap/images/Roses.jpg" alt="images" id='Roses'onclick.changeImage()>
<img src="Skelton_ImageSwap/images/Tulip.jpg" alt="images" id='Tulip'onclick.changeImage()>
</body>
<script>
function changePicture()
{
if (image.getElementByID.onclick.changePicture == "Lilly")
{
image.src = "Skelton_ImageSwap/image/Lilly.jpg";
}
if (image.getElementByID.onclick.changePicture == "Orchid")
{
image.src = "Skelton_ImageSwap/image/Orchid.jpg";
}
if (image.getElementByID.onclick.image == "Roses")
{
image.src = "Skelton_ImageSwap/image/Roses.jpg";
}
else
{
image.src = "Skelton_ImageSwap/image/Tulip.jpg";
}
}
</script>
On your img tags the onclick function is not wrote correctly should look like
onClick="changeImage()"
Also "changeImage" is not a function you wrote a function called "changePicture" so it should really look like
onClick="changePicture()"
Now in your changePicture function there are a few issues specifically the getElementById function is not being used correctly also you got the name wrong on it you capitalized the 'D' at the end which shouldn't be, I would recommend changing the id on your header tag img from 'Lilly' to 'preview' since element id's need to be unique and you've already used 'Lilly' as an id than replace your script tag with this
<script>
document.getElementById("Lilly").addEventListener("click", function(){
document.getElementById("preview").src = "Skelton_ImageSwap/image/Lilly.jpg"
});
document.getElementById("Lotus").addEventListener("click", function(){
document.getElementById("preview").src = "Skelton_ImageSwap/image/Lotus.jpg"
});
document.getElementById("Roses").addEventListener("click", function(){
document.getElementById("preview").src = "Skelton_ImageSwap/image/Roses.jpg"
});
document.getElementById("Tulip").addEventListener("click", function(){
document.getElementById("preview").src = "Skelton_ImageSwap/image/Tulip.jpg"
});
</script>

add image as div with javascript

I am trying to add an image as an element into my webpage. I am unable to do so. There are instructions on how to preview an image, but I was unable to find a solution.
What I want it to do is to add a div with an image into the webpage and keep loading it with different images. So after I add image 1, I would load image 2 under image 1 in the same webpage.
html body code:
<input type='file' id='getval' /><br/><br/>
<span onclick="readURL()" class="addBtn">Add</span>
<div id="myUL"></div>
javascript code:
<script type="text/javascript">
// grabs image
var file = document.createElement('image');
file.src = document.getElementById('getval').files[0];
// creates div & assigns id
var div = document.createElement('div');
div.id = 'item';
// adds file to div
file.type = 'image';
div.appendChild(file);
//adds item
document.getElementById("myUL").appendChild(div);
}
</script>
edit1*
I think adding the output of the code I want to display would be better inside the html document.
javascript generates html code inside document:
<div style="background-image":url("image");"><div>
You can use this script
count = 0;
function viewImage(){
var imagefile = document.querySelector('#image');
if (imagefile.files && imagefile.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
var content = '<img id="temp_image_'+count+'" style="border: 1px solid; width: 107px;height:107px;" >';
document.querySelector('#all_images').innerHTML += content;
document.querySelector('#temp_image_'+count).setAttribute('src', e.target.result);
}; reader.readAsDataURL(imagefile.files[0]);
this.imagefile = imagefile.files[0];
count++;
}else{
console.log("Image not selected");
}
}
<div id="all_images">
</div>
<input id="image" name="image" type="file" onChange="viewImage()">
Here you go, although pay attention to the comment at line 3.
<script type="text/javascript">
var file = document.createElement("img");
file.setAttribute("src", document.getElementById('getval').files[0]); //You can use HTML5 File API here
file.setAttribute("height", "250");
file.setAttribute("width", "250");
var divTocreate = document.createElement('div');
divTocreate.id = 'item';
divTocreate.appendChild(file);
document.getElementById("myUL").appendChild(divTocreate);
</script>

html/javascript - input/text to image on page load

I am new to HTML and javascripts. I hope someone can help me with my issue.
I am generating a code and passing the value to a textbox, then convert that value to a image. I need to execute the two function on page load is it possible? I hope someone can help. Thanks a lot!
Here is my code:
function SecurityCode() {
//Generate security code and assign to 'text'
document.getElementById('text').value = GeneratedCode;
}
function TexttoImage(){
// found this code here , thanks Stackoverflow!
var tCtx = document.getElementById('textCanvas').getContext('2d'),
imageElem = document.getElementById('image');
document.getElementById('text').addEventListener('onload', function (){
tCtx.canvas.width = tCtx.measureText(this.value).width;
tCtx.fillText(this.value, 0, 10);
imageElem.src = tCtx.canvas.toDataURL();
console.log(imageElem.src);
}, false);
}
<body onload='TexttoImage();'>
<canvas id='textCanvas' width='65' height='42'></canvas>
<img id='image' width='65' height='42'>
<input type='text' id='text' >
</body>
You can make an init function who regroup all functions than you whan to charge on load
function SecurityCode() {
//Generate security code and assign to 'text'
document.getElementById('text').value = GeneratedCode;
}
function TexttoImage(){
// found this code here , thanks Stackoverflow!
var tCtx = document.getElementById('textCanvas').getContext('2d'),
imageElem = document.getElementById('image');
document.getElementById('text').addEventListener('onload', function (){
tCtx.canvas.width = tCtx.measureText(this.value).width;
tCtx.fillText(this.value, 0, 10);
imageElem.src = tCtx.canvas.toDataURL();
console.log(imageElem.src);
}, false);
}
function initFormOnLoad(){
SecurityCode();
TexttoImage();
}
And in your form
<body onload='initFormOnLoad();'>
<canvas id='textCanvas' width='65' height='42'></canvas>
<img id='image' width='65' height='42'>
<input type='text' id='text' >
</body>
The onload attribute takes a string of JavaScript code, so you can simply put the two functions together!
onload="TexttoImage(); SecurityCode()"
You can try using jquery to ease your problem, you will need to include the below to your html page
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
HTML -
<body>
<canvas id='textCanvas' width='65' height='42'>
<img id='image' width='65' height='42' /></canvas>
<input type='text' id='text' />
</body>
javascript -
function SecurityCode() {
//Generate security code and assign to 'text'
document.getElementById('text').value = "hello1"; //GeneratedCode;
}
function TexttoImage() {
// found this code here , thanks Stackoverflow!
var tCtx = document.getElementById('textCanvas').getContext('2d');
imageElem = document.getElementById('image');
tCtx.canvas.width = tCtx.measureText(document.getElementById('text').value).width;
tCtx.fillText(document.getElementById('text').value, 0, 10);
imageElem.src = tCtx.canvas.toDataURL();
}
$(function() { // nearly equivalent to body.onload but a better option to use
SecurityCode();
TexttoImage();
})
Have a look at jsfiddle for working code.

HTML not rendering the img after I change src on the run time

I have the following code -
<html>
<head>
<script>
function myFunction()
{
var x = document.getElementById("myFile");
alert(x.value);
document.getElementById("picture").src=x.value;
}
</script>
</head>
<body>
<input type="file" id="myFile"><br>
<button onclick="myFunction()">Render this</button>
<img id="picture" src="C:\Users\Shin\Desktop\410.svg">
</body>
</html>
Initailly its showing the image, after I select another file and click the button, it shows me the path in the alert box perfectly but, it doesnt render the new pic and its showing a red cross at the place what you see in image when the src is incorrect. I used chrome browser.
try this...
<html>
<head>
<script>
function myFunction()
{
var input = document.getElementById("myFile");
var fReader = new FileReader();
fReader.readAsDataURL(input.files[0]);
fReader.onloadend = function(event){
var img = document.getElementById("picture");
img.src = event.target.result;
}
}
</script>
</head>
<body>
<input type="file" id="myFile"><br>
<button onclick="myFunction()">Render this</button>
<img id="picture" src="C:\Users\rajpc\Pictures\1390.jpg">
</body>
</html>
this would definitely work....
Change your img src as desired..
I hope this should help you....
you'll need URL.createObjectURL for that:
url=URL.createObjectURL(x[0]);
To read a local file you would need to use the FileReader Api.
function myFunction() {
var reader = new FileReader();
reader.onload = function(e) {
document.getElementById("picture").src = reader.result;
};
reader.readAsDataURL(document.getElementById("myFile").files[0]);
};

Javascript delayed image loading

I am trying to delay the loading of images using plain JS. my method to do this is by giving empty src field for the image and inserting the image url into a temp attribute called "lang" as used in the example below. ie >
<img lang="logo.gif"> instead <img src="logo.gif">. When pressing a button the js below is initiated to insert into src attr the value of the dummy "lang" attr.
function showimagesunderdiv(divid)
{
tr = document.getElementById(divid);
pics=tr.getElementsByTagName('img');
for(i=0;i<pics.length;i++)
{
if(pics[i].lang)
{
pics[i].src=pics[i].lang;
pics[i].style.display='';
}
}
}
While this works is Chrome and FF, IE is doing problems. Any idea?
Maybe this:
<html>
<body>
<p>Images:</p>
<img name=image0>
<img name=image1>
<img name=image2>
<img name=image3>
End of document body.
</body>
<script type="text/javascript">
function LoadImage(imageName,imageFile)
{
if (!document.images) return;
document.images[imageName].src = imageFile';
}
LoadImage('image4','number4.gif');
LoadImage('image5','number5.gif');
LoadImage('image6','number6.gif');
LoadImage('image7','number7.gif');
</script>
</html>
Or this:
<html>
<body>
<p>Images:</p>
<img name=image0 onLoad="LoadImage('image1','number1.gif')">
<img name=image1 onLoad="LoadImage('image2','number2.gif')">
<img name=image2 onLoad="LoadImage('image3','number3.gif')">
<img name=image3>
End of document body.
</body>
<script type="text/javascript">
var loadingImage = false;
function LoadImage(imageName,imageFile)
{
if ((!document.images) || loadingImage) return;
loadingImage = true;
if (document.images[imageName].src.indexOf(imageFile)<0)
{
document.images[imageName].src = imageFile;
}
loadingImage = false;
}
LoadImage('image0','number0.gif');
</script>
</html>
I know it is not a correction of your code but I cant see whats wrong...
This is a very compatible solution!
Hope it helps! resource:
http://www.cryer.co.uk/resources/javascript/script3.htm
Give each image tag an ID, store the IDs and URLs in an array:
imagesToLoad = [["imgId1", "http://..."], ["imgId2", "..."], ...];
And use:
function showimages(imageList)
{
for(var x = 0; x < imageList.length; x++) {
document.getElementById(imageList[x][0]).src = imageList[x][1];
}
}
showImages(imagesToLoad);

Categories

Resources