HTML ayuda con imágenes por favor :)

[Godoy]

¡Hola de nuevo!

Ando creando una página, y quiero que los botones de las secciones sean como algo " dinámica " entonces quiero que los botones, al pasar el puntero y al mantener el clic oprimido cambie a imágenes diferentes, osea que esté la imagen normal ahí, al pasar el puntero cambie como de color, y al darle clic, también cambie como para darle un efecto bueno como de que se oprima, ya tengo todas las imágenes de los botones, y pues lo que quiero saber es cómo hacerlo.
con imágenes de sustitución ya lo hice, pero el problema es que sólo cambia al pasar el puntero, pero al dar clic no puedo porque sólo tiene la opción de dos imágenes...

He visto ésto en otras páginas, por eso lo quiero hacer :l
y pues no me digan algo de onclick, porque pues creo que eso es al darle clic, no al mantenerlo oprimido...

Por favor ayúdenme en este problema, de antemano les doy las mejores de las gracias :)

[buzu]

Tienes que usar los eventos. Fíjate en la sección mouse eventes en el siguiente enlace:

http://w3schools.com/tags/ref_eventattributes.asp

[Aresillo]

Pues lo puedes hacer con CSS
a al capa con la que verias el boton normal le poner de fondo la imagen que quieres...
al pasar por encima, le pones al hover la imagen que quieras y para cambiarla al apretar con focus

Un saludo!

Aresillo!!

[Godoy]

Ahmmmm

Buzu cuál es el evento?
Porque con onClick no puede ser... ya que éste es al dar clic...

yo digo al tener el clic oprimido :S

Gracias a todos :D

[buzu]

onmousedown

Aresillo, tu método sugiere tener un enlace que ya sea no tiene nada o cuyo contenido ha sido desplazado para dejar visible solo la imagen de fondo. En lo personal no lo recomiendo por que falla en casos en los que las imágenes estén desactivadas fallando así a la accesibilidad. Eh estado pensando en un método para eliminar ese pequeño fallo, si funciona lo podrás ver en mi diseño para la multicompetencia. Quiero implementar algunas novedades, pero no prometo nada.

[Godoy]

Buzu

Eres mi ídolo

Gracias =D

¡Muchas gracias!
¡Eres el mejor!

Gracias. xd
(me siento algo idiota porque era una bobada, pero igual gracias. :)

[Godoy]

:S Tengo un problema.

Lo siento por moletar tanto :l

Es que mira, está la imagen ahí quieta, después al pasarle el puntero se cambia, y al mantener el clic oprimido también, el problema va cuando suelto el clic, queda la imagen igual a la que sale al mantenerlo oprimido.

Lo que quiero es que parezca un botón, y que al soltar el clic, cambie a la imagen original, la primera.

Podrías ayudarme en eso? :P

[Godoy]

A no que pena, ya entendí es como jugar con los botones. :P

Gracias por aguantar a este ignorante.

Muchas gracias Buzu, ya arreglé todo y me quedó muy bien.
Para los que quieran ver el tutorial que busuquen de ésto, lo que hice fue poner otro evento, esta vez de onCick, y poner la imagen que sale al poner el puntero encima, ahora si se ve muy bien todo.

Mi problema ha sido resuelto, muchas gracias Buzu :)

[buzu]

Por nada, me alegra ver que lo has aprendido y no me debes las gracias a mi. Yo tan solo te dí una pista, fuiste tú quien aprendió a pescar. Saludos.

[martinweb_uy]

Usa el macromedia flash, anda a insertar/simbolo/boton y ahi vas a ver que en lo que seria la linea de tiempo hay 3 etiquetas que dicen REPOSO(es cuando esta quieto), SOBRE(cuando el mouse se posa en el) y PRESIONADO(no creo que sea necesario explicarlo). Despues lo exportas en un .swf (Shockwave Flash Object) en el dreamweaver y ta.

Suerte!!

[Null_]

Iniciado por buzu

En lo personal no lo recomiendo por que falla en casos en los que las imágenes estén desactivadas fallando así a la accesibilidad.

Pero buzu, si comparas imagenes con eventos HTML incrustados directamente en la etiquetas HTML como el "onmousedown", diría que es mucho mas accesible usar las imágenes de fondo, que usan mucha menos tecnología que un evento que depende del navegador.

Por lo que yo apoyo lo que dice Aresillo y agrego que Godoy debería usar "Sprites CSS" para manejar mucho mejor el botón en los distintos estados del mouse sobre el enlace con accesibilidad mejorada.

[buzu]

En realidad no null_, no es mejor. Si por alguna razón los eventos no son activados o javascript falla en procesar los eventos, aun tienes la imagen y la gente puede ver el botón en su estado inicial. Sin embargo, si las imágenes no están disponibles, no hay forma de que la gente vea el botón. Creo que una persona con un avatar como el tuyo debería comprender eso con facilidad.

Ya le dije a aresillo, cuando compitió contra calizz, acerca de las desventajas de reemplazar texto con imágenes. Tengo la costumbré de navegar de manera critica muchas veces, y una de las cosas que hago es desactivar las imágenes. No te imaginas la cantidad de sitios que simplemente dejan de funcionar volviéndose totalmente inaccesibles cuando las imágenes están desactivadas. En otras palabras, cuando hablo no lo hago por que sí, sino con bases solidad para mis afirmaciones (claro que todos tenemos resbalones ocasionales jaja).

[Aresillo]

Y pregunto desde la curiosidad e inesperiencia, que pasa si le quitas javascript e imágenes... sigue funcionando tu método?? (sólo por preguntar..)

Aresillo!!

[buzu]

Si, si quitas js e imágenes lo único que pasa es que se muestra lo que hayas puesto en el atributo alt de img y los eventos no funcionan, pero mientras el href del enlace tenga la dirección a la que dirige no habrá problema. A un fondo de pantalla no le puedes poner alt y ahí es donde este falla. Un fondo no debería ser usado para poner contenido relevante o necesario por que no hay forma sencilla de poner contenido alternativo a ese fondo. Algo mas?

[Null_]

Iniciado por buzu

En realidad no null_, no es mejor. Si por alguna razón los eventos no son activados o javascript falla en procesar los eventos, aun tienes la imagen y la gente puede ver el botón en su estado inicial. Sin embargo, si las imágenes no están disponibles, no hay forma de que la gente vea el botón. Creo que una persona con un avatar como el tuyo debería comprender eso con facilidad.

Ya le dije a aresillo, cuando compitió contra calizz, acerca de las desventajas de reemplazar texto con imágenes. Tengo la costumbré de navegar de manera critica muchas veces, y una de las cosas que hago es desactivar las imágenes. No te imaginas la cantidad de sitios que simplemente dejan de funcionar volviéndose totalmente inaccesibles cuando las imágenes están desactivadas. En otras palabras, cuando hablo no lo hago por que sí, sino con bases solidad para mis afirmaciones (claro que todos tenemos resbalones ocasionales jaja).

Por lo mismo, si una persona no tiene o no dispone de JavaScript no podra visualizar las imagenes y tampoco, como digo yo, el fondo. No discuto eso, lo tengo claro, pero yo todo esto lo tome como una "enlace en forma de botón" lo que ahora me proboco algo de confusión...

Me gustaria que Godoy me dijiera si utiliza un enlaze con texto para formar el botón o solo una imágen con enlace.

Agregando que si usas una imágen de botón te combiene utilizar los eventos HTML pero si el usuario no dispone de JavaScript verá al texto alternativo (que se vera con un borde muy feo o algún icono no deseado puesto por el navegador), además de esto, se tendrá que cargar la imagen nueva (que tendra que pasar por un pantallazo). Por el otro lado si utilizas un enlace como lo pense en el mensaje anterior, te combiene utilizar los sprites CSS que reducen la necesidad de tener JavaScript para hacerlo funcionar y alguna petición http al servidor para obtener la imágen nueva, por lo que no habra ninguna carga adicional sin un pantallazo.

Por otro lado tenemos la tipografía y el estilo. Un boton de imagen puede tener una infinidad de estilo y la tipografía que mas deseemos, en cambio, el boton de enlace que sigo siendo partidario de él por mucha mas accesibilidad que el otro tipo de botón, estara limitado en estos ambitos.

Saludos.

[buzu]

Null_, en ninguno de los dos casos es recomendable el método que usa una imagen de fondo si esa imagen de fondo está reemplazando el texto de un enlace. Por otro lado si la imagen solo sirve de fondo a un enlace de texto (que no creo que sea el caso) si se puede y es recomendable utilizar el método que hace uso de CSS. Para evitar el "pantallazo" con el método que propongo bastará con ser creativo. Puedes por ejemplo usar la misma imagen y así se evita una petición al tiempo que se elimina la necesidad de cargar un cierto número de imágenes previamente.

Programar es más que saber escribir código, eso cualquiera lo hace. Programar es saber resolver problemas de la mejor forma asegurando la mayor funcionalidad posible en cualquier caso que pudiera presentarse mientras se usa el programa en desarrollo.

[Null_]

Claro, por eso yo llamo a utilizar una imagen de fondo que no reemplaze el texto de un enlace.
Lo que no cabe en mi mente ahora es porque defiendes tanto el javascript o la programación como comentas al final. Si puedes explicame mejor tu forma de pensar para comprenderte, porque aun sigo pensando que la mejor forma y como tu dices "resolver problemas de la mejor forma asegurando la mayor funcionalidad posible" es con CSS que es mucho mas inferior al JS. Porfavor, convenceme.

[buzu]

No trato de convencerte de nada. Simplemente te muestro los hechos tal como son. Yo lo dije tambien, si no reemplazas texto entonces usa solo CSS, de otra manera usa javascript. No es que defienda javascript, defiendo el derecho del usuario a sitios usables. Si estás reemplazando texto con imágenes entonces lo más probable es que algún usuario no valla a poder usar el sitio y es ahi donde javascript es la mejor opción simplemente por que javascript puede degradarse de modo que si algo sale mal la página se muestre como (X)HTML puro y este tiene la particularidad de que bien empleado puede lograr el mayor grado de accesibilidad posible. Si aun no has entendido lo que te estoy diciendo es por que no has entendido que no estoy hablado del uso de imagenes como fondo sino como reemplazo para texto y eso es precisamente de lo que he estado hablando todo el tiempo.

[Lunita23]

hola queria saber como puedo crear texto dinamico para insertarlo en una pagina web,soy principiante y no tengo mucha idea solo se lo basico.como lo puedo crear con macromedia flash? ojala podais ayudarme.gracias se que no tiene nada q ver con imagenes pero es q lo he preguntado en otro sitio y no me han contestado

[buzu]

mientras no coloques las preguntas en el lugar más apropiado no recibirás respuesta. Por que no vas al foro de flash y actionscript y les explicas lo que quieres pero más detalladamente que a pesar de saber usar flash no te puedo responder ya que tu pregunta no explica lo que necesitas. Hay infinidad de texto dinámico.

[Null_]

Si entiendo tus mensajes buzu y no debato que el esta usando imágenes de botones, a lo que voy yo, como tu dices, es que use CSS en el caso de que se use un enlace. Mira voy a hacer una comparación del enlace con fondo de imágen con CSS y la imágen con enlace y evento JS.

- Si el CSS se degradada, no se muestra el fondo pero el enlace sigue funcionando como texto.
- Si el JS se degrada, se muestra la imagen como (X)HTML y el enlace sigue funcionando.

- Si la imagen se degrada, con CSS no se muestra el fondo pero el enlace sigue funcionando como texto.
- Si la imagen se degrada, con JS no se muestra la imagen y se muestra el texto alternativo (muy feo) pero el enlace sigue funcionando.

En ambos casos la accesibilidad es constante, eso es claro. La diferencia de estos es que el CSS tiene menos probabilidades de degradarse que el JS, además que las imágenes son para representar gráficos, ilustraciones, etc. y no deberiamos utilizarlos para un "boton lindo" con un texto, pues los botones solo sirven para llevarte a un enlace especifico y debemos cumplir con su tarea como enlace sin agregarle cosas que aunque no dispongamos de javascript sigan viendose lindos, por lo que considero que debería usarse siempre CSS para los botones y no JS.

Bueno esa es mi recomendación (y aporte) si no no lo notaste, y como te dije antes, no debato que el usa imagenes como botones.

[buzu]

La imagen no deja de funcionar si no hay js disponible sino si las imágenes no están disponibles. Que quede claro que yo no estoy a favor de que se usen menús con solo imágenes, pero en caso de que el desarrollador quiera hacerlo, lo mejor es que use imágenes y no que reemplace texto por imágenes. Que diferencia hay entre que se muestre un texto alternativo y enlace de texto? ambos son texto. Además que si quieres usar un tipo de fuente que no es estándar para los navegadores en tu botón?

Es curioso que me digas que las imágenes no deben utilizarse para un botón lindo cuando en tu sitio usas imágenes como botones en todos tus ejemplos. http://codigodemaquina.110mb.com/
Hay que ser un poco más consistentes entre lo que decimos y lo que hacemos. No has pensado que por ejemplo quien pregunta pueda estar en un caso como el tuyo en el que el uso de imágenes como botones es simplemente lo más lógico?

Es obvio que el uso de imágenes como fondo de texto para simular botones es algo muy recomendable y tu sitio es un ejemplo de lo bonito que pueden quedar esos "botones", pero tu sitio es tambien un ejemplo de que en ciertas ocasiones es simplemente más conveniente usar una imagen como botón y eso es precisamente lo que quiero que entiendas.

[Null_]

Sierto que se usa el boton cuando combiene, porque en mi caso no puedo crear un boton con texto porque son equis, cuadrados y triangulos, ahi si uso botones de imagenes. Si vas a la pagina principal tengo un boton echo solo con CSS... creo que mencione algo de la tipografía en uno de los mensajes anteriores...

Bueno por mi parte ya tengo clara tu perspectiva de vista y me gusto tu aclaración final , creo que nos fuimos muy al fondo con algo tan sencillo... por lo menos yo jaja

saludos

[buzu]

El problema estuvo en que no habías captado exactamente de lo que yo estaba hablando. No que haya sido tu culpa, quizá fui yo quien no dejo claro el asunto. De cualquier modo creo que fuen una buena charla.

Saludos.

PD, Si el foro siempre fuera así, se me vería participar más seguido. Estoy fastidiado del clásico "Como hago para esconder un div?"