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');
}
Related
i want to flip between two images by clicking on the image itself. help me with the code(i want the most simplified answer, very new learner)
function changeImage(){
var img = document.createElement('img')
img.src =="images/pic2.jpg"
let displayImage = document.getElementById('first')
if (displayImage.getAttribute("src") =="images/pic.jpg") {
document.getElementById('first').appendChild(img);
}
}
You can just change the src attribute of the image.
function switchImage () {
let element = document.getElementById("myImg")
if (element.src == "https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/Chamomile%40original_size.jpg/367px-Chamomile%40original_size.jpg") {
element.src = "https://upload.wikimedia.org/wikipedia/commons/thumb/f/f1/Aquilegia_vulgaris_100503c.jpg/420px-Aquilegia_vulgaris_100503c.jpg"
} else {
element.src = "https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/Chamomile%40original_size.jpg/367px-Chamomile%40original_size.jpg"
}
}
<img id="myImg" src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/Chamomile%40original_size.jpg/367px-Chamomile%40original_size.jpg" onclick="switchImage()" />
I have a series of expandable drop-down tabs using the ToggleList javascript function below. When the tab is closed I would like to display expand.png and when it's open I would like to display close.png. Right now Any help would be appreciated.
The code below expands\minimizes the dropdown tabs, but is not switching the png files.
Full javascript + html:
<script type="text/javascript">
function ToggleList(IDS) {
HideRange('ulist','div',IDS); // not required unless using 'HideRange()' below
var CState = document.getElementById(IDS);
if (CState.style.display != "block") { CState.style.display = "block"; }
else { CState.style.display = "none"; }
// get a reference to the image contained in the <a> that was just clicked
var img = this.getElementsByTagName('img')[0];
// switch the graphic, if it's expand set it to collapse, otherwise expand
img.src = img.src == "expand.png" ? "minimize.png" : "expand.png";
}
function HideRange(sect,elTag,IDS) {
var ContentObj = document.getElementById(sect);
var AllContentDivs = ContentObj.getElementsByTagName(elTag);
}
</script>
<ul id="ulist">
<li><p><img src="expand.png"/> Subject</p></li>
<div id="expand0" class="divInfo">Text</div>
<li><p><img src="expand.png"/> Subject</p></li>
<div id="expand1" class="divInfo">Text</div>
<li><p><img src="expand.png"/> Subject</p></li>
<div id="expand3" class="divInfo">Text</div>
</ul>
Here's a simple way to implement that - comments in the code
function ToggleList(IDS) {
HideRange('ulist','div',IDS); // not required unless using 'HideRange()' below
var CState = document.getElementById(IDS);
if (CState.style.display != "block") { CState.style.display = "block"; }
else { CState.style.display = "none"; }
// get a reference to the image contained in the <a> that was just clicked
var img = this.getElementsByTagName('img')[0];
// switch the graphic, if it's expand set it to collapse, otherwise expand
img.src = img.src == "img/expand.png" ? "img/collapse.png" : "img/expand.png";
}
I am trying to toggle between two images I have in a folder via an onclick function. Currently my code does not toggle the image and I am getting no console errors, so I don't know why the toggle is not occurring. my folders look like this:
program-01
program01.index
program01javascript
program01script.js
program01css
images
LightOff.png
LightOn.png
HTML
<div>
<img src="images/LightOff.png" id="light" onclick="DateTime(); imageSwap();" />
<p id="date_time"></p>
</div>
Javascript
function imageSwap(){
var img = document.getElementById("light") ;
if (img.src == "images/LightOff.png"){
img.src = "images/LightOn.png";
} else {
img.src = "images/LightOff.png";
}
}
I believe it has have something to do with my file path and or something to do with the .src property, but unsure of exactly what the issue is.
How about this ?
img.src will return absolute url, I would suggest you to play with the flags instead of image src
var status = false;
function imageSwap() {
var img = document.getElementById("light");
if (!status) {
img.src = "images/LightOn.png";
status = true;
} else {
img.src = "images/LightOff.png";
status = false;
}
}
Or doing it your way, use getAttribute
function imageSwap(){
var img = document.getElementById("light") ;
if (img.getAttribute('src') == "images/LightOff.png"){
img.src = "images/LightOn.png";
} else {
img.src = "images/LightOff.png";
}
}
I have set of images named as img1, img2, img3, img4,......., imgx. So, I want to code a JavaScript to display an image img1 at document.onload() and on first click image to be changed to img2 next on second click the image to be changed at img3 and then same to the next image on every NEXT button click. In this manner I need even PREVIOUS button to go back to the previously viewed images.
How to implement this?
var currentImage = 1;
window.onload = function() {
showImage();
};
document.getElementById("next").onclick = function() {
currentImage++;
showImage();
}
function showImage() {
document.getElementById("image").src = "img" + currentImage + ".jpg";
}
These are the basics and should help you get started. If you need help implementing the rest, ask us what you want to do specificially and what you tried. Hint, you'll need to handle the case where there is no "next" image to show. Do you want it to come back to the beggining or just not work?
<script type="text/javascript">
var images = new Array("img/image1.jpg", "img/image2.jpg", "img/image3.jpg");
var cur_image = 0;
function goNextImage() {
var img = document.getElementById('image');
cur_image++;
if (cur_image == images.length) {
cur_image = 0;
}
img.src = images[cur_image];
}
</script>
<img src="img/image1.jpg" id="image" onclick="goNextImage()" />
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/