Javascript BG Image Change - javascript

My site has a background that looks cool, but might impair usability (and it burns if you look at it too long) so I want a link that changes/removes background image with javascript. I've googled it, but can't find something that works.
Is there a way to make a link like [a href="javascript:???????"]remove bg[/a]?

If your background image is NOT specified in the body tag.
<script type="text/javascript">
var img = document.getElementById('your image ID');
var shown = true;
function toggleImg(){
if(shown == true){
img.style.display = "none";
shown = !shown;
}else{
img.style.display = "";
shown = !shown;
}
}
</script>
If your background image is specified in the body tag.
<script type="text/javascript">
var imgSrc = "your image source"
var shown = true;
function toggleImg(){
if(shown == true){
document.body.background = "";
shown = !shown;
}else{
document.body.background = imgSrc;
shown = !shown;
}
}
 
remove bg

function removeBackgroundImage()
{
document.body.background = "";
}
Change Background

Since you don't tell us how you put in your background image (ie. the html/css markup) it's difficult to give you an accurate answer.
javascript:var f=eval("document.getElementsByTagName('BODY')[0].style.backgroundImage='inherit';");

You could use jQuery CSS function.
$('#removebg').click(function(){
$('body').css("backgroundImage","yoururl");
});
<a id="removebg">removebg</a>
http://api.jquery.com/css/

Related

Changing the src of an image with JavaScript does not cause the image to change

I am trying to toggle an image if I click on it. The JavaScript does seem to replace the image, however, the updated image does not appear on the screen. Here is my HTML code:
<!DOCTYPE html>
<html>
<script src="myscript.js" defer></script>
<div><img id="light" src="images/light_off.png" width="200px"></div>
</html>
and my JavaScript code:
var light_src = document.getElementById('light').src;
var image = light_src.substring(light_src.lastIndexOf("/")+1);
light.addEventListener("click", function(){
if (image == "light_off.png"){
alert("1");
light_src = "file:///H:/mydir/images/light_on.png";
}
else {
alert("2");
light_src = "file:///H:/mydir/images/light_off.png";
}
});
The source does seem to be changing because each time I click on the image, the alert toggles between 1 and 2. However, the image does not appear to change on the screen.
I have verified that both images work by copying the URL into the browser address bar.
What am I doing wrong?
The problem is that you're changing the value of light_src, not the element's source. In other words, light_src is a copy of the source, and changing it does not change the images source.
Instead of storing the source in a variable, you should just store the image element, like this:
// The image URLs
const imageOn = 'file:///H:/mydir/images/light_on.png'
const imageOff = 'file:///H:/mydir/images/light_on.png'
// Store the image element to use later
const imageElement = document.getElementById('light')
// Add the event listener
imageElement.addEventListener("click", function() {
if (imageElement.src === imageOn) {
imageElement.src = imageOff
console.log('Switched light off')
} else {
imageElement.src = imageOn
console.log('Switched light on')
}
});
Dont use .src with the selector
var light=document.getElementById('light');
var image = light.src.substring(light.src.lastIndexOf("/")+1);
light.addEventListener("click", function(){
if (image == "light_off.png"){
console.log(light.src);
light.src = "file:///H:/mydir/images/light_on.png";
}
else {
console.log(light.src);
light.src = "file:///H:/mydir/images/light_off.png";
}
});
<!DOCTYPE html>
<html>
<script src="myscript.js" defer></script>
<div><img id="light" src="images/light_off.png" width="200px" alt="image"></div>
</html>

I'm having a bit of trouble with the Javascript Onclick event when trying to toggle between images

So for one of my labs, I'm trying to get a blurred image with one src to appear as a clear image from a different source. So far I've only managed to change the blurred image to the clear image, but not the other way around.
So far, I have the if statement and a string indexOf as a part of my lab requirements. Now bear in mind that by my instructions, I'm not allowed to edit any HTML for this project.
function toggleImages(){
//(document.getElementById("clickimage").src = 'images/lab9_blurred');
//console.log(str.indexOf("clickimage"));
//var images = 'images/lab9_blurred.jpg';
var str = "images/lab9_blurred.jpg";
console.log(str.indexOf("blurred"));
var str = "images/lab9_clear.jpg";
console.log(str.indexOf("clear"))
//click it once, it's true, click it again, it's false. That's what should happen. But how do we do that?
//If image = "images/lab9_blurred.jpg" then for variable image we get clickimage, set variable name to lab 9 clear, and set image source to name.
//if (fake == true){
if (str.indexOf("blurred") == 12){
var image = document.getElementById("clickimage");
var name = "images/lab9_blurred.jpg";
image.src = name;
console.log(str.indexOf("blurred"));
}
else if (str.indexOf("clear") == 12)
{
var image = document.getElementById("clickimage");
var name = "images/lab9_clear.jpg";
image.src = name;
console.log(str.indexOf("clear"));
}
};
window.onload = init;
Hi try following code...
function toggleImages(){
var image = document.getElementById("clickimage");
if (image.src.indexOf("blurred") == 12)
{
var str = "images/lab9_clear.jpg";
console.log(str.indexOf("clear"))
}
else
{
var str = "images/lab9_blurred.jpg";
console.log(str.indexOf("blurred"));
}
image.src = str;
};
window.onload = init;

How to toggle images

I am a programming fool,
All I need is to be able to toggle two images, one which acts as the 'up state' of a button and then 'onclick' the second image appears and remains until it is clicked again whereby it is replaced by the the 'upstate image'.
Please don't mock me for this pitifull attempt which fails miserably. Here is my code.
function change() {
if (window.document.pic.src == "imgd1.svg"){
window.document.pic.src ="imgd1over.svg";
}
else if(window.document.pic.src == "imgd1over.svg"){
window.document.pic.src ="imgd1.svg";
}
<img src ="imgd1.svg" name ="pic" id = "test" onclick ="change()"/>
Thank you in anticipation.
Check this demo.
function change(image) {
if (image.src.indexOf("imgd1.svg") > -1){
image.src ="imgd1over.svg";
}
else{
image.src ="imgd1.svg";
}
}
In the fiddle case the image.src wasn't just the image's name, but the full url: http://fiddle.jshell.net/_display/imgd1.svg. So I have used indexOf() to check if the image's source constains the string you want.
Besides, I have changed the way change() function references to the image:
<img src ="imgd1.svg" name ="pic" id = "test" onclick ="change(this)"/>
Using change(this) will set the own image as the first parameter of the event, so you don't need to get it in the window object or event with getElementById or whatever.
function change() {
var image = document.getElementById("test");
if (image.src.indexOf("imgd1.svg") > -1 ){
image.src = "imgd1over.svg";
}
else if(image.src.indexOf("imgd1over.svg") > -1 ){
image.src = "imgd1.svg";
}
}
Here is the working code:
<img src ="imgd1.svg" name="pic" onclick="change();"/>
<script>
function change() {
if (window.document.pic.src == "imgd1.svg"){
window.document.pic.src ="imgd1over.svg";
}
else if(window.document.pic.src == "imgd1over.svg"){
window.document.pic.src ="imgd1.svg";
}
}
<script>
See the full demo:
http://jsfiddle.net/jswsze5q/
Try this:
<script>
function change() {
var img1 = "imgd1.svg",
img2 = "imgd1over.svg";
var imgElement = document.getElementById('test');
imgElement.src = (imgElement.src === img1)? img2 : img1;
}
</script>
<img src="imgd1.svg" id="test" onclick="change();"/>
Example: jsfiddle
Try using Jquery
var flag = 0;
function change(){
if(flag){
$("#img").attr("src","img1.png");
flag = 0;
}
else{
$("#img").attr("src","img2.png");
flag = 1;
}
}
Simplest toggle option
where variable flag acts as flag which detects which image is active
img is the id of image control.
Code to include Jquery from google CDN
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

Changing img src on click with javascript

I need to change image when I click on it every time.
I added full path even it's not working.
<script type="text/javascript">
var imageon= document.getElementById("myElement");
function changeImage(){
if (imageon.src=="play1.gif"){
imageon.src="shutdown.png";
}
else if (imageon.src== "shutdown.png") {
imageon.src="play1.gif";
}
};
</script>
<img src="shutdown.png" id="myElement" onclick="changeImage();" style="width:95px"></img>
Javascript:
var pullImage=document.getElementById("change");
function changeImage(){
if (pullImage.src=="C:\Users\Srinivas\Downloads\Compressed\attachments_2\play1.gif") {
pullImage.src="C:\Users\Srinivas\Downloads\Compressed\attachments_2\stop1.png";
};
if (pullImage.src=="C:\Users\Srinivas\Downloads\Compressed\attachments_2\stop1.png"){
pullImage.src="C:\Users\Srinivas\Downloads\Compressed\attachments_2\play1.gif";
}
};
The problem is your path. I recreated the problem and i alerted the actual source which look like this:
You will either have to give the actual full path. Or you dont use the path as refrence, but a html reference. For example a hidden div with value 1 or 2 - for the used image
<div id="imgnumber">1</div>
<script>
var imagediv = document.getElementById("imgnumber");
var imageon= document.getElementById("myImg");
function changeImage(){
if (imagediv.innerHTML == "1"){
imageon.src="b.png";
imagediv.innerHTML = "2";
}
else if (imagediv.innerHTML == "2") {
imageon.src="a.gif";
imagediv.innerHTML = "1";
}
};
</script>
Please use below javascript and place it anywhere below tag you are using
<script type="text/javascript">
var imageon= document.getElementById("myElement");
function changeImage(){
var filename = imageon.src.replace( /^.*?([^\/]+)\..+?$/, '$1' );
if (filename=="play1"){
imageon.src="shutdown.jpg";
}
else if (filename== "shutdown") {
imageon.src="play1.jpg";
}
};
</script>
Using attr function you can change src of image :
$("#my_image").attr("src","second.jpg");
You can also create event eg. put thumbnail and on clicking load original image:
$('#my_image').on({
'click': function(){
$('#my_image').attr('src','second.jpg');
}
});

Show spinner while new image is loaded

The role of the script is to change image.jpg with newimage.gif and vice versa when clicked.
Now i want to add a spinner while the newimage.gif loads.
Something like 9gag.com/gif.
Can someone help me please?
This is the code:
html
<img src="/image.jpg" id="pic" onclick="change()"/>
<a id="first" href="/newimage.gif" style="display:none;"></a>
<a id="second" href="/image.jpg" style="display:none;"></a>
java
function change(){
var imag = document.getElementById('pic').src;
var img = imag.slice(-3);
var img1 = document.getElementById('second').href;
var imag2 = document.getElementById('first').href;
if(img == 'gif') {
document.getElementById('pic').src=imag2;
// here the newimage.gif changes to image.jpg
} else {
// here the image.jpg changes to newimage.gif
document.getElementById('pic').src=img1;
}
}
I found a kind of way, the only problem is that after the image.gif gets loaded the spinner still appears.
if(img == 'gif') {
document.getElementById('pic').src=imag2;
// here the newimage.gif changes back to image.jpg
document.getElementById("spinner").style.display = "none";
} else {
document.getElementById('pic').src=img1;
var image = new Image();
image.src = document.getElementById('second').href;
var x = image.complete;
if(x) {
document.getElementById("spinner").style.display = "none";
} else {
document.getElementById("spinner").style.display = "block";
}
}
}
This is here i use the script http://www.2lol.ro/load/poze_haioase_miscatoare/20?ref=stk
I have created a similar one and done it like this. May be it will help you as well
function load_bike(imgUrl){
old_url=$('#bike_img').attr('src');
$('#bike_img').load( function(){
$('.loading').css("display","none");
$('#bike_img').css("display","block");
}).attr('src', imgUrl);
$('.loading').css("display","block");
$('#bike_img').css("display","none");
}
You can show spinner, but to make it nice first you have to know the original file size or at least show it as bigger image. Without image your html element will have 0px heigh so even if you add a nice animation there you won't se it.
The best way to add and remove spinner is adding/removing a CSS class to element, for example :
var pic = document.getElementById('pic');
pic.onload = function() {
pic.className = '';
}
function change(){
imag = document.getElementById('pic').src;
var img = imag.slice(-3);
var img1 = document.getElementById('second').href;
var imag2 = document.getElementById('first').href;
var pic = document.getElementById('pic');
pic.className = 'loading';
if(img == 'gif') {
pic.src=imag2;
} else {
pic.src=img1;
}
}
This sample of code will set element class attribute "loading", and then when element is loaded it will remove the element class attribute.
Then you have to create your own css that can looke like that :
.loading {
background-image: url('URL_TO_IMAGE');
}

Categories