HTML - imagen con eventos

   
Vista:
Imágen de perfil de Jhonnathan Emilio Cardona Saineda

imagen con eventos

Publicado por Jhonnathan Emilio Cardona Saineda (3 intervenciones) el 17/05/2013 19:32:29
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
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve

imagen con eventos

Publicado por xve (1178 intervenciones) el 17/05/2013 20:56:30
Hola Jhonnathan, para ello, tienes que utilizar el tag <area>

1
2
3
4
5
6
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
 
<map name="planetmap">
    <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
    <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
</map>


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
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Jhonnathan Emilio Cardona Saineda

imagen con eventos

Publicado por Jhonnathan Emilio Cardona Saineda (3 intervenciones) el 17/05/2013 21:35:22
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,
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve

imagen con eventos

Publicado por xve (1178 intervenciones) el 18/05/2013 10:41:19
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.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Jhonnathan Emilio Cardona Saineda

imagen con eventos

Publicado por Jhonnathan Emilio Cardona Saineda (3 intervenciones) el 20/05/2013 20:58:29
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,
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve

imagen con eventos

Publicado por xve (1178 intervenciones) el 20/05/2013 21:33:48
Gracias por comentarlo Jhonnathan...
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar