CSS/HTML - Hide images on mobile phone and use an alternate text

I currently have a page that generates a table from an SQL database using PHP, including one column that contains images. Due to us now having to work on a mobile platform, I'm looking for a way to hide the images. I'm currently usi开发者_开发技巧ng display: none on an antiscreen.css file, but as the images are links, it doesn't show the links

For clarity, when the image is on a PC browser it appears like this:

<td>
  <a href="link to image source:>
    <img  height=80 alt='Text I want to display' src="link to image source" />
  </a>
</td>

And when on a mobile the image, link and text are hidden using the display:none method.

So how would you recommend I work this out?

I would probably do this:

<td>
  <a href="link to image source:>
    <img  height=80 alt='Text I want to display' src="link to image source" />
    <span class="mobileonly" src="link to image source">Text I want to display</span>
  </a>
</td>

Then I would set span.mobileonly { display: none; } on the main stylesheet and span.mobileonly { display: inline; } in antiscreen.css. The advantage is that the mobile link will also be easy to style.

Another option, which works for all screen sizes under a certain nr. of pixels is to use a media query, basically similar to the above one but with the advantage that it works on any screen size smaller than the defined number of pixels.

    /* Media Query for mobile */

    @media screen and (max-width: 480px) {  

    /* This resizes tables and images to be 100% wide with a proportionate width */

    /* Hide stuff on mobiles */
    table[class=emailnomob],td[class=emailnomob],img[class=emailnomob],span[class=emailnomob]{display:none !important;}

    /* Additional Media Query for tablets */

    @media screen and (min-width: 480px) and (max-width: 1024px) {

    /* Hide stuff on tablets */
    table[class=emailnomob],td[class=emailnomob],img[class=emailnomob],span[class=emailnomob]{display:none !important;}

This should covers both mobile and tablet devices.

Code courtesy of .net email tutorial. I only stripped the parts you don't need.

Usage:

<img class="emailnomob" height=80 alt="Text I want to display" src="link to image source" />