I'm not sure if I'm understanding the question. If you simply want the image to dial a number when tapped you can use this I think:

<a href="tel:7777777777"><img alt="Give Us a Call" height="20px" src="phone.jpg" width="60px" /></a>

But that won't trigger the dialer automatically, they'll still have to know it's a clickable link to set it in motion.

We would really prefer to use the image as it fits the design perfectly, as opposed to just using a text number.

That's funny. My first reaction to the subject header was: Why would you want to? The whole point of using an image as a link-- most often with e-mail addresses-- is to keep robots from sweeping through and harvesting every contact point they find. This may be OK if the phone number leads only to an office desk staffed by someone who gets paid to field calls. But if there's any way it will ever end up with a human, such as auto-transferring to a personal number when you're out of the office ...

SevenCubed, thank you, that works perfectly.

HELP: I have replaced all our branches phone images with the code suggested above, but then ran an XML sitemap generator and it is showing ALL these as 404 errors.

We use responsive design so the whole purpose of this was to help smartphone users be able to just click the link to call their local branch.

Have I made a huge mistake here?

Any ideas?

What are you getting a 404 for? The page or the image? You must not have simply copied what I pasted but did change it to your own image name and path right?

Don't panic.

Test a few random pages as a human using the appropriate device.* It sounds more like a shortcoming in the sitemap generator: it doesn't understand the link format and thinks it's supposed to look for the URL http://www.example.com/mailto:/more-stuff-here. Or telephonic equivalent, of course. You can also take a quick look in your logs and see what the generator was requesting.


* While you're at it you may want to test it using a few inappropriate devices as well. Make sure it doesn't have Unintended Consequences.

^ I squeezed mine in 343/1000's of a second quicker :p

SevenCubed, yes I changed everything, but the sitemap generator is seeing domain.com/tel:123456789 as a link, and reporting it as a 404 page not there.

It works perfectly on smartphones and does exactly what we wanted, however, on a PC when you hover on the image it sees it as a link to domain.com/tel:123456789 and this exactly what the XML sitemap generator is seeing. It cannot fetch it as a page and gives a 404 error.

Yeah I see what you mean, I just tried it here. I used this a long time ago and don't remember if I handled it any differently. I'll check around because I don't currently have it implemented on any sites but in the mean time someone else might jump in with suggestions.

BTW the original I posted above should NOT have the "px" in the height and width:
<a href="tel:7777777777"><img alt="Give Us a Call" height="20px" src="phone.jpg" width="60px" /></a>

Fixed that and the page validates and gives no errors or warnings concerning use of tel format.

I'm going to look around for clues.

There are solutions but how do you feel about PHP? Are you (or someone who works with you) comfortable with a few lines of PHP while referencing an existing library?

I just did a search on DuckDuckGo using <a href="tel: as the search term and I'm reading something at StackOverFlow from the results.

As an aside I've discovered something I may be able to make good use of myself with the referenced "php-mobile-detect class".

I'm still looking at this but it's almost midnight here, quitin' time or I turn into a pumpkin (not a good thing to be at this time of the year). I'll follow up in the morning.

Did you implement this on a live site prior to realizing this?

@GodLikeLotus I'm hanging in here until I get some feedback on what I previously asked.

I'll add a bit more though, general observations, from my point of view I think it's beginning to amount to quite a bit of hoops to jump through for the sake of accomplishing what you want.

It can also be done via JavaScript. Essentially you're going to need to probe for mobile and write either:
<a href="tel:7777777777"><img alt="Give Us a Call" height="20px" src="phone.jpg" width="60px" /></a>
or
<img alt="Give Us a Call" height="20px" src="phone.jpg" width="60px" />
into the document based on type of user accessing the page.

Also I'm guessing there would only be a need to display it for phone users, not all mobile devices (I've never seen anyone holding an iPad to their ear and using it as a phone, yet). In that case it might be easier to accomplish querying viewport width with JavaScript.

It's not something that can be accomplished with simple HTML as I originally thought.

If this was my own dilemma I'd simply recreate the image without the phone number and position the phone number over the place-holder area of the image with CSS positioning. But with that said, I can't see the image in question so there may well be a very good reason why you are trying to do it like this.

many user agents including most desktop browsers and apparently your xml sitemap generator don't support the tel: URI scheme.

I've never seen anyone holding an iPad to their ear and using it as a phone, yet

.. Let alone a desktop, but nevertheless my father routinely has his computer dial the phone for him. So you never know.

Lotus, have you run into problems other than the sitemap generator kicking up a fuss? If that's all there is, I would file it alongside php warnings and gwt errors as "Yes, thank you, your concern has been noted".

Based on what has been suggested and what we have read, we have elected to run it anyway and simply ditch the sitemap generator and all its 404 errors.

The 2 search engines G & B DO understand that it is a phone number and not a web page, and that the link is for smartphone users to help them quickly call the number.

Thanks for all your help and feedback.

Regards

Nick

I've never seen anyone holding an iPad to their ear and using it as a phone, yet

.. Let alone a desktop, but nevertheless my father routinely has his computer dial the phone for him. So you never know.

Don't forget users who have installed Skype on their desktops. I remember Firefox showing phone numbers as dialable links to the Skype App.