How to stop javascript hover from activating all the other hovers? - javascript

I have a couple pictures I want to hover when you do mouseenter but once you hover over one image, all the other images change to mouseenter as well. How do I stop this from happening so you can hover one at a time without affecting the others?
<p><IMG SRC="http://static1.squarespace.com/static/5736026127d4bd28d97e2b7a/t/5790f505b8a79bc462950c46/1469117701248/k_1.png/" ID="img1" onMouseEnter="doMouseenter()" onMouseLeave = "doMouseleave()"/></P>
<p><IMG SRC="http://static1.squarespace.com/static/5736026127d4bd28d97e2b7a/t/5790f584be65943e371ac3c8/1469117828984/k_2.png/" align="right" ID="img2" onMouseEnter="doMouseenter()" onMouseLeave = "doMouseleave()"/></P>
<script language="Javascript">
function doMouseenter() {
document.getElementById("img3").src = "http://static1.squarespace.com/static/5736026127d4bd28d97e2b7a/t/5790f6efd482e96f971b2dae/1469118191453/k_3_hover.png";
document.getElementById("img4").src = "http://static1.squarespace.com/static/5736026127d4bd28d97e2b7a/t/5790f7cc8419c25e40f16e6b/1469118412438/k_4_hover.png";
}
function doMouseleave() {
document.getElementById('img3').src = "http://static1.squarespace.com/static/5736026127d4bd28d97e2b7a/t/5790f603d482e96f971b24b2/1469117955279/k_3.png/";
document.getElementById('img4').src = "http://static1.squarespace.com/static/5736026127d4bd28d97e2b7a/t/5790f759b8a79bc462952502/1469118297585/k_4.png/";
}

If you want, you can do like this:
<p><IMG SRC="http://static1.squarespace.com/static/5736026127d4bd28d97e2b7a/t/5790f505b8a79bc462950c46/1469117701248/k_1.png/" ID="img1" onMouseEnter="this.src='http://static1.squarespace.com/static/5736026127d4bd28d97e2b7a/t/5790f6efd482e96f971b2dae/1469118191453/k_3_hover.png'" onMouseLeave = "this.src='http://static1.squarespace.com/static/5736026127d4bd28d97e2b7a/t/5790f603d482e96f971b24b2/1469117955279/k_3.png/'"/></p>
<p><IMG SRC="http://static1.squarespace.com/static/5736026127d4bd28d97e2b7a/t/5790f584be65943e371ac3c8/1469117828984/k_2.png/" align="right" ID="img2" onMouseEnter="this.src='http://static1.squarespace.com/static/5736026127d4bd28d97e2b7a/t/5790f7cc8419c25e40f16e6b/1469118412438/k_4_hover.png'" onMouseLeave = "this.src='http://static1.squarespace.com/static/5736026127d4bd28d97e2b7a/t/5790f759b8a79bc462952502/1469118297585/k_4.png/'"/></p>

You're telling javascript to open both img3 and img4 when ever doMouseenter() is called.
This will modify the individual elements.
HTML
<p><img SRC="http://static1.squarespace.com/static/5736026127d4bd28d97e2b7a/t/5790f505b8a79bc462950c46/1469117701248/k_1.png/" ID="img1" onmouseover="doMouseenter(this)" onmouseout="doMouseleave(this)"></P>
<p><img SRC="http://static1.squarespace.com/static/5736026127d4bd28d97e2b7a/t/5790f584be65943e371ac3c8/1469117828984/k_2.png/" align="right" ID="img2" onmouseover="doMouseenter(this)" onmouseout="doMouseleave(this)"></P>
JavaScript
function doMouseenter(obj) {
obj.style.opacity = 1;
}
function doMouseleave(obj) {
obj.style.opacity = 0;
}

Related

On mouse hover, change picture in JavaScript

I have an image in my HTML code, and I want to make it so that when my mouse is hovering over the image, it will change to the other image, and when the mouse is not hovering over the image, it switches back to the default. How do I program this in a <script> tag?
No <script> tag necessary. Use onmouseover and onmouseout to change the image source.
onmouseover will execute an action when your mouse goes over the image. In this case, we use this.src to set the image src to another image.
onmouseout will execute an action when your mouse goes out of the image. In this case, we use this.src again to set the image to the default image.
<img title="Hello" src="https://static.independent.co.uk/s3fs-public/thumbnails/image/2017/09/12/11/naturo-monkey-selfie.jpg?w968h681" onmouseover="this.src='https://www.ctvnews.ca/polopoly_fs/1.4037876!/httpImage/image.jpg_gen/derivatives/landscape_1020/image.jpg'" onmouseout="this.src='https://static.independent.co.uk/s3fs-public/thumbnails/image/2017/09/12/11/naturo-monkey-selfie.jpg?w968h681'" />
You can use css for this like:
.react {
background: url('../img/React_Monoo.png');
}
.react:hover {
background: url('../img/React_Colored.png');
}
here react is a class name
var image = document.getElementById("image");
//Now, we need to add an Event Listener to listen when the image gets mouse over.
image.addEventListener('mouseover', function(){
image.src = "path/to/newimage"
})
image.addEventListener('mouseout', function(){
image.src = "path/to/otherimage"
})
You can use the on mouse out for this.
here is my Work on it.
<html>
<head>
</head>
<body>
<script>
function setnewimage() {
document.getElementById("img2").src = "myquiz1.png";
}
function setnewimage1() {
document.getElementById("img2").src = "myquiz2.png";
}
function setnewimage2() {
document.getElementById("img2").src = "myquiz3.png";
}
function setnewimage3() {
document.getElementById("img2").src = "pic33.png";
}
function setoldimage() {
document.getElementById("img2").src = "myquiz1.png";
}
</script>
<div>
<img id="img2" src="" width="300">
<br>
<img id="img1" src="myquiz1.PNG" onmouseover="setnewimage()"
width="300" onmouseout="setoldimage()">
<img id="img66" src="myquiz2.PNG" onmouseover="setnewimage1()"
width="300" height="200" onmouseout="setoldimage()">
<img id="img87" src="myquiz3.PNG" onmouseover="setnewimage2()"
width="300" height="200" onmouseout="setoldimage()">
<img id="img80" src="pic33.PNG" onmouseover="setnewimage3()"
width="300" height="200" onmouseout="setoldimage()">
</div>
</body>
</html>

make a close button that appears after time on an image

Basically I want to add a "x" , a close button, at the top right of an image that will appear after some time using setTimeout(). So when you click on the x button, it will close the image. I played around with <input type="image"> but it isn't what I wanted because it makes the image clickable. I've looked at examples but I'm not sure how to approach this. Thank you for any help.
function showImage(){
document.getElementById('banner').style.display = 'inline-block';
}
setTimeout(showImage,3000);
<figure class = "showBanner">
<input type="image" id="banner" src="https://i0.wp.com/wptavern.com/wp-content/uploads/2016/07/stack-overflow.png?ssl=1" style="display:none"/>
<script type = "text/javascript" src = "testing.js"></script>
</figure>
First of all: The <input type="image" ... /> is for formulas when you want to have a button with background-image. As far as I understand, that is not at all what you want.
Also, use a separate css-file for your styles!
This example should solve your problem:
function showButton(){
document.getElementById('xButton').style.display = 'block';
}
document.getElementById('xButton').addEventListener("click", function(){
document.getElementById('banner').style.display = 'none';
document.getElementById('xButton').style.display = 'none';
});
setTimeout(showButton,3000);
#xButton {
float: right;
display: none;
}
.showBanner {
width: 50%;
}
<figure class = "showBanner">
<button id="xButton"> x </button>
<img src="https://i0.wp.com/wptavern.com/wp-content/uploads/2016/07/stack-overflow.png?ssl=1" id="banner" width="100%">
</figure>
You could try changing the opacity from 0 to 1 on click, this way you can use css transitions too
style="opacity:0"
banner.style.opacity = '1';
As for the button you can use the x symbol
<span class="closeBtn">×</span>
const closeBtn = document.querySelector('.closeBtn');
closeBtn.addEventListener('click', () => banner.style.opacity = '0');

Turning lights on and off

I am trying to make a program where when you click on a light the lightbulb will turn on, and then if you click on it again it will turn off. I have onClick but no matter which one I clikc the first one always turns on. Can somebody help so that the clicked on light will turn on?
<!DOCTYPE html>
<html>
<body>
<img id="light1" onclick="changeImage()" src="pic_bulboff.gif" width="100" height="180">
<img id="light2" onclick="changeImage()" src="pic_bulboff.gif" width="100" height="180">
<img id="light3" onclick="changeImage()" src="pic_bulboff.gif" width="100" height="180">
<img id="light4" onclick="changeImage()" src="pic_bulboff.gif" width="100" height="180">
<script>
function changeImage() {
var image1 = document.getElementById('light1');
if (image1.src.match("bulbon")) {
image1.src = "pic_bulboff.gif";
} else {
image1.src = "pic_bulbon.gif";
}
}
</script>
</body>
</html>
In JavaScript, event handlers get a special variable called this, which refers to the element from which the event was fired (in this case the light bulb that was clicked), you can use it like this:
function changeImage() {
if (this.src.match("bulbon")) {
this.src = "pic_bulboff.gif";
} else {
this.src = "pic_bulbon.gif";
}
}
Notice the difference from your code. You were always making changes to the first lightbulb, accessed by id using the API document.getElementById('light1').
You're pointing at the same DOM node in your function despite registering an event handler on multiple nodes.
You should use the this keyword to use currently clicked node as the context during the function's execution.

Multiple image rollover in javascript with for loop

Please help me. I want to do the below activity in javascript programming with the help of "for loop".
Suppose there are five images on the web page. When I rollover the 1st image, the text should display "it's a first image". When I rollover the 2nd image, the text should display "it's a second image". When I rollover the 3rd image, the text should display it's a third image.
I have tried and it's successful but it's manual. I am new in Javascript programming..
<!DOCTYPE html>
<html lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<link rel="stylesheet" href="style_latest.css" type="text/css">
<title>MATHERAN TRIP</title>
<style>
#displayText
{
width:413px;
height:auto;
background-color:#666666;
color:white;
}
#displayText1
{
padding-left:5px;
}
</style>
</head>
<body>
<img src="images/img1.jpg" id="img1" onmouseover="clickEvent1()" onmouseout="imgRollout()" width="100" height="100">
<img src="images/img2.jpg" id="img2" onmouseover="clickEvent2()" onmouseout="imgRollout()" width="100" height="100">
<img src="images/img3.jpg" id="img3" onmouseover="clickEvent3()" onmouseout="imgRollout()" width="100" height="100">
<img src="images/img4.jpg" id="img4" onmouseover="clickEvent4()" onmouseout="imgRollout()" width="100" height="100"><br/>
<div id="displayText">
<span id="displayText1"></span>
</div>
<script>
var myData=new Array("Hi, How r u?", "Hey, whats up? Hey, whats up? Hey, whats up? Hey, whats up? Hey, whats up? Hey, whats up?", "Hello, whats going on?", "Hi friends")
document.getElementById("displayText").style.visibility='hidden';
function clickEvent1()
{
document.getElementById("displayText1").innerHTML=myData[0];
document.getElementById("displayText").style.visibility='visible';
}
function clickEvent2()
{
document.getElementById("displayText1").innerHTML=myData[1];
document.getElementById("displayText").style.visibility='visible';
}
function clickEvent3()
{
document.getElementById("displayText1").innerHTML=myData[2];
document.getElementById("displayText").style.visibility='visible';
}
function clickEvent4()
{
document.getElementById("displayText1").innerHTML=myData[3];
document.getElementById("displayText").style.visibility='visible';
}
function imgRollout()
{
document.getElementById("displayText").style.visibility='hidden';
}
</script>
</body>
</html>
I would recommend you don't include inline event attributes at each element. But I would consider including an inline html5 data- attribute with the message associated with the elements:
<img src="images/img1.jpg" data-msg="Hi, How r u?" width="100" height="100">
<!-- etc -->
Then you can bind the same rollover functions to each element using a loop as follows:
function doMouseOver(e) {
document.getElementById("displayText1").innerHTML =
e.target.getAttribute("data-msg");
document.getElementById("displayText").style.visibility='visible';
}
function doMouseOut() {
document.getElementById("displayText").style.visibility='hidden';
}
var imgs = document.getElementsByTagName("img"),
i;
for (i = 0; i < imgs.length; i++) {
imgs[i].addEventListener("mouseover", doMouseOver);
imgs[i].addEventListener("mouseout", doMouseOut);
}
Within the doMouseOver() function, the e argument is the event object, and thus e.target gives you a reference to the element the event happened to - so then you can retrieve the particular data-msg value for that element to display it.
Demo: http://jsfiddle.net/3c7Rb/
Having said that, you don't need the loop either. You can bind the functions directly to the document, and then within the mouse over handler you simply test whether the target element has the msg-data attribute. If it does, display it, otherwise do nothing:
function doMouseOver(e) {
var msg = e.target.getAttribute("data-msg");
if (msg) {
document.getElementById("displayText1").innerHTML= msg;
document.getElementById("displayText").style.visibility='visible';
}
}
function doMouseOut() {
document.getElementById("displayText").style.visibility='hidden';
}
document.addEventListener("mouseover", doMouseOver);
document.addEventListener("mouseout", doMouseOut);
Demo: http://jsfiddle.net/3c7Rb/1/

Simple Slideshow on Hover, Slideshow stops on mouseleave

This is my first post. My code works in chrome and safari, but the slideshow won't stop in firefox. I want to show a live version of this code to make it easier, but I'm working locally. I'm wondering if its because I wrote it with hover instead of mouseover and mouseleave, but I dont know how to write it out correctly that way. There may even be an error in this code, but the browser is not detecting it.
HTML:
<div class="fadelinks">
<img src=""/>
<img src=""/>
<img src=""/>
<img src=""/>
</div>
jQuery:
jQuery(document).ready(function($) {
$(".fadelinks").each(function(){
var $this = this;
$($this).hover(function(){
$('> :gt(0)', $this).hide();
timer = setInterval(function(){$('> :first- child',$this).fadeOut()
.next().fadeIn().end().appendTo($this);}, 1500);
}, function() {
clearInterval(timer);
});
});
});
a simpler way to achieve is to add onmouseover = "mouseoverFunction();" onmouseout = "mouseoutFunction()" to each img tag
then in javascript
mouseoverFunction()
loop through image array
show next
wait
mouseoutFunction()
stop looping
you do not need the a tags
well you want that on mouse hover your images start sliding here is another code i am not so good in jquery but here is the code:
css
#fadelinks{
width: 100px;
height: 100px;
overflow: hidden;
}
set your image height and width equal to the width and height of fadelinks
HTML
<div class="fadelinks">
<a id="same1" href="#"> <img src=""/> </a>
<a id="same2" href="#"> <img src=""/> </a>
<a id="same3" href="#"> <img src=""/> </a>
<a id="same4" href="#"> <img src=""/> </a>
</div>
<button onclick="slid1">image1<button>
<button onclick="slid2">image2<button>
<button onclick="slid3">image3<button>
<button onclick="slid4">image4<button>
jquery
var slide1 = function(){
$(document).ready(function(){
$("#same1, #same2, #same3, #sam4").fadeout(100);$("#same1").fadeIn();
});
}
var slide2 = function(){
$(document).ready(function(){
$("#same1, #same2, #same3, #sam4").fadeout(100);$("#same2").fadeIn();
});
} var slide3 = function(){
$(document).ready(function(){
$("#same1, #same2, #same3, #sam4").fadeout(100);$("#same3").fadeIn();
});
} var slide4 = function(){
$(document).ready(function(){
$("#same1, #same2, #same3, #sam4").fadeout(100);$("#same4").fadeIn();
});
you will understand what will this do but as i told you i am not so good in jquery so i have done this in you know in noob style. but from this you might get the idea and you can intregate this with event handler mousehover and mouseout and also use setinterval to slide automatically.
thanks.

Categories