Change logo image based on screen resolution of the browser
Question
I have two images, one with the logo in black and one with the logo in white. I would like to have the white logo when the browser is less than 768px width and black logo when it's bigger. I tried something but is not changing in real time, only if I reload the page.
$(function() {
if($(window).width() < 768){
$('.logo').find("img").attr("src","/images/Trin-02.png");
}
else{
$('.logo').find("img").attr("src","/images/Trin-01.png");
}
});
Any suggestion? Thank you
6 answers
solution1
5 ACCPTED 2016-04-04 11:59:07
https://api.jquery.com/resize/
You are correctly checking for the window's width, but you are only doing it when the page first loads in!
Instead, use the resize function to run a script every time the screen is resized
$(window).on("resize", function(){
if($(window).width() < 768){
$('.logo').find("img").attr("src","/images/Trin-02.png");
}
else{
$('.logo').find("img").attr("src","/images/Trin-01.png");
}
})
though this sounds more like a job for css media queries, though we don't about all your needs and requirements :)
solution2
5 2016-04-04 12:04:52
You can do it just with css and media queries.
img { width: 400px; content:url("http://mnprogressiveproject.com/wp-content/uploads/2014/02/kitten.jpg"); } @media screen and (max-width: 768px) { img { content:url("http://images6.fanpop.com/image/photos/34800000/Kittens-3-animals-34865509-1680-1050.jpg"); } }
<img alt="">
solution3
2 2016-04-04 12:00:46
I have a pure JavaScript solution
document.getElementsByTagName("BODY")[0].onresize = function() {
if (window.outerWidth < 768) {
document.getElementById("img").src = yourFirstImage.png;
} else {
document.getElementById("img").src = yourSecondImage.png;
}
}
solution4
1 2016-04-04 12:12:23
If you have the vector version of logo, make an imgname.SVG then change color using css. (SVG is scalable vector graphics and lmage will be of good quality)
HTML
<div class="logo"> <a href="index.html"><img src="images/imagename.svg"></a> </div>
CSS
@media only screen and (max-width: 768px) {
.logo img{
background-color:#000;
height:50px;
width:100%;
}
}
solution5
0 2016-04-04 12:07:07
Here is the most simple solution, using CSS3 media queries,
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>media queries</title> <style> @media screen and (max-width: 780px) { body { background-image: url("/images/Trin-02.png"); } } @media screen and (min-width: 780px) { body { background-image: url("/images/Trin-01.png"); } } </style> </head> <body> </body> </html>
So, u can have image acc. to device you are using
solution6
0 2016-04-04 12:22:29
There is no need to target the image multiple times. Save a reference once, use it multiple times.
Create a callback function for the resize event and bind it. That way you can also call the callback function to set the right image on init.
var image = $('.logo').find("img");
function setImage() {
var windowWidth = window.innerWidth,
src = (windowWidth < 768) ? '/images/Trin-02.png' : '/images/Trin-01.png';
image.attr('src', src);
}
$(window).on('resize', setImage);
setImage();
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.