Compatible equivalent for 'input type image' 1

[AndyGroom]

I've got a form on a webpage which has graphical buttons to trigger different actions - here's the code for one such button:

<input class='graphical' type='image' src='./nav_callin.gif' alt='Call in' value='Call in' onClick="this.form.action='./callin.php'">

This works fine but on some mobile phones the image is missing, presumably because the browser doesn't support the input type 'image'. I've tried to figure out how to achieve the same result using <a> and <img> tags but I can't get it to work, do I need to use Javascript? This is what I tried:

<img class='graphical' border=0 src='./nav_callin.gif' alt='Call in' onClick="this.form.action='./callin.php'">

- Andy
___________________________________________________________________
If you think nobody cares you're alive, try missing a couple of mortgage payments

 

[feherke]

Hi

do I need to use Javascript?

You are already using JavaScript.

<img class='graphical' border=0 src='./nav_callin.gif' alt='Call in' onClick="[red]this.form[/red].action='./callin.php'">

The [tt]img[/tt] is not a [tt]form[/tt] element, so it has no reference to the container [tt]form[/tt]. Additionally, you will have to call the [tt]form[/tt]'s [tt]submit()[/tt] method "manually".

[b]<img[/b] [maroon]class[/maroon][teal]=[/teal][green][i]'graphical'[/i][/green] [maroon]border[/maroon][teal]=[/teal][green][i]0 src[/i][/green]=[green][i]'./nav_callin.gif'[/i][/green] [maroon]alt[/maroon][teal]=[/teal][green][i]'Call in'[/i][/green] [maroon]onClick[/maroon][teal]=[/teal][green][i]"[highlight]document.formname[/highlight].action='./callin.php'[highlight];document.formname.submit()[/highlight]"[/i][/green][b]>[/b]

But personally I would use a regular [tt]submit[/tt] [tt]input[/tt] with some decoration :

[b]<input[/b] [maroon]class[/maroon][teal]=[/teal][green][i]'graphical callin'[/i][/green] [maroon]type[/maroon][teal]=[/teal][green][i]'submit'[/i][/green] [maroon]value[/maroon][teal]=[/teal][green][i]'Call in'[/i][/green] [maroon]onClick[/maroon][teal]=[/teal][green][i]"this.form.action='./callin.php'"[/i][/green][b]>[/b]

input[purple].callin[/purple] [teal]{[/teal]
  [blue]background-image:[/blue] [green]url[/green]([green].[/green]/[green]nav_callin.gif[/green]);
  [blue]border-style:[/blue] [green]none[/green];
[teal]}[/teal]

Feherke.

http://free.rootshell.be/~feherke/

 

[AndyGroom]

Thanks for your suggestion and also thanks for helping me to understand more clearly how it worked. I couldn't quite get it to work as above so here's what I ended up with:

input.graphical_callin {
  cursor: pointer;
  background: url('./nav_callin.gif');
  border-style: none;
  width: 24px;
  height: 24px;
}

<input class='graphical_callin' type='submit' value='' alt='Call in' onClick="this.form.action='./callin.php'">

- Andy
___________________________________________________________________
If you think nobody cares you're alive, try missing a couple of mortgage payments

 

[AndyGroom]

Hmm... I've tried this approach on the mobile device (a Nokia) and whereas before I got white boxes instead of images, now I get black boxes with kind of random bits of white around the border. So, it has made a difference doing it this way but it still isn't quite right. I appreciate that what you suggested is perfectly fine but if you have any other suggestions I'd be happy to try them.

- Andy
___________________________________________________________________
If you think nobody cares you're alive, try missing a couple of mortgage payments

 

[feherke]

Hi

Sorry, I never saw a mobile device, so I have no idea.

Based on CSS 2.1 | Media types | Recognized media types I would try to set different CSS rules for [tt]media[/tt] [tt]handheld[/tt], but this is probably just my naivety.

But I not really understood what was the problem with the [tt]img[/tt] tag, with or without an [tt]a[/tt] tag ?

Feherke.

http://free.rootshell.be/~feherke/

 

[vacunita]

Sorry, I never saw a mobile device

You don't have a cell phone with a browser?

Anyway, I tried the <input type=image> on a blackberry, and an Ipod Touch and both show the image button just fine.

Which devices are you using?

Additionally the Blackberry browser will render a standard button if it cant find or display the associated image.

Perhaps a targeted CSS stylesheet as feherke suggests may work better.





----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[feherke]

Hi

You don't have a cell phone with a browser?

[ul]
[li]I am too avaricious to pay for web access.[/li]
[li]I am trying to prove to myself that I am not web addicted...[/li]
[/ul]
So no, I have no such thing.

Feherke.

http://free.rootshell.be/~feherke/

 

[vacunita]

I am too avaricious to pay for web access.

Free WiFi is my motto. But of course the Phone would need to have Wifi capabilities.

Not that I connect everywhere I go. But still it is useful to have connectivity anywhere you go.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.