How to make an image link to a phone number only on mobile using CSS and HTML?

Question

Instead of just having text for example

If I do <a href="tel:[phone]">1-800-123-4567</a> then it will be broken on desktops.

If I do [phone] then it will display as the number on desktop but should automatically become a link on Android and iPhone

But if I want to make an image like this:

Is there a solution, possibly with media query or any other way. That I can make this image display on desktop and mobile but on mobile function as a button? This is for email so only HTML/CSS options.

Based on the answers I have this and it didn't work either:

@media screen and (min-width: 0px) and (max-width: 400px) {
#my-image { display: block; }  /* show it on small screens */
#my-link { display: none; }  /* hide it on small screens */
}

@media screen and (min-width: 401px) and (max-width: 1024px) {
#my-image { display: none; }   /* hide for all below 401px*/
#my-link { display: block; }   /* show for all above 401px*/
}

Along with:

<div id="my-image">
<a href="tel:[phone]">Call Now!</a>
</div>

<div id="my-link">
Call 1-800-328-4766
</div>

And it still is not working, both links are showing up.

Answer 1

Deleted my old answer, because it was poor. Please try this http://jsfiddle.net/qDUqS/

The telephone number looks the same both in small screen and in big screen, but it acts like a link, only on smaller screen.

Html:

<span class="phone"><img src="http://goo.gl/PdeeU" /><a href="tel:[phone]">1-800-123-4567</a><p>1-800-123-4567</p></span>

CSS:

.phone
{
    background-color: #152C48;    
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
    padding: 4px;
}
a
{
    display: inline-block;
    text-decoration: none;
    color: #ffffff;
    padding: 0px;
}
img
    {
        vertical-align: middle;
        width: 24px;
        height: 24px;
        padding: 0px;
    }
p
{
    display: none;
    color: #ffffff;
    padding: 0px;
}

@media only screen and (min-width: 480px) and (max-width: 1920px)
{
    a
    {
        display: none;
    }
    p
     {
        display: inline-block;
     }
}