How to change the content of an img src?
I'm trying like this but it doesn't work
<head>
<title>Woman</title>
<style>
body{
background: black;
}
@media screen and (max-width: 767px)
{
.mobile
{
background-image: url ("imgmobile.jpg");
display: block;
}
.desktop
{
background-image: url ("imgdesktop.jpg");
display: none;
}
}
@media screen and (min-width: 767px)
{
.mobile
{
background-image: url ("imgmobile.jpg");
display: none;
}
.desktop
{
background-image: url ("imgdesktop.jpg");
display: block;
}
}
</style>
</head>
<body>
<a href="https://www.w3schools.com">
<div class="mobile">
<img src="">
</div>
<div class="desktop">
<img src="">
</div>
</a>
</body>
5 answers
With only HTML and CSS , it is not possible to change the image src. If you do not replace the img tag with div tag, then you may be able to change the image that is set as the background as
//Apenas exemplo de como implementar via javascript
function desktop() {
document.getElementById('my-img').src = 'http://placehold.it/200/3f1';
}
function mobile() {
document.getElementById('my-img').src = 'http://placehold.it/640/cf1';
}
// ref. https://stackoverflow.com/a/11381730/3706998
function mobilecheck() {
var check = false;
(function(a) {
if (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0, 4))) check = true;
})(navigator.userAgent || navigator.vendor || window.opera);
return check;
}
if (mobilecheck()) {
mobile();
} else {
desktop();
}@media screen and (max-width: 639px) {
.mobile {
background-image: url('http://placehold.it/200/3f0');
background-color: #3f0;
background-position: center;
background-size: cover;
display: block;
width: 200px;
height: 200px;
}
.desktop {
background: none;
display: none;
}
}
@media screen and (min-width: 640px) {
.mobile {
background: none;
display: none;
}
.desktop {
display: block;
background-image: url("http://placehold.it/640/cf0");
background-color: #cf0;
background-position: center;
background-size: cover;
width: 640px;
height: 640px;
}
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<meta name="viewport" content="width=device-width">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
</head>
<body>
<h1>CSS</h1>
<a href="https://www.w3schools.com">
<div class="mobile"></div>
<div class="desktop"></div>
</a>
<h1>JS</h1>
<a href="https://www.w3schools.com">
<img id="my-img" src="http://placehold.it/1/000" />
</a>
</body>
</html>Plunker: http://plnkr.co/edit/O3sio14WYS07JRlkQdIl?p=preview
You could be putting 2 IMG with src, and hiding one image after another, but this would cause your page to load 2 images in the loader instead of one, which would entail performance problems. Looking this way, css media will not load the 2 backgrounds in all sizes. You can see this behavior in this answer[ENG]: https://stackoverflow.com/a/16961944/3706998
Or, you can use javascript, so you should be able to change the src of the img tag as below, and then by in some mobile detection script.
function desktop() {
document.getElementById('#my-img').setAttribute('src', 'http://i.imgur.com/3dIpk0X.jpg');
}
function mobile() {
document.getElementById('#my-img').setAttribute('src', 'http://i.imgur.com/3dIpk0X.jpg?=1');
}
And in html vc adds an image of " preload" can be a transparent gif 1x1:
<img id="my-img" src="blank.gif" />
And applies some mobile detection script as described in this answer by applying a basic logic of mobile or destktop[Eng]: https://stackoverflow.com/a/11381730/3706998
function mobilecheck() {
var check = false;
(function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))) check = true;})(navigator.userAgent||navigator.vendor||window.opera);
return check;
};
if(mobilecheck()){
mobile();
}else{
desktop();
}
The javascript script above, only tests the browser, I did not find any script that better tested the size of the screen, which makes it not very responsive.
I recommend using CSS, it is more practical and without a lot of programming logic and 100% responsive.
You can do with the Source of html without using css, follow the code below:
-
When the screen is at maximum 479px shows the image-mobile.jpg
-
When the screen has at least 480px shows the image.jpg case
-
Otherwise shows the image-default.jpg
<picture> <source srcset="imagem.jps" media="(min-width: 480px)"> <source srcset="imagem-mobile.jpg" media="(max-width: 479px)"> <img src="imagem-default.jpg"> </picture>
background-image does not change the src attribute of the img tag. If you want, you'll need JS. Looking at your code you can do like this:
<head>
<title>Woman</title>
<style>
body{
background: black;
}
.desktop{
display: none;
}
@media screen and (min-width: 767px)
{
.mobile
{
display: none;
}
.desktop
{
display: block;
}
}
</style>
</head>
<body>
<a href="https://www.w3schools.com">
<div class="mobile">
<img src="imgmobile.jpg">
</div>
<div class="desktop">
<img src="imgdesktop.jpg">
</div>
</a>
</body>
Obs.: if hide using CSS the request is still made. Try to avoid this practice.
For this question the https://github.com/scottjehl/picturefill is my choice.
The previous answers are all valid. But follow my tips. Your code is on the right line, but has some flaws see my observations.
This part of the code is with Syntax Error, other than that the image must be in the same directory of the page. One more thing, put the size of the div, width and height otherwise the image will not appear.
.mobile
{
background-image: url background-image: url
("imgmobile.jpg");
display: none;
}
Correcting would look like this:
.mobile
{
background-image: url("imgmobile.jpg");
display: none;
width: 56px;
height: 56px;
}
Use this line of reasoning for the rest of the code.
With a simple javascript you solve this:
In the head of your document:
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
document.write('<link rel="stylesheet" type="text/css" href="mobile.css" />');
}else{
document.write('<link rel="stylesheet" type="text/css" href="desktop.css" />');
}
In the body of your document:
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
document.write('<div class="mobile"><img src="imgmobile.jpg"></div>');
}else{
document.write('<div class="mobile"><img src="imgdesktop.jpg"></div>');
}