So this:
<html>
<head>
<style>
img{href:self}
</style>
</head>
<img src="./Sampleimage"/>
</html>
would basically be the code I need, but since I don't know how or even if there is an option to do this, I figured, I have to ask someone more intelligent than me.
I kinda have to do this because I have about 200 images in this html Document, and every single one of them has to link to itself. So a seperate <a> tag for every image wouldn't be very stylish.
Expanding off of WillardSolutions' comment...
document.getElementById("myImg").addEventListener("click", function() {
window.open(this.getAttribute("src"));
});
.clickable {
cursor: pointer;
}
<img id="myImg" class="clickable" src="https://www.w3schools.com/images/compatible_chrome.gif"/>
Open your browser console to see the opening of the URL being blocked...
If you want it to open in a new window/tab use:
window.open(this.getAttribute("src"), '_blank');
Nice idea, but no, as the commenters above have explained.
What you can do is get the source URL of each image using jQuery and append it to the parent <a> element. I would do this on page load rather than on clicking the image, as then the images are ready to click.
I would also suggest using a thumbnail version of the image, otherwise it will take ages for the page to load. (If you do that, you will need to put all the thumbnails in a subdirectory and then remove that subdirectory from the link URL using a replace function).
$( document ).ready(function() {
$("img").each(function(){
var imgUrl = $(this).attr('src');
$(this).parent().attr('href', imgUrl);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a><img src="https://cdn.pixabay.com/photo/2018/12/15/02/53/flower-3876195_960_720.jpg" width="200"/></a>
Don't use JS for this simple solution...
<a href="image-src.ext">
<img src="image-src.ext"/>
</a>
if you want the image to be downloadable add the download attribute to <a>. It is really no problem and the faster performance solution. And about 'stylish'... forget about stylish in coding :D
This might be the solution you are looking for.
Here is the fiddle. https://jsfiddle.net/RadekD/bgfpedxv/1/
HTML
<img class="image" src="https://placeimg.com/100/200/nature" />
<img class="image" src="https://placeimg.com/200/200/nature" />
<img class="image" src="https://placeimg.com/300/200/nature" />
JS
var images = document.querySelectorAll('.image');
images.forEach(function(element) {
element.addEventListener("click",function(){
window.location.assign(element.src);
});
});
Related
I want to open an Image on click over another Image and so on.So It's a chain upto 6-7 images. Can somone suggest me how can I implement it.
<html>
<head></head>
<body style="background:color:red">
<a href="images/Delivery/2.png">
<img src="images/Delivery/1.png">
</a>
</body>
</html>
With above mentioned code I am able to open only 2 images. How can I able to access another image on click over "2.png" and so on.
You can use jquery to achive this
//Initial image element
<img src="images/Delivery/1.png" />
var imagesToShow=["1.png","2.png","3.png","4.png","5.png","6.png","7.png"];
var cnt=1;
$("img").click(function{
//If last image then reset to first image
if(cnt==imagesToShow.length){
cnt=0;
}
var nextimage="images/Delivery/"+imagesToShow[cnt];
$(this).attr("src",nextimage);
cnt++;
});
You can make it simply by passing class in for loop...No need to write big js
tl;dr: optimal placeholder image, tiny base64 code in HTML or 1x1 gif image?
I'm in the process of building a portfolio website with many high resolution images. Most are contained in slideshows or hidden divs. So I added a simple lazy loading function to the page.
It all works, but I was wondering what would be the fastest way of loading the placeholder images. Because I was told to never leave the src attribute blank.
I found a very tiny base64 image code on the internets and am using this. But the website contains many images, so the browser is decoding every single base64 image now. Doesn't seem very efficient either.
Would using a single very small 1x1 gif image be more efficient? Or would that add more network requests?
What is the most optimal solution?
Here's the code, almost irrelevant to my question:
<div class="slide">
<button> Click to load images </button>
<img class="lazy" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="http://lorempicsum.com/up/627/200/3" alt="" />
<img class="lazy" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="http://lorempicsum.com/nemo/627/300/4" alt="" />
<img class="lazy" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="http://lorempicsum.com/up/627/300/4" alt="" />
</div>
jQuery:
$.fn.lazyLoad = function(){
var lazy = $(this).find('img[data-src]');
$(lazy).each(function(index){
$(this).attr('src', $(this).attr("data-src"));
});
};
$('.slide').click(function(){
$(this).lazyLoad();
});
And a jsfiddle:
jsfiddle
Use <div> and background-image they load faster (at least perceived faster), but if you are concerned about accessibility and/or SEO, go with what you have already. I optimized the jQuery a little:
Use .lazy instead of [data-src] class selectors are faster than attribute selectors.
When getting or setting data-* attributes, it's better to use the newer way by using .data() instead of .attr().
The background-image property can be manipulated by the .css() method.
SNIPPET
$.fn.lazyLoad = function() {
var lazy = $(this).find('.lazy');
lazy.each(function(index) {
var data = $(this).data('src');
$(this).css({
'background-image': 'url(' + data + ')'
});
});
}
$('.slide').on('click', function() {
$(this).lazyLoad();
});
.lazy {
width: 627px;
min-height: 200px;
background-repeat: no-repeat;
background-size: contain;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slide">
<button>Click to load images</button>
<div class="lazy" data-src="http://lorempicsum.com/up/627/300/3"></div>
<div class="lazy" data-src="http://lorempicsum.com/nemo/627/300/4"></div>
<div class="lazy" data-src="http://lorempicsum.com/up/627/300/4"></div>
</div>
Why would you use base64 encoding for that? Encoded images are larger and so have a longer load time however say you are sending an email from a to b then you have to embed the image in the email. That is why it is possible to embed images in html. Emails have to be encoded to standards one of which is base64.
I'm using a combination of html and very basic jQuery in order to make an img that functions like a button so that when the img is clicked, the src of the image (src1) changes to another src (src2, that being the image of the button having been pushed down).
I'm trying to make it so that if that same image (now src2) is clicked, then it changes back to the original src (src1).
I hope that wasn't a headache to understand, and I can clarify if needed.
Here's what I have for code:
<!--Html-->
<body>
<img id="pixelbutton" src="images/pixelbutton.png" onClick="pixelbuttonclick()" />
</body>
/* jQuery */
function pixelbuttonclick() {
var pixelbutton = document.getElementById("pixelbutton");
if (pixelbutton.style.src=="images/pixelbutton.png") {
document.getElementById("pixelbutton").src="images/pixelbutton_press.png";
}
else if (pixelbutton.style.src=="images/pixelbutton_press.png") {
document.getElementById("pixelbutton").src="images/pixelbutton.png";
}
}
I'm a huge noob, so less complicated answers, if possible, are appreciated.
I recommend to place your function in head section for consistency if you haven't.
Your "pixelbutton.style.src" was wrong since the src is an attribute and not in css, but manipulating URL is rather difficult. I agree with Amareswar's answer to use background image in css.
Another way I did this is using the jQuery code:
<script type="text/javascript">
$(document).ready(function(){
$("#pixelbutton").click(function(){
$("#pixelbutton").css({'display':'none'})
$("#pixelbutton2").css({'display':'block'});
})
$("#pixelbutton2").click(function(){
$("#pixelbutton2").css({'display':'none'})
$("#pixelbutton").css({'display':'block'});
})
})
</script>
and modifying your body code:
<img id="pixelbutton" src="images/pixelbutton.png" />
<img id="pixelbutton2" src="images/pixelbutton_press.png" style="display: none;" />
Instead of repalcing URL can use a div with background-image css property and set another class on click of the div with another image as background image
I am wondering if there is a way to give the HTML button tag, <button> an image so the image is click-able on my webpage. That way when users click on the image I can have other things happen
This doesn't seem to be working, and was wondering if it is even possible
HTML code -
<button>
<img src="images/dagger.png" width="10%" height="10%" id="dagger" />
</button>
Not quite sure what you are trying to achieve but maybe this example helps.
HTML
<button>
<img src="http://www.w3.org/html/logo/downloads/HTML5_Logo_32.png" id="dagger" />
</button>
JavaScript
$(function(){
$("#dagger").click(function(){
alert("click");
});
});
You could set the image as button background
button {
background-image:url('images/dagger.png');
}
I was having similar issues, and thought I would drop this post for anyone in the future that sees this thread.
From my understanding, you're not wanting a BUTTON, but a clickable image that acts as a button. Here is what I did:
HTML:
<img src="images/dagger.png" width="10%" height="10%" id="dagger" />
JavaScript/jQuery:
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script>
$("#dagger").click(function(){
// what you wanted your button to do when user clicks it
});
</script>
By doing it this way, you get rid of the normal "button" image, and you can use whatever image you want as your clickable button. As well, you get the same functionality that you're wanting from the button, and it opens up many other paths to achieving your purposes.
Hope it helps!
Another method I use is simply putting the onclick event on the img itself to call a function.
html:
<img src="images/dagger.png" width="10%" height="10%" id="dagger" onclick="myFunction()" />
JS:
<script>
myFunction() {
// what I want to happen if user clicks image
}
</script>
Depending upon what you're doing, and what you're trying to manipulate, all of the examples on this page will provide you with better/worse ways of doing it. Using the onclick event within the img tag, you can pass variables/information to the function to utilize, and then have the function relay it to your PHP/ASP/etc.. As well, if you were dealing with a form, you can have your function handle information/submission, rather than the default submission that forms use. Use your imagination with the problems you come across, and decide which method works out better. Never settle for learning just one way of doing something.
Normally you wouldn't use a button you can just bind the click event to the image with JavaScript.
But if you must have a button you can style the button using CSS and the background-image property.
Is there a way to tell the browser to look down a list of image URLs until it finds one that works? Pure HTML would be preferred, but I'm guessing JavaScript is probably necessary here (I'm already using JQuery, so it's not an issue).
EDIT: Thanks for your answers! I'll add a few clarifications:
By "works" I mean the image can be displayed.
I specifically want to do this on the client side.
This seems like a bad idea to me. What is the purpose of this feature? It sounds like you want something equivalent to this:
<img src="/images/file1.jpg" src2="/images/file2.jpg" src3="/images/file3.jpg">
Where the browser would try each file in succession. The problem with this approach is that it significantly increases the http traffic required and the latency. The best approach is to dynamically construct the page using the correct image tags ahead of time. Using a server-side approach you can try to load the image from the disk (or database or wherever the images are) and dynamically include the best url in the page's image tag.
If you insist on doing it client-side, you can try loading multiple image tags:
<img src="file1.jpg" alt="" onerror="this.style.display='none'">
<img src="file2.jpg" alt="" onerror="this.style.display='none'">
<img src="file3.jpg" alt="" onerror="this.style.display='none'">
<img src="file4.jpg" alt="" onerror="this.style.display='none'">
<img src="file5.jpg" alt="" onerror="this.style.display='none'">
<img src="file6.jpg" alt="" onerror="this.style.display='none'">
This will result in a page that appears to have lots of images but they disappear as the page loads. The alt="" is required to make Opera not show the broken image placeholder; the onerror is required for Chrome and IE.
If that's not spiffy enough, and if all your images are the same size, and that size is known, you could stack a bunch of images one on top of the other, so that the first image that loads hides all the others. This worked for me in Opera, FF, and IE8. It loads the last image in the list that exists. Note that this wastes bandwidth and memory because every image is loaded.
<div style="width: 50px; height:38px; background-image: url(file1.jpg);">
<div style="width: 50px; height:38px; background-image: url(file2.jpg);">
<div style="width: 50px; height:38px; background-image: url(file3.jpg);">
<div style="width: 50px; height:38px; background-image: url(file4.jpg);">
<div style="width: 50px; height:38px; background-image: url(file5.jpg);">
<div style="width: 50px; height:38px; background-image: url(file6.jpg);">
<div style="width: 50px; height:38px; background-image: url(file7.jpg);">
</div></div></div></div></div></div>
Finally, there is the JavaScript approach:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<script type="text/javascript">
var image_array = ['file1.jpg', 'file2.jpg', 'file3.jpg', 'file4.jpg', 'file5.jpg','file6.jpg' ];
function load_img(imgId, image, images, index) {
image.onerror = function() {
load_img(imgId, this, images, index+1);
};
image.onload = function() {
var element = document.getElementById(imgId);
if (element) {
element.src = this.src;
element.style.display = 'block';
}
};
image.src = images[index];
}
</script>
</head>
<body>
<img id="id_1" alt="" style="display: none;">
</body>
<script>
load_img('id_1', new Image(), image_array, 0);
</script>
</html>
If you're trying setting multiple sources to the image tag depending on the resolution, srcset is the paramenter you're looking for.
<img src="images/space-needle.jpg"
srcset="images/space-needle.jpg 1x, images/space-needle-2x.jpg 2x,
images/space-needle-hd.jpg 3x">
If I am reading the specification correctly, you should be able to do this with the HTML object element. <object> tags can be nested and thereby provide a chain of resources that are tried each in turn to be rendered and upon failure the user agent continues with the next one.
Note, though, that this behaviour is/was buggy for several browsers and versions.
Assuming you mean the browser being able to retrieve some content with an HTTP response code 200 for a specific URL, then the answer is : NO from the client side using only HTML.
In other words, you can't have an element (e.g. img) and specify multiple URLs to "try".
Of course you can craft something on the server side: a request comes in for resource X and the server has a list of URLs that "work".
INAJNBAM (I'm not a Javascript Ninja by any means), but in pseudo code, maybe try something like this after the page has loaded: (OR, now that I think about it, this would work well with PHP too)
$images = array('img1.jpg', 'img2.jpg', 'img3.png'....)
foreach $images as $img
{if $img.height > 0px
{print "<img src="$img" />"
end}
};;;;
In fact PHP would be even better because I presume in JS this would result in images flashing up on the screen at the end of the pageload. Try it out in PHP and see if something like this fits your bill.
NOTE: I added 4 semi colons at the end. I know Javascript always wants 'em, I just didn't know where to stick them.
If by saying "works" you mean the image can be loaded, you can use the "load" function on an image( in your case a bunch of images) of jQuery and inside of it declare the functionality that will be fire once the loading of the an image is completed.
If by saying "works" you mean that the HTTP status code is ok then use an ajax call using jquery.
function getUrlStatus(url) {
$.ajax({
url: url,
complete: function(xhr) {
return xhr.status;
}
});
}
You could enter the URL of some server-side application/script that serves up the image from whatever image source it can find.
You could do this in ASP.Net with an HTTPHandler that sends a response of content-type=image/jpg.
Other than ASP.Net there are amny other server-side options such as Perl, PHP...