How to change the contents of an img src?

Question

How to change the contents of an img src?

Navigation

#1 by (1 votes)
#2 by (0 votes)
#3 by (0 votes)
#4 by (0 votes)
#5 by (0 votes)

1

I'm trying so, but it does not 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

asked by anonymous 17.04.2017 / 14:48

5 answers

1

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

When the screen has maximum 479px shows the image-mobile.jpg

When the screen has minimum 480px shows the image.jpg Case

Otherwise show 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>

17.04.2017 / 16:33

0

The background-image does not change the src attribute of the img tag. If you want, you will need JS. By looking at your code you can do 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>

Note: If you hide using CSS, the request is still made. Try to avoid this practice.

For this question link is my choice.

17.04.2017 / 15:03

0

The above answers are all valid. But follow my tips. Your code is on the right line, but you have some flaws see my observations.

This part of the code has a syntax error, otherwise the image must be in the same directory as the page. One more thing, put the div size, width and height otherwise the image will not appear.

        .mobile 
        {
            background-image: url background-image: url 
            ("imgmobile.jpg");
            display: none;
        }

Correcting it 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.

18.04.2017 / 13:53

0

With a simple javascript you can solve this:

At the top 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>');
}

17.04.2017 / 16:55

How to put data in the session flash when the redirection is done in Silex? Difficulty in assigning valorer in plsql

score 0 · Accepted Answer

With HTML and CSS only, you can not 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 to 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: link

You could be putting 2 img with src, and hiding one image after another, however this would cause your page to load 2 images in the loader instead of one, which would imply performance problems. Looking at this side, css media will not load the 2 backgrounds in all sizes. You can see this behavior in this answer: link

Or, you can use javascript, so you should be able to change the src of the img tag as below, and then by 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 the html vc you add a "preload" image it 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 or destktop logic [ENG]: link

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 found no script that tested the screen size better, which makes it not very responsive.

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