Foros del Web » Creando para Internet » Diseño web »

utilizar esta imagen como boton

Estas en el tema de utilizar esta imagen como boton en el foro de Diseño web en Foros del Web. Código: http://www.rpp.com.pe/tmp/img/next-horizontal.png Me he dado cuenta que una página utiliza esa imágen o mejor dicho esa tira de imágenes como botón en los eventos al ...
  #1 (permalink)  
Antiguo 10/11/2009, 21:51
Avatar de MaLkAvIaN_NeT  
Fecha de Ingreso: marzo-2005
Ubicación: trujillo
Mensajes: 141
Antigüedad: 19 años
Puntos: 0
utilizar esta imagen como boton



Código:
http://www.rpp.com.pe/tmp/img/next-horizontal.png
Me he dado cuenta que una página utiliza esa imágen o mejor dicho esa tira de imágenes como botón en los eventos al pasar, presionar y sacar el puntero mi pregunta es... como se puede hacer esto no se supone que para poder hacerlo se necesitan tener las imágenes por separadas?
__________________
www.tecfactory.com
  #2 (permalink)  
Antiguo 10/11/2009, 22:08
 
Fecha de Ingreso: abril-2003
Ubicación: Guadalajara MEX y Orlando EEUU
Mensajes: 80
Antigüedad: 21 años
Puntos: 1
Respuesta: utilizar esta imagen como boton

Hola que tal, bueno yo lo que haría es como dices tu:

Poner varias imágenes de tal forma que en cada una la iluminación sea diferente.

Y con esta función en el onmouseover="" con javascript. Cada que paso el rato sobre una ubicación especifica de la imagen mandaría llamar la función.

<script language="javascript" type="text/javascript">
function cambiar(imagen) {

document.images["imagen"].src = imagen;
}
</script>


Vamos a suponer que este código esta sobre tu imagen
=============================================
<img src="images/imagen1.png" alt="" name="imagen" border="0" usemap="#imagenMap" id="imagen" />

<map name="imagenMap" id="imagenMap">
<area shape="rect" coords="641,4,761,26" onClick="cambiar('imagen2.png');" />

</map>
================================================

Solo seria que ese codigo lo pongas dentro de tu archivo y posteriormente pongas los archivos imagen1.png e imagen2.png




¿Haz puesto varios links sobre una misma imagen?

Ojala con lo que te dí te des una buena idea.
__________________
www.HostDime.com/global
Servidores Dedicados | Reseller Hosting | VPS
Tour de nuestro Data Center
  #3 (permalink)  
Antiguo 10/11/2009, 22:22
Avatar de MaLkAvIaN_NeT  
Fecha de Ingreso: marzo-2005
Ubicación: trujillo
Mensajes: 141
Antigüedad: 19 años
Puntos: 0
Respuesta: utilizar esta imagen como boton

Hola gracias por responder, si he tenido una experiencia intercambiando las imágenes con un poco de java script, lo que me llama la atención es como usan una sola imágen te digo porque no es la primera vez que veo que hacen esto, sobre todo lo he visto en los carruseles de imagenes.
__________________
www.tecfactory.com
  #4 (permalink)  
Antiguo 11/11/2009, 01:02
 
Fecha de Ingreso: junio-2008
Mensajes: 131
Antigüedad: 15 años, 9 meses
Puntos: 2
Respuesta: utilizar esta imagen como boton

Se hace mediante CSS, poniendo la misma imagen de fondo pero cambiando la posición de la misma dependiendo de si está el puntero encima de ella o no.

Perdón que no pueda explicar más detalladamente pero no tengo mucho tiempo.
  #5 (permalink)  
Antiguo 11/11/2009, 01:20
Avatar de Carlangueitor
Moderador ლ(ಠ益ಠლ)
 
Fecha de Ingreso: marzo-2008
Ubicación: México
Mensajes: 10.037
Antigüedad: 16 años, 1 mes
Puntos: 1329
Respuesta: utilizar esta imagen como boton

Se llama Sprite y es una técnica usada en sitios grandes ya que además del peso de las imágenes es mejor que sean pocas para disminuir las peticiones al servidor, mas info por aquí:
http://www.librosweb.es/css_avanzado...y_sprites.html

Saludos
__________________
Grupo Telegram Docker en Español
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 08:31.