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>
Related
This code replaces the image And keeping the cookies
Is there a mistake? I do not know the solution.
<html>
<button onclick="hideImage()"> Remove img </button>
<img id="my_images" src="http://karachiairport.com.pk/images/data-section/airline/24-11.png">
<script>
document.addEventListener('DOMContentLoaded', function() {
// If cookie exist
if (document.cookie.indexOf('image_clicked') > -1) {
document.getElementById("my_images").src="http://www.1dmag.com/all_asset/img/no-image.png";
}
function hideImage() {
document.getElementById("my_images").src="http://www.1dmag.com/all_asset/img/no-image.png";
document.cookie = "image_clicked=true";
}
});
</script>
Please try this.
Now 'hideImage is not defined' error is resolved.
<html>
<button onclick="hideImage()"> Remove img </button>
<img id="my_images" src="http://karachiairport.com.pk/images/data-section/airline/24-11.png">
<script>
document.addEventListener('DOMContentLoaded', function() {
// If cookie exist
if (document.cookie.indexOf('image_clicked') > -1) {
document.getElementById("my_images").src="http://www.1dmag.com/all_asset/img/no-image.png";
}
});
function hideImage() {
document.getElementById("my_images").src="http://www.1dmag.com/all_asset/img/no-image.png";
document.cookie = "image_clicked=true";
}
</script>
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" />';
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.
this works on a button click and that is how it is meant to be. The problem lies in the fact that it uses hidden images, instead of images stored in an array. Could you please show me how to do it so that it is images stored in an array.
<!doctype html>
<html>
<body>
<div id="splash">
<img src="TrafficLightRed.gif" alt="" id="mainImg">
</div>
<div id="wrapper">
<div>
<button id="clickme" onclick="changeLight();">Click to change</button>
<img src="TrafficLightRed.gif" hidden>
<img src="TrafficLightYellow.gif" hidden>
<img src="TrafficLightGreen.gif" hidden>
</div>
</div>
<script>
function changeLight() {
var currentImg = document.getElementById("mainImg");
for(var i=1;i<3;i++) {
if(document.images[i].src == currentImg.src) {
currentImg.src = document.images[i + 1].src;
return;
}
}
currentImg.src = document.images[1].src;
}
</script>
</body>
</html>
You would store the image's src in an array:
imagesArray = ["TrafficLightRed.gif","TrafficLightYellow.gif","TrafficLightGreen.gif" ];
And use the array in place of document.images[i + 1].src:
...
for(var i=0;i<imagesArray.length;i++) {
if(imagesArray[i] == currentImg.src) {
currentImg.src = imagesArray[i];
return;
}
}
...
This should do the work:
...
<script>
var images = ["TrafficLightRed.gif", "TrafficLightYellow.gif", "TrafficLightGreen.gif"];
var currentIndex = 0;
function changeLight() {
var currentImg = document.getElementById("mainImg");
currentImg.src = images[(currentIndex++) % images.length];
}
</script>
...
Now you can add more images to array images and it will automatically loop through this array.
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);