Question

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 using 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?

Answer 1

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.