Canal RSS

Archivo de la categoría: Javascript

Si no programas en javascript, no eres desarrollador Web… solo sabes usar el photoshop o el dreamweaver para hacer paginitas

Mootools, Javascript en OOP

Publicado en

Alguno de ustedes reconoce el termino AJAX ?
Bueno, si han husmeado por ahi sabran que el Ajax es el conjunto de tecnologias que existen desde hace tiempo pero pocos habian aprovechado para obtener una excelente funcionalidad en las aplicaciones orientadas a web. AJAX es el acronimo de Asynchronous Javascript And Xml (Javascript y XML Asincronos). busquenle en la wikipedia para los que no saben.
Bueno, si entendieron lo que dije y han husmeado mas alla de la wikipedia, sabran que hay varias librerias disponibles para facilitar la programacion con este conjunto de tecnologias; algunas publicas y otras propietarias, yo solo conozco las publicas xD. Paginas como DHTMLgoodies , Prototype, Scriptaculous, Atlas (de microsoft, si es gratis), y recientemente Mootools ofrecen por asi decirlo, un framework de clases y funciones que nos proveen una capa logica que se encarga de las funciones mas comunes para el uso de AJAX, librandonos de todo ese enredo, y dejandonos como unica tarea solucionar nuestros problemas particulares para nuestra aplicacion.
Bueno, si algo me gusta a mi a la hora de usar una tecnologia es el alcance de la documentacion que esta posee. Siempre ando necesitando tutoriales sobre tareas tontas y una referencia sobre todos los objetos y la descripcion de sus funciones y propiedades, soy muy quisquilloso en ese sentido, mi memoria no es buena y me gusta tener toda la documentacion posible a mi alcance.
Es por eso que he elegido Mootools, ademas de su facilidad de uso, su sitio contiene muy buena documentacion, y al parecer en la red hay bastantes personas que manejan esta libreria, y en los foros hay varios ejemplos.
Prototype parece mas maduro, pero lo veo un poco mas dificil, y en este momento mi objetivo es aprender a usar AJAX, no madurar mis conocimientos en ello.
ATLAS debe estar muy bien documentado, es de Microsoft y si algo me gusta de Microsoft es su excelente documentacion, pero esta hecho para colaborar con .NET y yo quiero desarrollar solo con HTML y js. DHTMLgoodies tiene scripts muy interesantes… pero he visto que no optimizan recursos y su programacion no es tan fina(bueno, eso supongo yo, espero no estar tan en lo cierto).
Mas adelante estare posteando como me va con al Mootools, todavia no me atrevo a postear codigo porque no he hecho ninguno xD

powered by performancing firefox

Javascript RollOver Image (Imagenes cambiantes)

Publicado en

¿Alguna vez han tenido la necesidad de hacer el clasico rollover image con js? ¿que es esto ?

Bueno, el termino rollover image se refiere a una imagen que contiene un link asociado, y que al momento de detectar el puntero del mouse encima de esta, cambia su estado. Este efecto se realiza cargando otra imagen en el mismo lugar, por medio de js.

ahora, ¿que se necesita?. La etiqueta HTML <img> contiene dos propiedades que hacen referencia a sus eventos OnMouseOver y OnMouseOut, el primero se ejecuta cuando el puntero del mouse pasa por encima, y el segundo, cuando esto deja de suceder.

Entonces solo habría que construir una funcion js que intercambiara las imagenes, y en la etiqueta HTML, llamar a esa funcion en cada uno de los eventos, con el valor de la imagen a desplegar. Eso no es problema cuando son 2 o 3 imagenes… pero, ¿y si son demasiadas?, ¿su codigo esta preparado para administrar varias imagenes?

Con ayuda de la pagina de desarrollo de Mozilla, y algo de codigo de la pagina DHTMLGoodies, me inspiré y decidi hacer un script js para facilitar esta tarea.

Ustedes solo tienen que hacer referencia a una libreria js, la cual contiene todo el codigo.

ahora, viene lo interesante, en lugar de poner la etiqueta <img> y sus propiedades, deben escribir una etiqueta personalizada (<rollover_img />), con las siguientes propiedades

  • border : determina el grueso del borde de la imagen (0 si no lleva borde)
  • img_off : determina la URL de la imagen en estado OFF
  • img_on: determina la URL de la imagen en estado ON (cuando el cursor pase encima)
  • url_link: determina el link URL asociado a la imagen.

En el body de su pagina HTML, llamar a la funcion de busqueda de TAGS : initRollOver_search();

listo ! no tienen porque preocuparse por eventos, por escribir una sola linea de codigo, nada.

espero que les sea de ayuda, si alguno de ustedes tiene alguna aportacion al codigo, le agradecería su retroalimentacion.

descarga el codigo aqui