I have three images: the first is a light switch, the second is an "off" light bulb and the third is an "on" light bulb. When a user clicks on the light switch image, I would like it to change the "off" light bulb image into the "on" light bulb image. Is this possible?
These are the images:
Javascript:
img2=new Image();
img2.src="images/RCS/lightbul2-250.gif";
img3=new Image();
img3.src="images/RCS/lightbuld1.gif";
function changeImage() {
document.getElementById('myImage').src=img2.src;
}
function changeImage2() {
document.getElementById('myImage').src=img3.src;
}
HTML:
<img id="myImage" onmouseover="changeImage()" onmouseout="changeImage2()" border="0" width="250" height="141" src="images/RCS/lightbulb1-100.gif">
You can achieve this with JQuery
$(document).ready(function(){
$('#switch').click(function(){
$('#bulb').attr('src', 'bulbOn.jpg');
});
});
Just give your switch image an ID of 'switch' and your original bulb image an id of 'bulb'.
You can also achieve this without JQuery by using if/else statements.
HTML Markup:
<img src="lightSwitch.jpg">
<img id="myImage" src="lightOff.jpg">
Javascript:
function changeImage() {
if(document.getElementById('myImage').src == 'lightOff.jpg') {
document.getElementById('myImage').src = 'lightOn.jpg';
} else if(document.getElementById('myImage').src == 'lightOn.jpg') {
document.getElementById('myImage').src = 'lightOff.jpg';
}
}
JS Fiddle Example
Yeah, just attach a class to the lightswitch image and do something like this:
HTML MARKUP:
<img src="http://i.stack.imgur.com/wLSuu.gif" class="lightswitch">
<div id="container">
<div id="bulb" class=""></div>
</div>
CSS:
.toggle-off { display: none; }
#bulb { height: 100%; width: 100%; background: url('http://i.stack.imgur.com/l9EOR.gif')
center center no-repeat; }
.bulb-on { background: url('http://i.stack.imgur.com/TnKyp.gif') center center no-repeat
!important; }
.lightswitch { float: left; }
.clear { clear: both; }
#container { width: 300px; height: 300px; float: right; }
THEN USE JQUERY:
$('.lightswitch').click(function() {
$('#bulb').toggleClass('bulb-on');
});
Basically what this is doing is: once the lightswitch picture is clicked, it is checking to see if either the ID of BULB has a class of "bulb-on". If it doesn't, it is adding it. If it does, it is removing it.
You may also want to style the lightswitch so that it has a hand cursor as if it is a link, like so:
.lightswitch { cursor: hand; cursor: pointer; }
JS FIDDLE HERE:
http://jsfiddle.net/SDRQU/
<script type="text/javascript">
function altsrcImg(cnImage) {
var src = document.getElementById(cnImage).src;
var alt = document.getElementById(cnImage).alt;
document.getElementById(cnImage).src = alt;
document.getElementById(cnImage).alt = src;
}
</script>
<img id="cnImage" src="TnKyp.gif" alt="l9EOR.gif"><br>
<img id="cnImage" onClick="altsrcImg(this.id)" src="wLSuu.gif">
I am using a general javascript I wrote to flip between image specified as src and another specified as alt.
The above script works. See this.
However if I change the image order it does not work.
Probably because there is now two src associated with id="cnImage".
I am still learning the basics of JavaScript.
<img src="../switch1.png" id="switch1" onclick="ON(1)"> <img
src="../switch2.png" id="switch2" onclick="OFF(0)"> <img
src="../lighON.png" id="ON"> <img src="../lighOFF.png" id="OFF">
<script> function ON(X){ if(X=1) { document.getElementById("ON").style.display=block;
document.getElementById("OFF").style.display=none;
document.getElementById("switch1").style.display=block;
document.getElementById("switch2").style.display=none; }else{
document.getElementById("ON").style.display=none;
document.getElementById("OFF").style.display=block;
document.getElementById("switch1").style.display=none;
document.getElementById("switch2").style.display=block; } y=0;
</script>
css
#ON,#OFF{position:absolute;top:30px;left:30px;width:50px; height:50px;}
#switch1,#switch2{position:absolute;top:30px;left:330px;width:50px; height:50px;}
#OFF,#switch2{dispay:none;}
Related
I have multiple images, say image A, image B and image C. When I click image A I want it to enlarge. When I then click on image B I want image A to revert back to its original size and B to enlarge.
Here is the codepen im working off: https://codepen.io/anon/pen/BWXrEv
Help would be much appreciated.
Html Code:
<img class="image" src="http://images.e-flux-
systems.com/646a999d89943180a9b4916b17fd7bac.jpg,2000" alt="" />
<img class="image" src="http://images.e-flux-
systems.com/2012_09_01the_internet.jpg,1440" alt="" />
Css:
.image {
width: 150px;
}
.image.enlarge {
width: 600px;;
}
JS:
$(document).ready(function() {
$('.image').click(function() {
$(this).toggleClass('enlarge');
});
});
I think a quick fix is to remove the .enlarge class from all images before adding the class to another image. Try this:
$(document).ready(function() {
$('.image').click(function() {
$('.image').removeClass('enlarge');
$(this).addClass('enlarge');
});
});
Hopefully this works!
Also, you have an extra semicolon in your CSS, so watch out for that!
First you have to remove the existing .enlarge class from all of the existing element where class name is .image if any and add the .enlarge class only on the current clicked element.
$(document).ready(function() {
$('.image').click(function() {
$(".image").removeClass('enlarge');
$(this).toggleClass('enlarge');
});
});
.image {
width: 150px;
}
.image.enlarge {
width: 600px;
;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img class="image" src="http://images.e-flux-systems.com/646a999d89943180a9b4916b17fd7bac.jpg,2000" alt="" />
<img class="image" src="http://images.e-flux-systems.com/2012_09_01the_internet.jpg,1440" alt="" />
I want to change the size of an image when a button is clicked. I have following code:
HTML:
<img id="pizzaImage" src="img/pizza.png" alt="pizza">
JS:
var pizzaImage = document.getElementById('pizzaImage');
Button.onclick = function () {
pizzaImage.classList.add('changeSize');
};
CSS: (how the .changeSize should look like:)
img {
width: 20%;
}
classList.add() adds a class to the element. So img.classList.add('changeSize'); adds the class changeSize to the image that you have selected, making the HTML for it look something like:
<img src="URL" class="changeSize" />
To make the image grow bigger with that class, you can use the CSS selector img.changeSize
The final code could look something like this:
document.querySelector("#changeImgSizeBtn").addEventListener('click', function () {
var img = document.querySelector("#imgID");
img.classList.add('changeSize');
});
img {
max-width: 150px;
}
img.changeSize {
max-width: 300px;
}
<img src="https://i.imgur.com/FrVmtJl.jpg" alt="cat img" id="imgID" />
<br />
<button id="changeImgSizeBtn">Change image size</button>
you could try this:
Button.onclick = function () {
var img= document.getElementById('yourImgId');
if(img && img.style) {
img.classList.add("newStyle");
}
};
the html for the image would be:
<img src="src" id="yourImgId"/>
Add this CSS as well:
.newStyle {
width: 100px;
height: 200px;
}
Try adding a .changeSize class to your css:
.changeSize {
width: 50%;
}
OR
img.changeSize {
width: 50%;
}
I am getting a preload box for a img tag from the code below.
<script>
document.addEventListener('DOMContentLoaded', function(){
load()
}, false);
function grab(){
var urlsource = document.getElementById("image").value="";
return urlsource.length > 0;
}
function load(){
var imgurl = document.getElementById("image").value;
document.getElementById("replace").src=imgurl;
return imgurl.length > 0;
}
</script>
<style>
div.output {
height: 200px;
width: 200px; }
img#replace {
display: none;
}
img#replace[src]{
height: 150px;
width: 150px;
position: absolute;
display: inline-block;
}
</style>
</head>
<body>
<textarea id="image" onload="grab();" onkeyUp="load();" onkeyPress="load();"></textarea><br>
<a id="demo1" href="https://www.google.co.nz/">
<div class="output">
<img id="replace"/>
</div>
</a>
</body>
How the preload image can be removed while keeping the DOMContentloaded event? Thanks very much!
Every <img/> must have a src. If it does not, it's treated as broken.
Give it a src, even if that means creating a 1x1 transparent GIF pixel.
<img id="replace" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" />
EDIT: On closer inspection, it seems that your code is immediately running when the document has loaded, with the code effectively reading:
image.src = ""; // because the textarea is empty
Of course, this is not a valid image, but it is still an image, so it appears as a broken one. You may want to add an onerror event to the image to hide it if it fails to load.
<img id="replace" onerror="this.removeAttribute('src');" />
(This should work because of your CSS hiding source-less images)
I've got a bunch of images, on click I want the images to turn white emulating some kind of fade effect. So you click it and for 1 second it fades from the original image to just white. I also need it to turn back to the original image when the user clicks something else.
Is this possible with JavaScript? - If so what should I be looking at (I'm really bad with graphics).
I've had a go at trying this with opacity but I don't want the background to be visible behind the image
Psuedo-element Solution
You could use a wrapper with a pseudo-element to overlay what you're looking for -- and the animations are handled by a toggled CSS class (which is ideal for performance).
CodePen Demonstration
HTML
<div class="whiteclicker">
<img src="http://lorempixel.com/400/200" alt=""/>
</div>
SCSS
#import "compass/css3/transition";
body { background: gainsboro; text-align: center; }
.whiteclicker {
display: inline-block;
position: relative;
&::after {
content: "";
display: block;
position: absolute;
top:0; left:0; right:0; bottom:0;
background: white;
opacity: 0;
#include transition(opacity 1s ease);
}
&.active::after {
opacity: 1;
}
}
JS
$('.whiteclicker').click(function(){
$(this).toggleClass('active');
});
To ameliorate the Spencer Wieczorek solution (the way two seems to be the best solution on my opinion) :
What about creating the white div on the fly (and fade it in and out) instead of put it in the html code ?
See the fiddle.
$("#myImage").click(function(){
$(this)
.parent().css({position:'relative'}).end()
.after($('<div>')
.hide()
.css({position:'absolute'
, top: $(this).position().top
, left: $(this).position().left
, width: $(this).width()
, height: $(this).height()
, background: '#FFF'
})
.fadeIn('fast')
.on({
click : function(e){
$(this).fadeOut('fast', function(){ $(this).remove();});
}
})
);
});
Then, you don't have anything to add to the html code or in the css styles, Jquery does everything.
#Spencer Wieczorek : I did my own answer, because I did not agree with your way of designing the css style (the fixed position is really not good, especially if the page is scrolled for example...). Mine is more ... standalone-y ;)
You might want to try having two images stacked on each other.
See this:
<script type="text/javascript">
var image1 = '<img class="images" src="Image 1" onClick="switch();" />';
var image2 = '<img class="images" src="Image 2" onClick="switch();" />';
var currentImage = 1;
function switch(){
if(currentImage==1){
currentImage++;
document.getElementById("image").innerHTML = image2;
}
if(currentImage==2){
currentImage--;
document.getElementById("image").innerHTML = image1;
}
}
</script>
<style>
.images{ position:fixed; top: 0; left: 0; }
</style>
<img class="images" src="Black image" />
<div id="image"><img class="images" src="Image 1" onClick="switch();" /></div>
For the fade I'm just gonna see how you could do it.
EDIT:
<script type="text/javascript">
var fadecount = 100;
function fade() {
document.getElementById("imageToFade").style.opacity = fadecount;
fadecount--;
if(fadecount==0){
clearTimeout(fade);
}
}
function start_fade(){
var fade = setTimeout(fade(), 10);
}
</script>
With Base 64 you can just have the binary version of the picture and then an all white picture and based on the .click you reassign the src to the white base64...
document.getElementById("img").src = "data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg=="
just change to the all white version after the click, technically js driven from click event, and doesn't involve two different elements existing just at different layers...
I have 3 images that I want to rotate when a button is clicked.
image1, image2, image3.
If the image is at image1, then when clicked it should show image2 (and so on, in order of image1, .., image3).
When I am at image3, it should then hide the image, i.e. don't display it.
I need some help with the javascript function to do this, I already have the code for the button click event.
I am passing the toggle() function the jquery object $('myImageID');
$(document).ready(
function()
{
$('#button1').click( function() { toggleSector( $('#sector1') ) } ;
}
);
function toggleSector(o)
{
// help!
}
<div id="sector1"></div>
<input type="button" id="button1" value="Sector 1" />
Update
I have to somehow find the name of the current background image set to the
<div> where my image is.
Is there a background property to get the image name currently being displayed?
You can get a background-image by accessing it from the .css(name) method:
$("#sector1").css("background-image");
Without managing your list of images in an array or some other fashion, you're going to have to check each background-image to know when it's time to hide your element. This isn't a great way of working, as it doesn't allow you to easily add a new image in the future if you like.
Perhaps something like the following:
function toggle(el) {
var whenToHide = "background3.jpg";
var currBackground = $(el).css("background-image");
/* ...code... */
if (currBackground == whenToHide) {
$(el).remove();
}
}
Do you have to use the background image?
If not, here's a little code sample for what I would do.
<html>
<head>
<style type="text/css">
#imageRotater { list-style-type:none; }
#imageRotater, .imageRotater li { margin:0px auto; padding: 0px; }
#imageRotater img { display:none; }
</style>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.min.js"></script>
<script type="text/javascript">
(function($) {
$.fn.rotate = function() {
return this.each(function() {
var list = $(this).is('ul') ? $(this) : $('ul', this);
list.find('img:eq(0)').show();
$('img', list).click(function() {
$(this).hide().closest('li').next().find('img').show();
});
});
};
})(jQuery);
$(document).ready(function() {
$("#imageRotater").rotate();
});
</script>
</head>
<body>
<div id="sector1">
<ul id="imageRotater">
<li><img src="image1.png" alt="" /></li>
<li><img src="image2.png" alt="" /></li>
<li><img src="image3.png" alt="" /></li>
</ul>
</div>
</body>
</html>
Here's a thing that works.
Each overlay is initially hidden with CSS. Each time your button is clicked, all the overlays are hidden, then one is revealed based on some data stored on the button. If the data reaches the max number overlays + 1, none are shown and the data is reset to 0.
Markup
<div id="container" style="background: yellow">
<div class="overlay" style="background: red"></div>
<div class="overlay" style="background: green"></div>
<div class="overlay" style="background: blue"></div>
</div>
Style
div{
width: 100px;
height: 100px;
}
.overlay{
position: absolute;
top: 0;
left: 0;
display: none;
}
#container{
position: relative;
}
Script
$(function() {
var b = $('#button1');
b.data('next', 0);
b.data('max', $('.overlay').size()+1 );
b.click( function( e ) {
var next = $(this).data('next');
var o = $('.overlay');
o.hide();
o.eq(next).show();
next = (next+1) % $(this).data('max');
$(this).data('next', next);
});
});
In response to Bendeway's answer above, you'll need to insert before
list.find('img:eq(0)').show();
the following line:
list.find('img').hide();
This will hide all the images before it starts rotating through them.