Is it possible to include multiple src URLs for one image in HTML?
Is it possible to include multiple src URLs for one image in HTML?
To achieve this effect, you will need to utilize the global event handler onerror attribute. See the example in the linked JSFiddle and the code snippet below for implementation.
Note: Make sure to adjust the image sources in the code below to see the behavior changes.
Code Snippet Example:
<img src="https://placehold.it/500x500?text=img-1"
onError="this.onerror=null; /* to prevent infinite loops */
this.src='https://placehold.it/500x500?text=img-2'; /* default */
/* first condition */
if (this.src != 'https://placehold.it/500x500?text=img-2') {
this.src='https://placehold.it/500x500?text=img-3';
/* second condition */
if (this.src != 'https://placehold.it/500x500?text=img-3') {
this.src='https://placehold.it/500x500?text=img-4';
/* third condition */
if (this.src != 'https://placehold.it/500x500?text=img-4') {
this.src='https://placehold.it/500x500?text=img-5'
}
}
}
">For more information, refer to GlobalEventHandlers.onerror Documentation
It's not possible with just Css, But with the help of Javascript, Yes, it can be achieved if you intend for the user to open multiple links when clicking on an image.
//jquery
$('img').click(function(e) {
window.open('http://exampleurl1.com');
window.open('http://exampleurl2.com');
e.preventDefault();
});
One option to consider is using the picture tag.
<picture>
<source media="(min-width: 650px)" srcset="img_pink_flowers.jpg">
<source media="(min-width: 465px)" srcset="img_white_flower.jpg">
<img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
Why is the height of this table 102px instead of 100px? Is there another CSS attribute that needs to be set besides: table { border-spacing:0; border-collapse:collapse; } For example, check out this example link. ...
I am currently working on a tool that searches for matches in an input field by comparing the keywords entered by the user with a JSON. During my testing phase, I focused on using a single API that provides information about different countries and fortun ...
Encountered a problem while using Firefox version 73 on Windows 7: In my code, I am using a multi-file-picker in HTML to upload up to 100 files in parallel: <input type="file" id="files" name="files" multiple> The files are sent to a REST API for ...
I'm struggling to center a CSS drop-down menu on my webpage without causing the drop-down effect to break. No matter what I try, it seems to mess up. What am I missing? Snippet of code: html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,b ...
Designed a simple game where the objective is to clear all the pieces by jumping over the checkers. However, encountering an error when attempting to remove the checker for the second time. Uncaught TypeError: Cannot read property 'theRow' of u ...
My vuetify text field has a label that is too long for mobile devices. I am wondering if there is a way to automatically wrap the text. I attempted using div and p, as shown in this codepen link <div id="app"> <v-app id="inspire ...
screenshot of my progress I have progressed from A3 to A2 step, but I need to add a horizontal line between them. How can I achieve this and is it possible to do so using CSS styles? ...
My website is essentially one large canvas image. Currently, the body fades in when loaded using this code: <body onLoad="document.body.style.opacity='1'"> However, I want to initiate this fade within my paperscript because sometimes the ...
I've been struggling with this issue for quite some time. Essentially, I am using a $http.post method in Angular to send an email address and message to post.php. The post.php script then outputs text based on the result of the mail() function. Howev ...
Let's say I have an image that needs to be shifted vertically, and I achieve it using the following code snippet: document.getElementById('ImgID1').style.verticalAlign = However, the value by which I need to shift the image is provided thr ...
Introduction: My current project involves managing interns, and I am focusing on the employee side. Employees have the ability to add, edit, and delete interns through modal popups. Strategy: To avoid unnecessary repetition of code, I decided to create a ...
In our code, we are aiming to prevent XSS (Cross Site Scripting) attacks. However, the solution may involve a combination of JS (JavaScript) and HTML escaping, which could prove to be quite challenging. Below is a snippet that closely resembles our code: ...
I am facing an issue with styling a standard HTML checkbox when it is in an error state. Since it's not possible to style the checkbox directly, I am attempting to apply the styling to its parent div instead. Consider this example: <div class="fo ...
Having trouble integrating this animation (from codepen) into my website. It works fine on its own, but when I try to add it to my site, it doesn't show up. I want it to appear in the middle at the bottom of the background image. Check out the codepe ...
As I hover over the image, my goal is to make a gray box appear at the bottom and smoothly slide up. While it slides up, everything it covers should turn grayscale. When I move my mouse away from the image, I want the gray box to slide back down and remove ...
I'm on a quest to find a way to create a CSS effect that only applies to an image, excluding the letters and buttons. I need to establish a rule in my CSS without altering the current structure. The issue arises when my code ends up applying the effec ...
My goal is to find a clever solution for removing the contents between specific HTML classes using PHP. For example, I want to erase all the HTML within the "sometestclass" class. The function below is somewhat functional but not perfect. It eliminates so ...
I am working on creating a card that displays only the image when not hovered, but expands and reveals additional information in a div to the right of the image when hovered. Unfortunately, when I hover over the image and then move towards the adjacent div ...
I am attempting to include an upload button alongside each recipe on my website. In order to save the image path next to each recipe in my database, I need to pass the recipe ID value during the image upload process. However, I keep encountering the same e ...
My aim is to create columns of divs where the user can click on a div to see more content as the height expands. I've managed to set this up, but it seems there's an issue with the document flow. When I click on a div in the first column, the div ...