homepage Welcome to WebmasterWorld Guest from 54.167.185.110
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Mobile Internet / Mobile Web Site Design and Development
Forum Library, Charter, Moderators: not2easy

Mobile Web Site Design and Development Forum

    
Image phone number - How to make it link
GodLikeLotus




msg:4618708
 10:35 pm on Oct 23, 2013 (gmt 0)

Is there a way of making an image of a phone number become a link that will trigger the dialer on a smartphone visitor? We would really prefer to use the image as it fits the design perfectly, as opposed to just using a text number.

Can anyone help please?

 

SevenCubed




msg:4618731
 1:27 am on Oct 24, 2013 (gmt 0)

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.

lucy24




msg:4618742
 4:49 am on Oct 24, 2013 (gmt 0)

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

GodLikeLotus




msg:4618839
 4:20 pm on Oct 24, 2013 (gmt 0)

SevenCubed, thank you, that works perfectly.

GodLikeLotus




msg:4619163
 12:30 am on Oct 26, 2013 (gmt 0)

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?

SevenCubed




msg:4619170
 1:06 am on Oct 26, 2013 (gmt 0)

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?

lucy24




msg:4619171
 1:06 am on Oct 26, 2013 (gmt 0)

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.

SevenCubed




msg:4619172
 1:11 am on Oct 26, 2013 (gmt 0)

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

GodLikeLotus




msg:4619175
 1:44 am on Oct 26, 2013 (gmt 0)

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.

SevenCubed




msg:4619178
 2:24 am on Oct 26, 2013 (gmt 0)

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.

SevenCubed




msg:4619182
 2:59 am on Oct 26, 2013 (gmt 0)

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".

SevenCubed




msg:4619183
 3:55 am on Oct 26, 2013 (gmt 0)

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?

SevenCubed




msg:4619346
 2:56 pm on Oct 27, 2013 (gmt 0)

@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.

phranque




msg:4619468
 7:20 am on Oct 28, 2013 (gmt 0)

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

lucy24




msg:4619474
 8:34 am on Oct 28, 2013 (gmt 0)

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".

GodLikeLotus




msg:4619524
 1:47 pm on Oct 28, 2013 (gmt 0)

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

onlineleben




msg:4619772
 11:44 am on Oct 29, 2013 (gmt 0)


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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Mobile Internet / Mobile Web Site Design and Development
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved