We Keep Coding

HTML - Img alt attribute hides image

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" />

Grab img tag under a link with a class

So I have a img that I need to change and I can't access the html right now so need to do it with just css
The structure is
<a href="afd.com" class="imgfile">
<img src = "adsfasd">
</a>
I need to change the src of the img, but I'm not sure how to grab it. I tried 'grab element by selector' in chrome but that's not working exactly.
Once I grab it I'll just do something like
var image = document.querySelector(".example");
image.src = "image1.jpg"
Note, NO jquery

You can select just like CSS in querySelector
const image = document.querySelector("a.imgfile img");
image.src = "https://source.unsplash.com/random/200x150";
<a href="afd.com" class="imgfile">
<img src="adsfasd" />
</a>

Replace dynamic keyword from HTML content using jQuery

<div class="fotorama__stage__frame magnify-wheel-loaded fotorama_vertical_ratio fotorama__loaded fotorama__loaded--img fotorama__active" aria-hidden="false" data-active="true" style="left: 0px;" href="https://static.domain.com/media/catalog/product/cache/713229083fb198/h/a/123.png">
<img src="https://static.domain.com/media/catalog/product/cache/713229083fb198/h/a/123.png" class="fotorama__img" aria-hidden="false"></div>
I want to replace /cache/713229083fb198/ from IMG attribute and load that image again.
From
https://static.domain.com/media/catalog/product/cache/713229083fb198/h/a/123.png
to
https://static.domain.com/media/catalog/product/h/a/123.png
I want to replace it using jQuery.

Here is how you replace it with a regex that looks for any number and lowercase character for the random looking part.
var img = document.querySelector(".fotorama__img");
var src = img.src;
img.src = src.replace(/cache\/[0-9a-z]+\//, '');
console.log(img.src);
<div class="fotorama__stage__frame magnify-wheel-loaded fotorama_vertical_ratio fotorama__loaded fotorama__loaded--img fotorama__active" aria-hidden="false" data-active="true" style="left: 0px;" href="https://static.domain.com/media/catalog/product/cache/713229083fb198/h/a/123.png">
<img src="https://static.domain.com/media/catalog/product/cache/713229083fb198/h/a/123.png" class="fotorama__img" aria-hidden="false"></div>

Use .attr( function ) to changing src attribute of image. In function use regex in .replace() to matching target part of string.
$(".fotorama__img").attr("src", function(i, src){
return src.replace(/\/cache\/[^\/]+/, "");
});
console.log($(".fotorama__img").attr("src"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src="https://static.domain.com/media/catalog/product/cache/713229083fb198/h/a/123.png" class="fotorama__img" aria-hidden="false">

Using same image map on multiple images but with a different link for each area on each image

I am trying to use multiple images using the image map "imageTileMap".
<map name="imageTileMap">
<area id="quiz"shape="circle" coords="41,193,20" href="">
<area id="video"shape="circle" coords="112,193,20" href="">
<area id="presentation"shape="circle" coords="184,193,20" href="">
</map>
And I am using Javascript so that each area links to an anchor on a separate page, the page being dependent on the image itself. My function is:
<script type="text/javascript">
function changeLink(clicked_href) {
var url = clicked_href;
var areaQuiz = document.getElementById("quiz");
areaQuiz.href = url + "#quiz";
var areaVideo = document.getElementById("video");
areaVideo.href = url + "#video";
var areaPresentation = document.getElementById("presentation");
areaPresentation.href = url + "#presentation";
}
</script>
And the first image itself is set up as so:
<a id="firstImage" href="linkedPage1.html"><img src="image1.png" usemap="#imageTileMap" onClick="changeLink(this.href)"/></a>
The second image is formatted as:
<a id="secondImage" href="linkedPage2.html"><img src="image2.png" usemap="#imageTileMap" onClick="changeLink(this.href)"/></a>
The problem that I have currently is that clicking on any <area> on the first image directs me towards the anchor of the second image's href. How can I change the changeLink function to correctly collect the correct href? I am grateful for any response.

Everything remain same ,,, Just change Image Code....Href set to same page as from it clicked
Change the first image Code to:
<a id="firstImage" href="linkedPage2.html"><img src="image1.png" usemap="#imageTileMap" onClick="changeLink(this.href)"/></a>
Do Same as first:
<a id="secondImage" href="linkedPage1.html"><img src="image2.png" usemap="#imageTileMap" onClick="changeLink(this.href)"/></a>

How can I add a link to an image that changes on hover via jQuery?

I have an image below a nav and the image changes depending on which nav item is hovered over. Here is the code:
$(document).ready(function() {
$('.nav-item').mouseenter(function() {
var img = $(this).attr('data-headerimg');
$('img#header-img').attr('src', img);
}).mouseleave(function() {
var img = $(this).attr('data-headerimg');
$('img#header-img').attr('src', img);
});
});
I'd like the image to be a link to it's corresponding page, but I'm not sure how to do that via jQuery. Any help would be greatly appreciated.

First, enclose the image in an anchor in your HTML: <a><img ....></a>. Put the link next to data-headerimg, in data-headerlink attribute.
Second, update the anchor's href to the same value you're setting the image's src:
var img = $(this).attr('data-headerimg');
var href = $(this).attr('data-headerlink');
$('img#header-img').attr('src', img).parent().attr('href', href);

Sorround it with a href tag in html like
<a id="headerimglink" href=""><img src="" /></a>
set the href attribute along with the src attribute, or you can hardcode it as well if that is not changing.

Why to send an image request and wait a server response with image data? (Some users find it very annoying)
In order to preload your images You can simply create the needed tags and just swap display (with fade?) on item hover.
Let's say:
<ul id="list">
<li>Football</li>
<li>Barbara</li>
</ul>
<div id="images">
<img src="foo.jpg" alt="Foo">
<img src="bar.jpg" alt="Bar">
</div>
#images a {
display:none;
position:absolute;
/* etc */
}
var $imgLink = $('#images a');
$('#list li').hover(function( e ) {
$imgLink.stop().fadeTo(300, 0);
if(e.type=="mouseenter") {
$imgLink.eq( $(this).index() ).fadeTo(300, 1);
}
});