Javascript/ I am stuck with changing back to the original background - javascript

I am learning JavaScript and am now doing a homework assignment.
I need to find how to remve a background image from an element after the mouse leaves the element.
I wrote the function code, Dogimgleave(), and it does not update the HTML.
Here is the code, please help me...
<img class=size src = "Images/Dog.jpg" alt="Dog!" onmouseover="Dogimgon()" onmouseleave="Dogimgleave()">
function Dogimgon(){
document.getElementById("centertext").style.backgroundImage="url('Images/Dog.jpg')";
}
function Dogimgleave() {
document.getElementById("centertext").style.backgroundColor="#65F0B6";
}

You're leaving the background image set as an image, so you won't see the background colour. You can clear the image like this...
function Dogimgleave() {
var ct = document.getElementById("centertext");
ct.style.backgroundImage = ""; // this removes the background image
ct.style.backgroundColor="#65F0B6";
}

If you set the backogrund-image and background-color simultaneously one will cover the other one. You should have only one of them set at any time:
var elem = document.getElementById("centertext");
function Dogimgon(){
elem.style.backgroundImage = "url('Images/Dog.jpg')";
elem.style.backgroundColor = "";
}
function Dogimgleave() {
elem.style.backgroundImage = "";
elem.style.backgroundColor = "#65F0B6";
}
This can be of course simplified to setting just the background property:
var elem = document.getElementById("centertext");
function Dogimgon(){
elem.style.background = "url('Images/Dog.jpg')";
}
function Dogimgleave() {
elem.style.background = "#65F0B6";
}
Or alternatively you may have color always set (it would be visible through transparent parts of the image however) and alter only the image:
var elem = document.getElementById("centertext");
elem.style.backgroundColor = "#65F0B6";
function Dogimgon(){
elem.style.backgroundImage = "url('Images/Dog.jpg')";
}
function Dogimgleave() {
elem.style.backgroundImage = "";
}
By the way, unless you task is to do that exactly in JavaScript, you may easily achieave the same result with pure CSS:
#centertext {
background: #65f0B6;
}
#centertext:hover {
background: url('/Images/Dog.jpg');
}

Related

how to change an image based on an if statements requirements

var mpegArray = ["1.m4a", "2.m4a", "3.m4a", "4.m4a", "5.m4a", "6.m4a", "7.m4a", "8.m4a", "9.m4a", "10.m4a"];
var choice = Math.floor(Math.random() * mpegArray.length);
function btnPlay_onClick() {
var player = document.getElementById('sound');
player.src = mpegArray[choice];
player.play();
player.addEventListener('ended', function () {
if (player.ended) {
mpeg();
}
}, true);
}
function btnN1_onClick() {
var Audio1 = document.getElementById("audio1");
Audio1.play();
if (choice == 0) {
document.getElementById("btnN1").src = "1GR.gif";
ans.innerText = CORRECT;
}
else
document.getElementById("btnN1").src = "1RD.gif";
ans.innerText = INCORRECT;
}
hiya the code here is meant to get number tiles to change colour based on if the requirements of the if statements are met. here the if statement is asking if button 1 is pressed after the audio file 1.m4a is played change the colour of he tile to green if not change it to red
You might be better served changing the css with a background colour/image instead of the src attribute.
document.getElementById("btnN1").style.backgroundColor = "green";
or
document.getElementById("btnN1").style.backgroundImage = "url('1GR.gif')";
EDIT: GiaFil7 is right. You're missing a closing } after the second if statement which might be causing your issue.

Trying to enlarge images on an HTML page

I'm new to coding and am trying to enlarge an image onclick and then un-enlarge an image onclick, using JavaScript. I've tried using jQuery but jQuery doesn't seem to work so I'm simply using JavaScript.
This is the JavaScript:
var myImg1 = document.getElementById('myImg1')
var myImg2 = document.getElementById('myImg2')
var myImg3 = document.getElementById('myImg3')
myImg1.onclick = function() {
if (myImg1.style.height = '100px') {
myImg1.style.height = '1000px'
return
} else {
myImg1.style.height = '100px'
return
}
}
The image has the class assigned 'i' in HTML and CSS, which sets the width as 100px.
The code does successfully enlarge the image to 1000px but it doesn't un-enlarge.
I've tried quite a few different methods, but mostly with jQuery and I can't get jQuery to work.
you need to use 2 equal signs to compare two things, one equal sign means you are trying to set a value for that variable.
if (myImg1.style.height == '100px') {
myImg1.style.height = '1000px'
// return
}
as Pato Salazar mentioned in the comments the return statement isn't needed.
JavaScript:
var myImg1 = document.getElementById('Img1');
myImg1.onclick = function() {
if (myImg1.style.height == '1000px') {
myImg1.style.height = '100px';
} else {
myImg1.style.height = '1000px';
}
}
OR
jQuery:
jQuery(document).ready(function() {
jQuery('#Img1').click(function() {
jQuery('#Img1').toggleClass('img1_1000px');
});
});
Both work. If you need jQuery, use to write < img src="Img1.jpg" id="Img1" style="height: 100px;" > and .img1_1000px { height: 1000px!important; } in style.
I hope I helped you.

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;

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');
}

Linking background colour change [css] to background image change [javascript]

I'm using the following code to change the background image when the page is refreshed
function changeImg(imgNumber) {
var myImages = ["../img/background_tile.png", "../img/background_tile_blue.png", "../img/background_tile_green.png", "../img/background_tile_purple.png"];
var newImgNumber =Math.floor(Math.random()*myImages.length);
document.body.style.backgroundImage = 'url('+myImages[newImgNumber]+')';
}
window.onload=changeImg;
Now I'm trying to make the CSS background-color change to the color of the image so that when the page is refreshed it doesn't flash white before it loads.
Website - http://lauramccartney.co.uk
Edit - I worked it out guys! I used this
function changeImg(imgNumber) {
var myImages = ["../img/background_tile.png", "../img/background_tile_blue.png", "../img/background_tile_green.png", "../img/background_tile_purple.png"];
var myColors = ["#d1261e", "#6167e6", "#3db322", "#a12cbb"];
var newImgNumber =Math.floor(Math.random()*myImages.length);
document.body.style.backgroundImage = 'url('+myImages[newImgNumber]+')';
document.body.style.backgroundColor = myColors[newImgNumber];
}
window.onload=changeImg;
Didn't make much of a difference so I also adjusted the background in the css to an inoffensive grey.
How about this :
Instead of just storing the img path, store it like color url('url-to-image'), and use that as the background while calling it.
So your array would look like : ['color1 url(url-1)', 'color2 url(url-2)', ...] and change the javascript to use document.body.style.background = array[array-index];
/*Makes background image change when refreshed*/
function changeImg(imgNumber) {
var myImages = ["red url(../img/background_tile.png)", "blue url(../img/background_tile_blue.png)", "green url(../img/background_tile_green.png)", "orange url(../img/background_tile_purple.png)"];
var newImgNumber =Math.floor(Math.random()*myImages.length);
document.body.style.background = myImages[newImgNumber];
}
window.onload=changeImg;
It's always better to delegate styling to css classes, like this:
theme.css:
.theme-1 {
background:red url(../img/background_tile.png);
}
.theme-2 {
background:green url(../img/background_tile_green.png);
}
.theme-3 {
background:orange url(../img/background_tile_purple.png);
}
apply-theme.js:
/* Apply random class to body */
function setRandomTheme() {
var styles = ["theme-1", "theme-2", "theme-3"],
random = Math.floor(Math.random() * styles.length);
document.body.className += ' ' + styles[random];
}
And if you want to change background instantly, without flash of unstyled content, call setRandomTheme right before closing body tag:
<body>
<p>La-la-la, some content</p>
… skipped some code …
<script type="text/javascript">setRandomTheme();</script>
</body>
Or from DOMContentLoaded event:
just add this to apply-theme.js after setRandomTheme declaration:
document.addEventListener('DOMContentLoaded', function () {
setRandomTheme();
});

Categories