Hi how do I insert a image on a specific page when users visit my site?
I want to show an image when users visit the url: http://ww.exsample.com/order/cart/
It can be done with java script but how exactly?
Is it as simple as this:
if(document.URL.indexOf("order/cart/") >= 0){
var image = new Image; image.src ="http://www.exsample.com/images/wow.jpg"
}
Thanks alot
You are missing the important step where you actually append the image to the document.
var image = new Image;
image.src ="http://www.exsample.com/images/wow.jpg";
// the last step needed:
document.body.appendChild(image);
Sidenote:
Using document.URL is okay, however I prefer document.location. In your case you could use document.location.pathname which would return only the path /order/cart/.
Edit:
To put the image into a div, you simple create an additional div:
if(document.URL.indexOf("order/cart/") >= 0){
// create the wrapper div
var e = document.createElement("div");
// create the image and set the source
var image = new Image();
image.src ="http://lorempixel.com/400/200"
// append the image to the div
e.appendChild(image);
// and finally append the div to the document
document.body.appendChild(e);
}
Related
I'm trying to load an image into a div using JavaScript. Below is the current snippet of the code.
window.onload=function image_show() {
var thumbContainer = document.getElementById("art_img");
var thumbnail = document.createElement("img");
var img_width = document.getElementById("art_img").offsetWidth;
var img_height = document.getElementById("art_img").offsetHeight;
thumbnail.onload=function() {
thumbContainer.appendChild(thumbnail);
}
thumbnail.src = "http://xyz/bkg.png";
thumbnail.width = img_width;
thumbnail.height = img_height;
setTimeout(image_show, 1000 );
}
The appendChild() method keeps appending the images (one below the other) after the Timeout. But I want to actually keep refreshing the div with the same image.
The source of the image will be updated on my website with the same name, and I want the script to display the new image after Timeout. I tried inserting a removeChild() method just before appendChild(), but didn't work as expected. Any help will be appreciated.
just empty the element before you append again
thumbnail.onload=function() {
thumbContainer.innerHTML = ""; // ADD THIS LINE
thumbContainer.appendChild(thumbnail);
}
The problem is that the browser caches the image.
Try appending a timestamp to the src attribute of the thumbnail:
thumbnail.src = "http://xyz/bkg.png?ts=" + Date.now();
This way, the source URL will be slightly different each time the image_show function runs and the picture should be loaded by the browser each time.
I have built an image gallery and want to allow users to click on the main image to get a full screen preview.
What I've done is get the image element and append it to my lightbox div which is semi-transparent, like so:
function get_image_preview(){
var lightboxBG = document.getElementById("product_preview");
var image_preview = document.getElementById("gallery_main_image");
lightboxBG.style.display = "block";
lightboxBG.appendChild(image_preview);
}
Is there a way to do this that isn't going to remove the original element from the screen? As it is it removes the image from the page and then adds it to the lightbox. As the lightbox is semi-transparent what users are seeing behind it is all messed up because the element was removed.
What I did to get around this is create a new Element and get the original image src and set that as an attribute for the newly created element.
function get_image_preview(){
var lightboxBG = document.getElementById("product_preview");
var image_src = document.getElementById("gallery_main_image").src;
lightboxBG.style.display = "block";
var new_image = document.createElement("img");
new_image.setAttribute("id", "preview_image");
new_image.setAttribute("src", image_src);
lightboxBG.appendChild(new_image);
}
I am probably missing something simple but it's quite annoying when everything you read doesn't work.
I am trying to set the "throbber" img src to the first img src of a webpage. So far, I've got:
<script type="text/javascript">
var image = document.createElement("img");
var imageParent = document.getElementById("body");
image.id = "id";
image.className = "class";
image.src = searchPic.src; // image.src = "IMAGE URL/PATH"
imageParent.appendChild(image);
Would it be possible to implement this with html only?
And
<div id="throbber"><img src="http://www.cloudaccess.net/images/Google-Chrome-Extensions.jpg" /></div>
Is it possible to change the img src to the first img src of a page depending on the website?
Yes it is. Try following code:
window.onload = function(){
var divEl = document.getElementById('throbber');
var image = divEl.getElementsByTagName('img')[0];
// set the new image
image.src= 'https://your/new/image.png';
}
Note that we need to take advantage of window.onload in order to make sure DOM is ready before manipulating it.
See this JSfiddle DEMO
If your throbber image is in the website from which you're trying to pull the image, you can use jquery like this:
$(function (){
// get the src of the first image that is not your throbber image
var src = $('img:not("#throbber img")').attr('src');
// set the throbber image to this src
$('#throbber img').attr('src', src);
});
I have an array of images where they randomly come up on the screen, and the user is required to click on the images that applies to them.
Now what I need is How would I monitor which image they clicked so as the developer I know which images apply to them? I can also make something like a list of images they clicked on the bottom of the screen.
Would anyone show me directions on how would I go on doing this because I don't have a clue to where to start from. Thank you
This is how I generated the random images
var imageArray = new Array();
imageArray[0] = new Image();
imageArray[0].src = "football.png";
imageArray[1] = new Image();
imageArray[1].src = "painting.png";
var randomImage = imageArray[Math.floor(Math.random() * imageArray.length)];
var hobby = new Bitmap(randomImage);
What I would do is give each of the images an ID, I would probably give them numbers.
Then adding this to your script for each image.
document.getElementById(insert image id here).onclick = function() {
//Enter what happens when the user clicks the image here.
};
You can also do it using jquery like so:
$("#insert image ID").click(function(){
//Enter what happens when the user clicks the image here.
});
There is probably a better way to do this, but I cant really imagine it right now :)
Right now I am building a map of the US, and when you hover over any given state, I am replacing the image with an image of a different color.
My problem is that the way I am currently doing things, the image is being replaced and a new image loaded on hover.
I have the HTML laid out as:
<img class="state" id="alaska" src="img/united-states_Alaska.png" alt="alaska">
<img class="state" id="hawaii" src="img/united-states_hawaii.png" alt="hawaii">
And the jQuery I am using is:
$('.interactive-map img').each(function(e){
var src = $(this).attr('src');
$(this).hover(function(){
$(this).attr('src', src.replace('.png', '-hover.png'));
}, function(){
$(this).attr('src', src);
});
});
I am curious if there is another way to either preload the images with JavaScript, or make it so that there isn't a new request for image every time I hover. I would like to not have to change the HTML or CSS much and optimize it in JavaScript.
Add your images to the DOM on page load but in hidden state, then they get cached
$(function() {
var images = ['url/to/your/jpg1.jpg', 'ur/to/your/png2.png'];
var d = document.createElement("div");
d.style.display = 'none';
document.body.appendChild(d);
for (var i in images)
{
var img = document.createElement("img");
img.src = images[i];
d.appendChild(img);
}
});
Have two image tags and set the first image's display: block. Set the second image's display: none.
Then on hover you switch the them. It is as easy as that.
Use PreloadJS
Example:
var preload = new createjs.LoadQueue();
preload.addEventListener("fileload", handleFileComplete);
preload.loadFile('http://createjs.com/images/404/gBot-confused.jpg');
function handleFileComplete(event) {
document.body.appendChild(event.result);
}
Full Docs: here
Another interesting post using JS and AJAX: Preloading