Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
This may be an easy question and I am over thinking it. I have a situation where I want to implement a Rollover effect.
I have Img1 which is a button. When a user hovers on Img1 another img in the container (Img2) will change to (Img3). When the user is no longer hovering over Img1 then Img3 will change back to Img2.
I hope that makes sense.
EDIT:
Thank you all for the help, it has been a pleasure knowing that there are so many people willing to help. I ended up choosing the answer that was simplest for me to use, so I apologize to offend anyone.
Here is my final answer (with code):
<!--SECTION 3-->
<!--////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<section id="s3">
<div class="container">
<img class="btn" id="btn" src="/common/<%=site_version%>/img/s3_order_btn.png" draggable="false" alt="">
<img class="bulb" id="bulb" src="/common/<%=site_version%>/img/s3_bulb_noglow.png" draggable="false" alt="">
</div>
</section>
<!--////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<!--END OF SECTION 3-->
<script>
$("#btn").hover(function(){
// when mouseover
$("#bulb").attr("src","/common/<%=site_version%>/img/s3_bulb_glow.png");
},
function() {
// when mouseout
$("#bulb").attr("src","/common/<%=site_version%>/img/s3_bulb_noglow.png");
});
</script>
Use this:-
i am here supposing Img1 Id is Img1 etc.
$("#Img1").hover(function(){
// when mouseover
$("#Img2").attr("src","paste your Img3 Url");
},
function() {
// when mouseout
$("#Img2").attr("src","paste your Img2 Url");
});
Have you tried CSS :hover selector?
HTML:
<div class="container">
<div class="A">Hover me!</div>
<p>lorem ipsum...</p>
<div class="B">And I will highlight myself</div>
</div>
CSS:
div.container > div {
display: inline-block;
border: 1px solid #000;
padding: 16px;
margin: 16px;
cursor: pointer;
transition: background .4s;
background: #fff;
}
div.container > div:hover ~ div {
background: #ff0;
}
http://jsfiddle.net/1fwr9wfw/
In CSS, you can change the background-image too.
If using the jQuery .hover() method, just know that it accepts two arguments:
$("#Img1").hover(function(){
// mouse enter
$("#Img2").attr("src","paste your Img3 Url");
}, function(){
// mouse leave
$("#Img2").attr("src","paste your Img2 Url");
});
There are other optimizations that could be made as well, like storing the original Img2 src somewhere so you don't have to redefine a URL you already have, but that's another story.
I will assume your html looks so :
<img src="button.jpg" alt="button" id="mybutton" />
<img src="image1.jpg" alt="image 1" id="imagetochange" />
Use this javascript :
window.onload = function(){
var btn = document.getElementById('mybutton');
var img = document.getElementById('imagetochange');
btn.onmouseover = function(){
img.src = 'image2.jpg';
};
btn.onmouseout = function(){
img.src = 'image1.jpg';
};
};
demo
It sounds like something that could be done purely with HTML:
<div class="outerImage" style="width:64px; height:64px; background:blue url('outer_image.jpg');">
<img class="innerImageDefault" src="image2.jpg">
<img class="innerImageHover" src="image3.jpg">
</div>
and CSS:
/* Position both of the inner images. */
.outerImage > img {
float: right;
}
/* Hide the hidden image; hide the default image when hovered. */
.outerImage .innerImageHover,
.outerImage:hover .innerImageDefault {
display: none;
}
/* Show the hidden image when the outer image is hovered. */
.outerImage:hover .innerImageHover {
display: inline-block;
}
A rather dirty Proof of Concept on JSFiddle
Related
I have VERY recently started coding and been asked to code our company website from scratch.
I have coded a team page on the website with a PNG of each member of the team. At the moment when the user hovers over any of the PNGs they turn into a little animated GIF of them waving/doing something.
This is the javascript:
$(document).ready(function()
{
$("#imgAnimateBeth").hover(
function(){
this.src = "images/Team/Videos/Beth.gif";
},
function(){
this.src = "images/Team/Static-shots/Beth.png";
}
);
});
The issue I am having is that I also want to introduce a click state that would bring up a popup with a video of that person and their job description but I can't get it to work.
I have tried creating a CSS overlay but it refuses to work alongside the hover effect (JavaScript) so my assumption is that they don't play well together (??).
Below is the HTML for the section above. Can anyone enlighten me as to how this could be done? Simple language please!
<div class="teamsection">
<img src="images/Team/Static-shots/Beth.png" id="imgAnimateBeth">
<img src="images/Team/Static-shots/Kiemia.png" id="imgAnimateKiemia">
<img src="images/Team/Static-shots/Emma-B.png" id="imgAnimateEmmaB">
<img src="images/Team/Static-shots/Mathew.png" id="imgAnimateMathew">
<img src="images/Team/Static-shots/Sydney.png" id="imgAnimateSydney">
<img src="images/Team/Static-shots/Liz.png" id="imgAnimateLiz">
<img src="images/Team/Static-shots/Russ.png" id="imgAnimateRuss">
<img src="images/Team/Static-shots/Jill.png" id="imgAnimateJill">
<img src="images/Team/Static-shots/Merry.png" id="imgAnimateMerry">
<img src="images/Team/Static-shots/Caroline.png" id="imgAnimateCaroline">
<img src="images/Team/Static-shots/Charlotte.png" id="imgAnimateCharlotte">
<img src="images/Team/Static-shots/Lucien.png" id="imgAnimateLucien">
<img src="images/Team/Static-shots/Sarah.png" id="imgAnimateSarah">
<img src="images/Team/Static-shots/Emma-S.png" id="imgAnimateEmmaS">
<img src="images/Team/Static-shots/David.png" id="imgAnimateDavid">
<img src="images/Team/Static-shots/Kathryn.png" id="imgAnimateKathryn">
</div>
Also, if you need me to upload anything else, just shout.
The CSS overlay was like this:
The CSS code overlay was like this:
.popup {
display: none;
position: fixed;
padding: 30px 70px;
width: 700px;
height: 100%;
z-index: 20;
left: 50px;
top: 20px;
background: rgba(0, 0, 0, 0.9);
overflow: scroll;
}
With a little bit of Javascript:
$ = function(id) {
return document.getElementById(id);
}
var show = function(id) {
$(id).style.display ='block';
}
var hide = function(id) {
$(id).style.display ='none';
}
And I basically did this to the HTML:
<div>
<a href="javascript:void(0)" onclick="show('beth')">
<img src="images/Team/Static-shots/Beth.png" id="imgAnimateBeth">
</a>
</div>
<div class="popup" id="beth">
<div class="close-button">
<i class="fa fa-times" aria-hidden="true"></i> Close
</div>
<h4>CONTENT HERE</h4>
</div>
Maybe this will give you some ideas:
var members = document.querySelectorAll('.team-member');
members.forEach(function(member) {
member.addEventListener('mouseenter', memberShowGIF);
member.addEventListener('mouseleave', memberShowPNG);
member.addEventListener('click', memberVideo);
});
function memberShowGIF(event) {
this.src = this.dataset.gif;
}
function memberShowPNG(event) {
this.src = this.dataset.png;
}
function memberVideo(event) {
console.log('The video thing for: ' + this.id);
}
<div class="teamsection">
<img id="Beth" class="team-member"
src="https://via.placeholder.com/200?text=Beth.png"
data-png="https://via.placeholder.com/200?text=Beth.png"
data-gif="https://via.placeholder.com/200?text=Beth.gif">
<img id="Kiemia" class="team-member"
src="https://via.placeholder.com/200?text=Kiemia.png"
data-png="https://via.placeholder.com/200?text=Kiemia.png"
data-gif="https://via.placeholder.com/200?text=Kiemia.gif">
</div>
The most important learnings here are:
querySelectorAll (as a vanilla alternative to jQuery for selecting nodes)
addEventListener
Data attributes
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 a number of DIVs currently laid out in an oval shape. Each div represents a "service" and is ID'd accordingly, all are set with an absolute position.
What I am wanting to do is on mouseover of a div, I want to have a new DIV with relevant information appear in the middle. This should happen for each "service" so each "descriptive" div will be hidden until mouseover but all appear in the same space.
The website in question is the home page of www.faa.net.au.
How do I go about making this new descriptive DIV appear on mouseover and hide on mouseout?
What you can do is position all of those divs in that spot in the middle with CSS. They can stack and the z-index doesn't matter since all you'll only see one at a time. Then hide them with "display:none" in your CSS.
Then use jQuery's .hover() method to show those the appropriate div on mouseover
$("#idOftheDivYouHoverOn").hover(function (e) {
//This funciton defines what happens on mouse-in or hover.
$("#idOfTheDefaultCenterDiv").hide();
$("#idOfTheDivYouWantedToShow").show();
}, function (e) {
//This function defines what happens on mouse-out or when the hover is over.
$("#idOfTheDefaultCenterDiv").show();
$("#idOfTheDivYouWantedToShow").hide();
});
You'll have to do this for each one you hover on. There is a "smarter" way but it would be a very long answer to explain it.
That is if you want to do this using JavaScript/jQuery instead of just plain CSS similar to the ones you see in other answers. With this method you can add fading effects - take a look at jQuery's hover - http://api.jquery.com/hover/
Edit: Here's a working example: http://jsfiddle.net/6dMDS/
Hope that helps.
A friend in another forum just posted another way of doing this. Be warned it's CSS3 only so some browsers (and definitely older IE's) won't support it.
<div class="container">
<img class="one" src="http://placehold.it/100x100" />
<img class="two" src="http://placehold.it/100x100" /><br>
<img class="three" src="http://placehold.it/100x100" />
<img class="four" src="http://placehold.it/100x100" /><br>
<img class="five" src="http://placehold.it/100x100" />
<img class="six" src="http://placehold.it/100x100" />
<div class="hidden-one">hidden-one</div>
<div class="hidden-two">hidden-two</div>
<div class="hidden-three">hidden-three</div>
<div class="hidden-four">hidden-four</div>
<div class="hidden-five">hidden-five</div>
<div class="hidden-six">hidden-six</div>
</div>
* {margin: 0; padding: 0;}
.container {width: 400px;}
.one:hover ~ .hidden-one,
.two:hover ~ .hidden-two,
.three:hover ~ .hidden-three,
.four:hover ~ .hidden-four,
.five:hover ~ .hidden-five,
.six:hover ~ .hidden-six
{display: block;}
.hidden-one,
.hidden-two,
.hidden-three,
.hidden-four,
.hidden-five,
.hidden-six
{
width: 200px;
height: 300px;
border: 1px solid red;
display:none;
float: right;
position: relative;
top:-305px;
left: 10px;
}
http://codepen.io/anon/pen/LbfCl
So if I got it right, you got a "service" DIV and a "descriptive" DIV. Try some CSS to make it happen.
HTML:
<div id="service"></div>
<div id="descriptive"></div>
And CSS:
#descriptive
{
visibility:hidden;
}
#service:hover #descriptive
{
visibility:visible;
}
Basically this will make the DIV with id="descriptive" be shown when id="service" is hovered.
I'm new to Javascript, but I've been teaching myself CSS and some php so I'm hoping to learn a bit. I've been looking all over the last couple days to figure out what I want, hopefully this isn't a dumb question.
I'm trying to build mini-image galleries for a page of porfolio projects of mine. I've got a page of about 8 large images - each one for a different project. I'm trying to get it where if you click on an image it will load the next image of that project (Mission accomplished! I've gotten that with a code I found online)
But I also want pagination dots (basically, images of circles), like I've seen on other websites, to represent the images in the set. So if there's three images of a project, you'll see three dots and clicking on the third dot takes you to the third image -- and that dot image replaces with the 'selected dot' image. Make sense?
I've been looking all day for scripts and examples of how to do this, and this is as far as my Javascript has gotten. This is the script for the first project. With the others I input the same script, but change the variables. img1 becomes img2 then img3 and so on. Can anyone tell what's wrong?
<div class="project" id="proj1">
<script type="text/javascript">
var img1 = [
"img/portf/tiger1.jpg",
"img/portf/tiger2.jpg",
"img/portf/tiger3.jpg"
];
img1.current = 0;
function showImage1(i) {
$('#imag1').fadeOut( function() {
this.src = img1[img1.current];
$(this).fadeIn();
});
}
function NextImage1() {
img1.current = (img1.current+1) % img1.length;
showImage1(img1.current);
}
function PreviousImage1() {
if (--img1.current < 0) { img1.current = img1.length - 1; }
showImage1(img1.current);
}
onload = function(){
showImage1(0);
};
</script>
<div class="projname">
<div class="ProjectTitle">
Tigercat Website
</div>
<div class="PaginationButtons">
<img src="img/active.gif" />
<img src="img/inactive.gif" />
<img src="img/inactive.gif" />
</div>
<div class="clear"></div>
</div>
<div class="projwindow">
<a href="javascript:NextImage1()">
<img src="img/portf/tiger1.jpg" name="Tigerc" width="800" height="600" id="imag1" />
</a>
</div>
</div>
You can see what I have so far here: http://www.gmisen.com
Thanks so much for the help!!
Might not be the greatest learning experience, but you can easily achieve this with the jQuery cycle plugin: http://jquery.malsup.com/cycle/int2.html (take a look at the pager example)
here's a demo: http://jsfiddle.net/69LNJ/
HTML
<div class="slideshow">
<img src="http://flickholdr.com/400/400/cat/bw">
<img src="http://flickholdr.com/400/400/cat/bw/1">
<img src="http://flickholdr.com/400/400/cat/bw/2">
</div>
JS
$(function() {
$('.slideshow').before('<div id="nav">').cycle({
fx: 'fade',
speed: 'fast',
timeout: 0,
pager: '#nav'
});
});
CSS
#nav{
position: absolute;
top: 20px;
left: 20px;
z-index: 1000;
}
#nav a{
background-color: cyan;
border-radius: 10px;
height: 20px;
width: 20px;
display: block;
text-indent: -1000px;
float: left;
margin-right: 10px;
}
#nav a.activeSlide{
background-color: blue;
}
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;}