Image clicks not possible on many mobile devices?

Sitepoint Members,
I got this message from W3C: assumes that the user will click on a specific area of an image, which is not possible on many mobile devices. Replace the image map by another input mechanism (e.g. a list of links).
What is the best way to handle this for mobile devices? Just have a link “Mobile” going to the same place as the image?

Thanks,

Chris

Hi,

It seems like you are talking about image maps and instead of area and map co-ordinates you could instead place absolute anchors over the image to allow parts of the image to act as links to different places. The only drawback is that you have to use rectangular areas.

We’d probably need to see an example of what you are trying to do to be sure.

It’s just an image, 'not sure why they’re calling it an image map. For mobile devices, if programmers aren’t using image links, what other links (“input mecanisms”) are there besides text links?

Thanks Paul

Seems to be some confusion here?

An image that is a link (i.e. has an anchor around it) should work fine in mobile.

Do you have the code that caused you to get this message?

This all of what is written in their validator results.
An input element with type attribute set to “image” is present. Why?
input type=‘image’ assumes that the user will click on a specific area of an image, which is not possible on many mobile devices. How? Replace the image map by another input mechanism (e.g. a list of links).Where <input alt="No sign up." name="submit" src="/pp.png" type="image" />

Here’s the block of code:

[code]


[/code]

Thanks

Aha you never mentioned "input type=“image” :smile:

I never use those anyway. Just use a normal submit button (input type=“submit”) with a background image applied (or use button type=“submit” if more complicated styling is required).

.submit{
	margin:0;
	padding:0;
	border-radius:0;
	border:none;
	width:100px;/* size to fit*/
	height:25px;/* size to fit*/
	display:inline-block;
	vertical-align:middle;
	background:url(images/example.png);	
	text-transform:capitalize;/* old ie fix*/
	text-indent:-999em;/* hide text if needed*/
	overflow:hidden;
}

HTML:

<input class="submit" type="submit" name="submit" id="submit" value="Submit">

I couldn’t find code for “(input type=“submit”) with a background image applied” that works. . Is this it

input[type=submit] { background: url(http://xyz.png); border: 0; display: block; height: 22 width: 220; }

Thanks

? I just gave you the full PaulOb version in my post :smile:

It’s the best. Use it :wink:

No.

You are missing the units, you haven’t negated the padding (or hidden the text) or turned border-radius off.

1 Like

Ok. I thought the cde was for "(or use button type=“submit” if …) " When I read “Just use a normal submit button (input type=“submit”) with a background image applied” it sounded like it woud be a couple of lines of common code.

It will work for both. :slight_smile:

(The button type=submit allows for richer styling as you can add inner elements and multi-line text inside the button element.)

They might not think it’s a link because the little pointiing/gloved hand doesn’t show as it does with the type=image code.

Adding cursor:pointer should solve that.

However, inputs don’t generally have cursor:pointer applied by default anyway.

There’s really no need for input type="image anyway and I don’t think I’ve used that since 1999 :smile:

I wait/look for the pointer before clicking an image. If I don’t see it I think it’s not a link. So I woudl add
a:hover {cursor:pointer} ?

but that won’t work because a href isn’t being used.

I guess it’s just hover {cursor:pointer}

.submit{
margin:0;
padding:0;
border-radius:0;
border:none;…
hover(cursor:pointer} ?

I guess that’s input hover(cursor:pointer} ?

Just add it to the basic rule. No need to add an extra hover rule.

.submit{
	cursor:pointer;
}

That works great Paul

Thanks so much.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.