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" />
Related
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>
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 img tag like
<img src="Mesothelioma_image_1.jpg"/>
I want to replace this tag with something like
<amp-img class="blog-image" src="Mesothelioma_image_1.jpg" width="50" height= "20" layout="responsive"></amp-img>
By keeping the same src attribute value.
You can use querySelector() to find the image. It would be easier if the image contains an id attribute.
Then, use createElement() to create the dom element by name amp-img.
Use setAttribute() to assign attributes to the new elements such as class, src, width, erc.
Use insertBefore() to add new element to the page and remove() to remove the old image element.
NOTE: I am selecting the old image with its src, please change it as per your need.
var oldImage = document.querySelector('img[src="Mesothelioma_image_1.jpg"]');
var newImage = document.createElement('amp-img');
newImage.setAttribute("class","blog-image");
newImage.setAttribute("src", oldImage.getAttribute('src'));
newImage.setAttribute("width","50");
newImage.setAttribute("height","20");
newImage.setAttribute("layout","responsive");
oldImage.parentNode.insertBefore(newImage, oldImage);
oldImage.parentNode.removeChild(oldImage);
console.log(document.querySelector('amp-img[src="Mesothelioma_image_1.jpg"]')); // to find the appended new image
<img src="Mesothelioma_image_1.jpg"/>
Please see below code.
You will need to access img using parent class or Id.
i have did this work on a link click event, You can do this on document.ready or any other event as well.
jQuery('.clickMe').click(
function(e){
e.preventDefault();
var img = jQuery('.parent img').attr('src');
var newhtml='<amp-img class="blog-image" src="'+img+'" width="50" height= "20" layout="responsive"></amp-img>';
// console.log('IMG: '+ img);
jQuery('.parent').html(newhtml);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
<img src="https://mosthdwallpapers.com/wp-content/uploads/2016/08/Pakistan-Flag-Image-Free-Download.jpg"/>
</div>
<a class="clickMe" href="#">Click Me </a>
<amp-img class="blog-image" src="Mesothelioma_image_1.jpg" width="50" height= "20" layout="responsive"></amp-img>
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.
I have a jQuery script that hides the loading animation after the original image has loaded. Here is the HTML code:
<img id="loading_img" src="loading.gif">
<img id="q" style="display: none;" src="abc.png"/>
And here is the javascript:
$('#q').load(function(){
$('#loading_img').hide();
$('#q').show();
});
But the problem is, the loading image doesn't hide on 100% time. Sometime it stays, and the original image doesn't appear. I tried changing the positions (original image then loading image) but nothing happened. What should I do to make the code working on every time?
The load event won't fire on an image that is hidden in most browsers:
<img id="loading_img" src="loading.gif">
<img id="q" style="display: none;" src="abc.png"/>
You'll have to create a new image in javascript, and listen for the load event on that image :
var img = new Image();
img.onload = function() {
document.getElementById('loading_img').style.display = 'none';
document.getElementById('q').style.display = 'inline';
}
img.src = document.getElementById('q').src;
if (img.complete) img.onload();
or more jQuery'ish
$(new Image()).on('load', function() {
$('#loading_img').hide();
$('#q').show();
}).prop('src', $('#q').prop('src'))
.each(function() { if (this.complete) $(this).trigger('load');})