How to change the content of an img src?

Asked

Viewed 4,689 times

1

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>

html css media-queries

  • I would recommend Less/scss, who do it dynamically.

5 answers

1

You can do with the source html without using css, follow the code below:

  • When the screen is on maximum 479px shows the image-mobile.jpg

  • When the screen is on minimum 480px shows the image.jpg Case

  • Otherwise it shows the default image.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>

1


With HTML and CSS only, 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 placing 2 img with src, and hiding one image after another, but this would cause your page to load 2 images in the Upload instead of one, which would imply performance problems. Looking on that side, css media will not load the 2 backgrounds in all sizes. It is possible to see this behavior in this response[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 put 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 apply some mobile detection script as described in this response by applying a basic mobile logic 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 just tests the browser, I did not find any script that would better test the screen size, which makes it not very responsive.

I recommend using CSS, it is more practical and without many programming logic and 100% responsive.

  • 1

    True, the Mobile shipment is always a concern. Just a question, I ran the code you posted and the image didn’t show up, what I need to do to make it appear?

  • No, in the same HTML code. I didn’t get to test the second option because I don’t have the option to use Javascript yet

  • I will add this to a testing site and put it working. Give me a few minutes.

  • Okay, thank you very much!!

  • I updated with the snippet, you can see well the operation of js and CSS and as well as the impact of each on loading.

0

With a simple javascript you solve this:

At 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" />');
}

On 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>');
}

0

The background-image does not change the attribute src tag img. If you want you will need JS. Observing your code you can do so:

    <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 you hide using CSS the request is still made. Try to avoid this practice.

For this question the https://github.com/scottjehl/picturefill it is my choice.

  • This solves the problem, but brings an implication in the page loading performance by bringing 2 images instead of 1. If mobile, any Kb counts. Using css media will not load the 2 backgrounds on the same request unless there is a change of page size as noted on this https://cloudfour.com/examples/mediaqueries/image-test/#T5 test

  • @Leonancarvalho The example was more for him to understand even..

0

The previous answers are all valid. But they follow my tips. Your code is on the right line, but there are some flaws see my remarks.

This part of the code has syntax error, otherwise the image should 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.

Browser other questions tagged html css media-queries

You are not signed in. Login or sign up in order to post.