HTML - imagen con eventos

Hola a todos,
tengo una imagen de una calculadora en una pagina HTML. Necesito que al presionar los numeros que son parte de la imagen me aparescan en un input tipo text. Como dije los numeros no son botones ni enlaces, son parte de esa imagen pero no se como generar acciones cuando se presionan diferentes partes de la imagen. Lo que vi en otros foros era crear un cuadro con div y ubicarlo encima de los botones pero como hago para hacer un cuadro invisible y que cuando lo presione me llame una funcion script que lo que haria sería colocar el numero en el campo. Muchas gracias de antemano.
Saludos

Hola Jhonnathan, para ello, tienes que utilizar el tag <area>



Al mostrar la imagen, le indicas que el usemap es un nombre de un mapa, en el cual defines las areas que desees, ya sean rectangulos o circulos.

Este es el ejemplo esta sacado de: http://www.w3schools.com/tags/tag_area.asp

Muchas Gracias por tu tiempo. Me sirvió mucho para un elemento, pero tengo otro problemita y es que una de las imagenes no la tengo como un elemento <img> si no que la tengo de background en el body de esta manera:

body{
background:transparent url(../image/calc.jpg) no-repeat scroll 240px 109px ;
top: 100px;
}

Como puedo aplicarlo para esta imagen??
Muchas gracias por tu tiempo
Saludos,

Hay contenido encima del background??

Si no hay contenido, puedes hacerlo pasando la imagen a capa o poniendo encima una imagen transparente. Hasta donde yo se, no se puede hacer directamente sobre un background.

Hola xve,
De verdad que muchas gracias. Fíjate que me pareció curioso el termino transparente y me di cuenta que lo podía aplicar a las etiquetas div y me sirvió de maravilla. lo que hice fue cada div para cada numero:
#boton1{
position: absolute;
top:373px;
left:312px;
height: 31px;
width: 51px;
background-color: transparent;
}

en la pagina html fue:

<div id="boton1" onclick="mostrar(1)"></div>

Muchas gracias, de verdad me sirvio de mucha ayuda.
Saludos,

Gracias por comentarlo Jhonnathan...