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>
Related
I'm grabbing favicon's from sites programmatically by generically making a request for the icon to "example.com/favicon.ico".
If the site doesn't have a favicon, I want to use the "alt" attribute of the image to hide the image so that it doesn't appear and doesn't have a "missing image" icon.
For example
<img src="https://www.businessinsider.com/favicon.ico" alt="$(this).hide();" height="16" width="16">
Can this be done?
You can use the built-in error() method. Hide your image based upon that.
$("img").on("error", function() {
$(this).hide();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src="https://www.businessinsider.com/favicon.ico" height="16" width="16">
If you want an alternative image when the image is not available, give the new image source.
$("img").on("error", function() {
$(this).attr("src", "https://homepages.cae.wisc.edu/~ece533/images/mountain.png");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src="https://www.businessinsider.com/favicon.ico" height="16" width="16">
You can put your placeholder immediately and check if the image loads on script. If it loads, replace the img src
var thisImage = new Image();
thisImage.src = 'https://www.businessinsider.com/favicon.ico';
thisImage.onload = function() {
console.log("Image 1 ready to append");
document.querySelector('.bg-image').src = thisImage.src;
};
<!--The source here is your placeholder-->
<img class="bg-image" src="https://placekitten.com/50/50" height="50" width="50" />
<html>
<body>
<button onclick="document.getElementById('myImage').src='hagthrowingball.gif'">Throw Fire ball</button>
<img id="myImage" src="foresthag.gif" style="width:100px">
</body>
</html>
I need the image src onclick to show the image hagthrowingball.gif, but then go back to foresthag.gif without pressing the button again.
I think this should solve your problem by automaticly setting back old src after some time;
<button onclick="replaceFunc();">Throw Fire ball</button>
<img id="myImage" src="foresthag.gif" style="width:100px">
<script>
function replaceFunc (){
const el = document.getElementById("myImage");
const oldSrc = el.src;
el.src = 'hagthrowingball.gif';
setTimeout(()=>el.src=oldSrc, 1000);
}
</script>
</body>
</html>
I'm trying to hide images without the src in WordPress.
Following is the image code displaying on the front end
<img src="[custom-gallery-image-01]" class="galimage" height="300" width="580"/>
JS used to hide the image
<script type="text/javascript">
$(document).ready(function() {
$(".galimage").each(function() {
var atr = $(this).attr("src");
if(atr == "") {
$(this).addClass("hidegalimage");
} else {
$(this).removeClass("hidegalimage");
}
});
});
</script>
CSS
.hidegalimage {
display:none;
}
But I can still see the broken image icon & an image border. View JSFiddle. Can someone fix my issue or give me a suggestion how to hide the image?
Many thanks
Much more elegant to use CSS instead, no Javascript required, assuming the bad srcs start with [ as in your HTML: are empty strings:
.galimage[src=""] {
display:none;
}
<img src="https://www.gravatar.com/avatar/b3559198b8028bd3d8e82c00d16d2e10?s=32&d=identicon&r=PG&f=1" class="galimage" height="300" width="580"/>
<img src="" class="galimage" height="300" width="580"/>
<img src="https://www.gravatar.com/avatar/b3559198b8028bd3d8e82c00d16d2e10?s=32&d=identicon&r=PG&f=1" class="galimage" height="300" width="580"/>
Using jquery
$("img").error(function(){
$(this).hide();
});
Or
$("img").error(function (){
$(this).hide();
// or $(this).css({'display','none'});
});
no need for CSS alternative
You can use this but this is not hidding its removing from the page at all (DOM):
<img id='any' src="https://invalid.com" onerror="document.getElementById(this.id).remove()" >
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;
}
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.