I found this script to change the body's background image when you click a link. It works, great except the only problem is is that I cannot have a pre-defined bg image in the css or else it won't change.
So I remove the css for the background image and it switches the images fine, but I want an image to be default to start with.
Script:
<script language="JavaScript">
<!--
var backImage = new Array(); // don't change this
backImage[0] = "images/bg0.png";
backImage[1] = "images/bg1.png";
backImage[2] = "images/bg2.png";
backImage[3] = "images/bg3.png";
backImage[4] = "images/bg4.png";
backImage[5] = "images/bg5.png";
function changeBGImage(whichImage){
if (document.body){
document.body.background = backImage[whichImage];
}
}
//-->
</script>
Link:
Change2
And, for example, I want bg0.png to be the background by default when the page loads.
It would also be great if it was possible to fade between the bg images.
Thanks in advance.
Keep the background in the CSS, and use this code instead
var backImage = [
"images/bg0.png",
"images/bg1.png",
"images/bg2.png",
"images/bg3.png",
"images/bg4.png",
"images/bg5.png"
];
function changeBGImage(whichImage) {
if (document.body){
document.body.style.backgroundImage = 'url('+backImage[whichImage]+')';
}
}
To change the background if you have one defined in the css you need to alter: document.body.style.backgroundImage attribute
Related
Please help me, I have been working on this for hours. I have just started playing with JavaScript.
So I have a button that loads a new browser window, loads background image. As below, no problems.
HTML
<script>
setBackground();
</script>
JavaScript
function setBackground() {
document.body.style.backgroundColor = "#000000";
document.body.style.backgroundImage = "url(bg.jpg)"
}
Then I try to load another window on button click but the background image will not work. The window works, I can change the background color no problem, but I can't get the image to load. code below.
//load screen on button click
document.getElementById("startButton").onclick = function() {
load()
};
function load() {
//create the new screen
newWindow = window.open("", "", "width=1550, height=800");
newWindow.id = "game";
newWindow.document.body.style.backgroundColor = "#000000";
newWindow.document.body.style.backgroundImage = "url(bg.jpg)";
}
The files and images are located in the same folder, I'm using the same image, it works in the first example but not the second.
Please help!!! Thanks in advance.
Check this link and click on Run
https://www.w3schools.com/code/tryit.asp?filename=GM9IO9Q6SDNL
try this.
<!DOCTYPE html>
<html>
<body onload="setBackground()" >
</body>
<script>
function setBackground() {
document.body.style.backgroundImage = "url(https://www.w3schools.com/html/pic_trulli.jpg)"
newWindowSetBackgroundload()
}
function newWindowSetBackgroundload() {
//create the new screen
var newWindow = window.open("", "", "width=1550, height=800");
//Id use for Uniq thats why its render only one time
// newWindow.id = "game";
//use class for multiple windows genration
newWindow.class = "game";
newWindow.document.body.style.backgroundColor = "#000000";
newWindow.document.body.style.backgroundImage = "url(https://www.w3schools.com/html/pic_trulli.jpg)";
}
</script>
</html>
I have use fabric js and set one canvas with background image.
Now i want to change color of image that i have set in my canvas background.
For example Image with 3 different colors. but i want change only one color area and invert another color.
It's Possible to do with canvas ? and How ? if any knows pls help me
My Level as learner in canvas and javascripts.
My Code is here.
var canvas = new fabric.Canvas('imagesection');
jQuery(document).ready(function(){
$('a').click(function(){
getImagebg();
});
});
function getImagebg()
{
var source = $('a.view-link.active').attr('data-src');
var image = new Image();
image.onload = function () {
canvas.setWidth(image.width);
canvas.setHeight(image.height);
canvas.setBackgroundImage(f_img);
canvas.renderAll();
var f_img = new fabric.Image(image);
canvas.setBackgroundImage(f_img);
canvas.renderAll();
}
image.src = source;
}
/*For Change Color of image section*/
$('#colorchange').click(function(){
ChangeColor();
});
function ChangeColor(){
/*Change Color code sholud be like this.*/
}
Old
Before change colors
New
After change color
maybe this link might help it uses the same technique you are using
link to solution
I have an imagemap of the Netherlands with an overlay effect on some of the areas. I can accomplish this effect in multiple ways:
1) Load every image. Set all but 1 image on 'display:none' and run JS (onMouseOver(str)) to display the image that one has the mouse on and hide all others.
css:
.verberg {
display: none;
}
JS:
var nederland = $('#Nederland');
var map1= $('#Friesland');
var map2= $('#Groningen');
var map3= $('#Drenthe');
var allmaps = $('.kaartje');
function mapOnMouseOver(str) {
var kaartnamen = ['Nederland', 'Friesland','Groningen', 'Drenthe']
var imgnamen = [nederland, map1, map2, map3]
var i = kaartnamen.indexOf(str);
if (i > -1) {
elementje = imgnamen[i];
allmaps.addClass('verberg');
elementje.removeClass('verberg');
}
}
2) Load one image and use JS (onMouseOver(str)) to change the source of the image.
JS:
function mapOnMouseOver(str) {
var kaartnamen = ['Nederland', 'Friesland','Groningen', 'Drenthe']
var urlsrc = ['nl.png','fr.png','gr.png','dr.png']
var i = kaartnamen.indexOf(str);
if (i > -1) {
newsrc = urlsrc[i];
$("#Nederland").attr("src","http://xxxxxxx/maps/"+ newsrc);
}
}
When I use the first method, everytime I load the page the image blinks when I hover an area for the first time. If I hover that area for a second time it doesn't until I reload the page again.
When I use the second method the image never blinks.
Can someone explain this different behaviour to me? I find it a bit counterintuitive. With the first method every image is already loaded, while with the second method the images are loaded when the mouse is on a specific area. It seems to me that the first method must be smoother, but it isn't...
I have this code:
<script type="text/javascript">
var aImages = [
"images/gaming/GTAV/GTAVReviewImage1.jpg",
"images/gaming/GTAV/GTAVReviewImage2.jpg",
"images/gaming/GTAV/GTAVReviewImage3.jpg",
"images/gaming/GTAV/GTAVReviewImage4.jpg",
"images/gaming/GTAV/GTAVReviewImage5.jpg",
"images/gaming/GTAV/GTAVReviewImage6.jpg",
"images/gaming/GTAV/GTAVReviewImage7.jpg"];
var oImage = null;
var iIdx = 0;
function play() {
try {
if (oImage===null) { oImage=window.document.getElementById("review-images"); }
oImage.src = aImages[(++iIdx)%(aImages.length)];
setTimeout('play()',5000);
} catch(oEx) {
}
}
</script>
which changes the image on this page: http://chrisbrighton.co.uk/GTAV.php every five seconds.
How can I add image transition to it?
UPDATE: When I add -webkit-transition to the img tag nothing happens.
Thanks.
There are different ways to do it. A lot of people have went to CSS3 now that there is some really cool animating and transition effects... You can control your ccs3 effects using javascript. For a detailed tutorial check - controlling animations with javascript
I am designing a web application.To make it more attractive i thought of having beautiful background in my webpage that changes periodically.I know this came be done in JavaScript. But how to synchronize,so that the DOM changes background at specific time.Suggest me some a function for this..
LIVE DEMO
var images = [
"car.jpg",
"cow.jpg",
"pig.jpg"
],
c = 0,
intv;
for(var i =0; i< images.length; i++){
var img = new Image().src = images[i]; // Preload all images
}
intv = setInterval(function(){
document.body.style.backgroundImage = "url("+ images[++c%images.length] +")";
}, 2500);
Than if you want to stop rolling your interval you can do like:
clearInterval( intv );
Best Soln using JQ ,
jQuery fade to different background images for body set by interval set by a specific folder
Try
1)html5 change background image interval time
2)Change body background of page interval