Como crear este tipo de links?

[neodani]

Buenas,

Me preguntaba como se podían crear el tipo de links que tiene esta página

http://www.disenorama.com/tutoriales...-css-en-tablas

Si os fijais cuando pasáis el cursor por encima de un link aparece un recuadro personalizado, semi-transparente.

Cómo puedo lograrlo? por mas que miro su codigo no doy con ello

Muchas gracias

[Mikmoro]

Está aquí.
http://www.disenorama.com/scripts/qTip.js

Creo que para más información deberás dirigirte al foro de javascript.

Mikel.

[neodani]

Iniciado por Mikmoro

Está aquí.
http://www.disenorama.com/scripts/qTip.js

Creo que para más información deberás dirigirte al foro de javascript.

Mikel.

Juasjuas

Todo eso para hacer el efecto ese del link???????????????????????

Que dices

[Mikmoro]

No te pìllo qué quieres decir: ¿que no es eso lo que hace el efecto del tip, o que no lo piensas usar por complicado?

Mikel.

[neodani]

Iniciado por Mikmoro

No te pìllo qué quieres decir: ¿que no es eso lo que hace el efecto del tip, o que no lo piensas usar por complicado?

Mikel.

Me referia que nunca pensé que hiciese falta todo ese codigo para hacer ese efecto.

Me gustaria usarlo sí, a ver si lo destripo y aprendo que hace...

Muchas gracias Mikel

[Mikmoro]

Ah, de acuerdo. Es simplísimo:

bájate el archivo cuyo vínculo te he puesto antes (el javascript), guárdalo en tu servidor y luego añade la llamada a tu head:

<script type="text/javascript" src="/donde_lo_pongas/qTip.js"></script>

Juraría que no tiene más misterio.
Otra cosa será si es propietario y está protegido por copyright (que no lo creo, porque no dice nada y tampoco es de ellos). Normalmente con mantener la cabecera de referencia al autor suele bastar.

Mikel.

[neodani]

Iniciado por Mikmoro

Ah, de acuerdo. Es simplísimo:

bájate el archivo cuyo vínculo te he puesto antes (el javascript), guárdalo en tu servidor y luego añade la llamada a tu head:

<script type="text/javascript" src="/donde_lo_pongas/qTip.js"></script>

Juraría que no tiene más misterio.
Otra cosa será si es propietario y está protegido por copyright (que no lo creo, porque no dice nada y tampoco es de ellos). Normalmente con mantener la cabecera de referencia al autor suele bastar.

Mikel.

Hago eso que me dices y me aparece el texto 4 metros arriba y a la izq.

No basta con eso...

[feral]

Ese efecto de pop up puede hacerse con CSS puro y duro. Hay varias formas de hacerlo, uno es usando etiquetas span vacias con posicionamiento relativo o absoluto dentro de etiquetas <a>, y aplicando un background que seria el pop up en si mismo.


#div a.popup:hover span { }

[lucasan]

Eso se llama tooltip box, y si buscas con ese nombre en google, te asombrará la cantidad de variantes que tiene, tanto en Js como en CSS

[Mikmoro]

Iniciado por feral

Ese efecto de pop up puede hacerse con CSS puro y duro. Hay varias formas de hacerlo, uno es usando etiquetas span vacias con posicionamiento relativo o absoluto dentro de etiquetas <a>, y aplicando un background que seria el pop up en si mismo.


#div a.popup:hover span { }

Lo siento pero en ese caso el tooltip no sigue el movimiento del ratón.

Mikel.

[Mikmoro]

Iniciado por neodani

Hago eso que me dices y me aparece el texto 4 metros arriba y a la izq.

No basta con eso...

Eso debes buscarlo cómo está hecho en las hojas de estilo.

Mikel.

[feral]

Iniciado por Mikmoro

Lo siento pero en ese caso el tooltip no sigue el movimiento del ratón.

Mikel.

Generalmente la gente cuando va a pulsar un enlace no se regodea pasando el cursor de lado a lado, sino que va al enlace a un punto determinado para hacer click.

[Mikmoro]

Iniciado por feral

Generalmente la gente cuando va a pulsar un enlace no se regodea pasando el cursor de lado a lado, sino que va al enlace a un punto determinado para hacer click.

Cierto, pero él preguntaba por ese efecto en concreto, por eso le he respondido a cerca del javascript, estando en el foro de css. Si no, con css está claro cómo hacerlo. Si hubiera preguntado sólo por un tip que aparezca no hubiera respondido lo mismo. O al menos eso he entendido yo. Si no, ¿porque preguntar por el efecto de diseñorama, cuando hay miles de sitios con tips? Quizá no preguntaba por el efecto concreto y es lo que yo he interpretado.

Mikel.

[neodani]

Iniciado por Mikmoro

Cierto, pero él preguntaba por ese efecto en concreto, por eso le he respondido a cerca del javascript, estando en el foro de css. Si no, con css está claro cómo hacerlo. Si hubiera preguntado sólo por un tip que aparezca no hubiera respondido lo mismo. O al menos eso he entendido yo. Si no, ¿porque preguntar por el efecto de diseñorama, cuando hay miles de sitios con tips? Quizá no preguntaba por el efecto concreto y es lo que yo he interpretado.

Mikel.

Yo lo decia por el tipo de "globo" que salia, que tiene 3 colores con los bordes de cada color etc..

Pero si se puede hacer algo parecido en css perfecto xD

Lo que no entiendo es esto

Generalmente la gente cuando va a pulsar un enlace no se regodea pasando el cursor de lado a lado, sino que va al enlace a un punto determinado para hacer click.

En el de la pagina diseñorama cuando pasas por encima te sale el globo pero tu no puedes recorrer el globo con el raton. No se a lo que os refiriais.

Saludos

[Mikmoro]

Hola otra vez, neodani.
Se refiere a que con el tipo de "tip" que usan en diseñorama, cuando mueves el ratón sobre el enlace, el tip que sale te sigue al ratón (que esa era la peculiaridad por la que yo creía que preguntabas, que no se puede hacer con sólo css), y se mueve con él, no que puedas moverte por dentro de la ventana del tip.

Con respecto a lo que decías antes de que te funcionaba pero salía el tip donde quería, la clase que controla eso es esta:

div#qTip {
padding: 3px;
border: 1px solid #D1D096;
border-top:3px solid #D17E62;
border-right-width: 2px;
border-bottom-width: 2px;
display: none;
background-color: #FEFDF5;
color: #7B6F51;
font: bold 9px Tahoma, Verdana, Arial, Helvetica, sans-serif;
text-align: left;
position: absolute;
z-index: 1500;
-moz-opacity: .85;
opacity: .85;
filter: alpha(opacity=90);
min-width:120px;
}

y está en la hoja de estilo "layout.css".
Ahí tienes el diseño del globo al completo.

Para hacerlo sólo con css, como te ha recomendado por ahí arriba Lucasan, busca en google por tooltip box+css y te van a salir muchos sitios donde aprender a hacerlo.

Mikel.

[neodani]

Iniciado por Mikmoro

Hola otra vez, neodani.
Se refiere a que con el tipo de "tip" que usan en diseñorama, cuando mueves el ratón sobre el enlace, el tip que sale te sigue al ratón (que esa era la peculiaridad por la que yo creía que preguntabas, que no se puede hacer con sólo css), y se mueve con él, no que puedas moverte por dentro de la ventana del tip.

Con respecto a lo que decías antes de que te funcionaba pero salía el tip donde quería, la clase que controla eso es esta:



y está en la hoja de estilo "layout.css".
Ahí tienes el diseño del globo al completo.

Para hacerlo sólo con css, como te ha recomendado por ahí arriba Lucasan, busca en google por tooltip box+css y te van a salir muchos sitios donde aprender a hacerlo.

Mikel.

Gracias Mikel

Ahora si que funciona tal y como esta en la pagina

[marcosgue]

para lograr cosas mas bonitas utiliza javascript

[feral]

Iniciado por marcosgue

para lograr cosas mas bonitas utiliza javascript

Hay muchisimas personas que navegan sin el javascript activado la mayoria del tiempo o una gran parte. El javascript deberia ser evitado siempre que se pueda conseguir el mismo efecto con otra tecnologia que no dependa tanto de la configuracion del navegador.
Una pagina que dependa fuertemente del javascript para mostrar sus objetivos esta en territorio de peligro.

[neodani]

Iniciado por feral

Hay muchisimas personas que navegan sin el javascript activado la mayoria del tiempo o una gran parte. El javascript deberia ser evitado siempre que se pueda conseguir el mismo efecto con otra tecnologia que no dependa tanto de la configuracion del navegador.
Una pagina que dependa fuertemente del javascript para mostrar sus objetivos esta en territorio de peligro.

Pero en este caso, si la persona tiene desactivado el javascript que efecto produciría? daria errores la página?

O simplemente no se mostraría la "caja" del link?

PD: Y entonces, en todos aquellos formularios de registros que la validación de datos se hace en javascript, que pasa si el usuario no lo tiene activado?

Gracias!

[iconogt]

Si, mejor en javascript

[feral]

Iniciado por neodani

Pero en este caso, si la persona tiene desactivado el javascript que efecto produciría? daria errores la página?

O simplemente no se mostraría la "caja" del link?

PD: Y entonces, en todos aquellos formularios de registros que la validación de datos se hace en javascript, que pasa si el usuario no lo tiene activado?

Gracias!

En este caso concreto de usar un tooltip no creo que ningun diseñador con dos dedos de frente usaria javascript pueiendo lograr un efecto similar con CSS y evitando asi posibles problemas con el navegador del usuario y mucho menos codigo, a no ser que el diseñador no sepa usar CSS. De todas formas en este caso la dependencia del javascript no seria tampoco peligrosa ni un problema.

Generalmente se vuelven a validar los datos en el lado del servidor por esa razon.

[Mikmoro]

Iniciado por feral

En este caso concreto de usar un tooltip no creo que ningun diseñador con dos dedos de frente usaria javascript pueiendo lograr un efecto similar con CSS y evitando asi posibles problemas con el navegador del usuario y mucho menos codigo, a no ser que el diseñador no sepa usar CSS.

Díselo al diseñador de "Diseñorama"

Iniciado por feral

De todas formas en este caso la dependencia del javascript no seria tampoco peligrosa ni un problema.

Entiendo tu postura, pero no entiendo que digas "no creo que ningun diseñador con dos dedos de frente usaria javascript", y acto seguido digas que este javascript, que es "no intrusivo" y cuya desactivación que no produce ningún efecto negativo ni de accesibilidad, "no es peligroso ni un problema". Si no es un problema y produce un curioso efecto, muchos diseñadores lo usarían, y de hecho, así lo hacen.

Los efectos de todo tipo se utilizan por cuestiones estéticas u otras razones personales que no podemos entrar a valorar. Estoy en contra en general si producen descensos de accesibilidad u otros problemas, pero puestos a trivializar los efectos ajenos, todos deberíamos navegar con "lynx" (navegador de texto), porque si lo que buscas es información, no necesitas para nada esa preciosa foto, ese fantático degradado de fondo y ese rollover tan molón que parece hacer que el botón se hunde. Todo eso a lo que estamos tan acostumbrados son simples efectos estéticos, y los aceptamos sin problema, sabiendo que son innecesarios y consumen ancho de banda.

Y no olvidemos otro asunto crucial: hay gente que utiliza lectores de pantalla por su ceguera, gente con problemas de visión, daltónicos, etcétera, etcétera. Es decir, que no sólo hay que pensar en si tiene desactivado javascript, sino en muchas más cosas.
Pues bien, este javascript tan poco problemático tiene una curiosa virtud: saca en el globo del tip lo que haya en el "title" de la etiqueta, es decir, que no añade nada de nada para crearlo. ¿Qué pasaría si una persona usara un lector de pantalla usando el tooltip al estilo "sólo css"? Pues que le leería el enlace más el tip, es decir, generalmente 2 veces, porque como sabrás, la mayoría de los lectores de pantalla no repetan el display: none, y el visibility: hidden; de css. ¿Y usando el navegador de texto? Pues lo mismo, porque lo que no usa son hojas de estilo.

En fin, que soy totalmente pro-accesibilidad (de lo que sé algo), pero no en hacer tabla rasa, sino cada cosa hay que evaluarla desde varios puntos de vista, y sobre todo que no siempre es necesario ser un vago o no tener conocimientos para hacer tal cosa de tal manera.

En casi cualquier otro caso te hubiera dado la razón, pero también en ese caso no hubiera usado o recomendado usar esto.

Pero bueno, esto es ya para el foro de accesibilidad o algún otro.
Saludos.

Mikel.

[feral]

Iniciado por Mikmoro

Díselo al diseñador de "Diseñorama" .

No tengo el gusto de conocerle, pero no tendria ningun problema en decirselo

Iniciado por Mikmoro

no entiendo que digas "no creo que ningun diseñador con dos dedos de frente usaria javascript", y acto seguido digas que este javascript, que es "no intrusivo
... y Si no es un problema y produce un curioso efecto, muchos diseñadores lo usarían, y de hecho, así lo hacen.

Has descontextualizado un poco mis frases. Yo no he dicho que no haya que usar javascript sino esto;

El javascript deberia ser evitado siempre que se pueda conseguir el mismo efecto con otra tecnologia que no dependa tanto de la configuracion del navegador.


Y en el caso de los popups, el CSS puede sustituir a popups creados con javascript de una forma mas satisfactoria y generando menos problemas.
Obviamente no es un problema grave que no se pueda visualizar los popups dependiendo de la web, ya que no se rompe la web por eso, pero indudablemente la opcion de javascript no es tan accesible ni mucho menos como la de CSS. Ni que decir del tocho de codigo que hay que meter para hacer una cosa que en CSS seria de unos pocos caracteres.

Como sabras muchos lectores de pantalla tambien hacen uso de javascript.
Los lectores de pantalla que no son fieles al estandar efectivamente tienen problemas con algunas propiedades CSS, pero tambien hay trucos para sortearlas, por ejemplo el display:none; que algunos lectores no reconocen puede ser creado mediante la conjuncion de display y visibility en el mismo elemento. Ademas usar CSS no impide usar atributos title, ni alt...


En mi opinion hay mas puntos a favor para usar un tooltip de CSS que uno de javascript entre ellos destacaria;

• Tamaño del codigo.
• Accesibilidad.

[neodani]

Iniciado por feral

No tengo el gusto de conocerle, pero no tendria ningun problema en decirselo



Has descontextualizado un poco mis frases. Yo no he dicho que no haya que usar javascript sino esto;

El javascript deberia ser evitado siempre que se pueda conseguir el mismo efecto con otra tecnologia que no dependa tanto de la configuracion del navegador.


Y en el caso de los popups, el CSS puede sustituir a popups creados con javascript de una forma mas satisfactoria y generando menos problemas.
Obviamente no es un problema grave que no se pueda visualizar los popups dependiendo de la web, ya que no se rompe la web por eso, pero indudablemente la opcion de javascript no es tan accesible ni mucho menos como la de CSS. Ni que decir del tocho de codigo que hay que meter para hacer una cosa que en CSS seria de unos pocos caracteres.

Como sabras muchos lectores de pantalla tambien hacen uso de javascript.
Los lectores de pantalla que no son fieles al estandar efectivamente tienen problemas con algunas propiedades CSS, pero tambien hay trucos para sortearlas, por ejemplo el display:none; que algunos lectores no reconocen puede ser creado mediante la conjuncion de display y visibility en el mismo elemento. Ademas usar CSS no impide usar atributos title, ni alt...


En mi opinion hay mas puntos a favor para usar un tooltip de CSS que uno de javascript entre ellos destacaria;

• Tamaño del codigo.
• Accesibilidad.

Grandes argumentos los de Mikmoro y feral!

Me ha entrado curiosidad sabéis como sería este efecto en css, ya que feral deja caer que ocuparía muy pocas lineas!

Muchas gracias compis, asi da gusto aprender.

[Mikmoro]

Perdona pero no quería sacar de contexto; había entendido perfectamente lo que decías, pero era por no poner la cita completa que ya había puesto encima.

¿Lectores de pantalla que interpretan javascript? Eso es nuevo para mi. Si es así serán muy modernos por lo que dejarán fuera a todo el que no esté actualizado o tenga un lector por hardware muy moderno.

Si con el "tocho de código" te refieres a un JS de 3k y una llamada al script en el head, creo que el ancho de banda actual permite semejante despilfarro
Con css deberás usar 4 clases mínimo, y un span o así para mostrar el contenido del tip, mientras con el JS usas una clase css y ningún aditivo en el código html. Sinceramente, con el tip css el código html es algo más sucio (poniéndonos pulcros).

Y no, te empeñas pero NO se consigue lo mismo con css que con JS en este caso; son efectos diferentes. ¿Cuál te gusta más? Eso es cosa de cada uno. Personalmente me basta con el de css si debo usar algo así, pero para gustos están lo colores.
Veo que no haces ninguna referencia a mi argumento sobre lynx y los miles de efectos visuales/estéticos innecesaros que usamos todos los días para diseñar, grandes tragadores de ancho de banda.

Creo que hoy en día hay tanta gente que navega sin javascript como la que navega con los gráficos desactivados o sin css.

Para terminar, dices:

En mi opinion hay mas puntos a favor para usar un tooltip de CSS que uno de javascript entre ellos destacaria;

* Tamaño del codigo.
* Accesibilidad.

Yo acabaré diciendo:

En mi opinión hay más puntos a favor de no usar ningún tipo de tooltip. Por esos mismos argumentos, y porque a mi estéticamente no me aporta nada. De hecho, hasta me disgustan a la hora de navegar. Y mucho peor si me siguen el ratón. Me basta con el tip de mi navegador.

Feral: yo discuto porque me divierte. Espero que no te molestes.

Y para neodani:

Me ha entrado curiosidad sabéis como sería este efecto en css, ya que feral deja caer que ocuparía muy pocas lineas!

Un ejemplo:
http://vagabundia.blogspot.com/2006/...sando-css.html

Y uno mio:
http://www.araudi.net/tooltipCSS.html

Mikel.

[feral]

-Hoy en dia los lectores de pantalla cuentan cada vez mas con opciones sofisticadas. Echa una ojeada a la tabla inferior que muestra ciertas capacidades de diferentes lectores.
http://es.wikipedia.org/wiki/Lector_de_pantalla

-En realidad la version de javascript del tooltip necesita tambien de CSS para formatearlo, por lo tanto seria aun mas codigo.
6-7k mas parece que no son mucho, pero al final se van juntando muchos "extras" y la pagina empieza a recargarse si no se buscan soluciones alternativas.

- La solicion javascript y la de CSS del tooltip para un usuario normal no tendrian ninguna diferencia visual. Solo nosotros somos tan frikis de explorar con el puntero un enlace y de darnos cuenta de muchos detalles que para la gran mayoria pasan desapercibidos.
Aun asi, desde un punto de vista de la usabilidad date cuenta que si la pantalla no esta maximizada y por ejemplo en la columna derecha (como ocurre en la web de disenorama) hay un tooltip javascript y te posicionas con el puntero en la zona derecha del enlace, el tooltip desaparece parcialmente no dejando visualizar su contenido. El control que da CSS a la hora de situar el tooltip evitaria ese problema.

-Afirmas: -Creo que hoy en día hay tanta gente que navega sin javascript como la que navega con los gráficos desactivados o sin css.-
Eso quizas era cierto hace una decada, cuando las velocidades de acceso eran pateticas, actualmente mas gente de la que pensamos no tiene el javascript activado o lo desactiva frecuentemente debido al miedo a los virus y la obsesion por la seguridad. De hecho, muchos usuarios de explorer lo desactivan aun sin saberlo, cuando entran en la pestaña "seguridad" de las opciones de internet.

De todas formas y a modo de conclusion, pocas veces hay una solucion perfecta y pura ya que muchas tecnicas o metodos tienen sus claroscuros. Al final depende del diseñador por cual optar haciendo un analisis de la accesibilidad, usabilidad, tamaño, rapidez del flujo de trabajo y otros factores.

En cuanto a los efectos esteticos,obviamente el diseñador no puede dar vision a un ciego ni oido a un sordo, y eso no significa que no se puedan (o deban) usar fotografias o podcasts. Lo cual tampoco significa que no se facilite una experiencia de usario optima a sectores con discapacidades.
Si una tecnologia permite que un mayor numero de personas accedan al contenido mientras que otra que hace un trabajo igual o similar no, siempre hay que optar por la primera, aunque obviamente eso no es siempre posible, no todo el mundo conoce todas las tecnologias y tecnicas al 100% o pueden darse otros factores.
De ahi viene mi razonamiento, puestos en la disyuntiva de usar un tooltip personalizado (sin entrar en debates si es bueno o no usarlos) , el CSS gana sobre javascript.

Mikel: En absoluto me molesto, no creo que tu o yo tengamos el css o javascript como tecnologia propietaria que nos llena los bolsillos a fin de mes, sino seriamos ricos y tendriamos empleados que postean por nosotros para que suba nuestro PR mientras fumamos puros y jugamos al buscaminas en nuestro despacho.

[Mikmoro]

Un campo de desarrollo, relativamente nuevo, son las aplicaciones basadas en web como los Talklets que utilizan JavaScript para añadir funcionalidad texto-a-voz al contenido web. (...) Aunque la funcionalidad está limitada en comparación con aplicaciones de escritorio

Esto dice el enlace que me pasas. Efectivamente algo muy nuevo y con funcionalidad limitada Es bastante poco probable que personas ciegas cambien a ese sistema que reduce su funcionalidad sólo porque soporta javascript. Y de paso, mirando la lista de programas, a ver cuántos soportan javascript...

-En realidad la version de javascript del tooltip necesita tambien de CSS para formatearlo, por lo tanto seria aun mas codigo.
6-7k mas parece que no son mucho, pero al final se van juntando muchos "extras" y la pagina empieza a recargarse si no se buscan soluciones alternativas.

Me he disculpado por descontextualizar tu escrito sin intención, pero tú directamente lo modificas a conveniencia. Estoy hablando de este caso de JS en concreto, y he dicho que es un JS de 3k, una única clase de css (unos 45b), y nada de código añadido en html. No hay más extras, así que por el lado del ancho de banda... ná de ná.

Definitivamente tenemos una percepción diferente de los usuarios de internet. Conozco a mucha gente que hace un uso profesional de internet que navega sin imágenes porque le molesta tanta monería de diseño y no la necesita para nada (abogados, escritores, administradores de sistemas, historiadores, jueces, políticos, médicos, programadores y un larguísimo etcétera). ¿Que muchos de ellos usarán WordPerfect 5.1 o LaTex? Pues probablemente, pero en internet hay usos a miles, y muchos de ellos son profesionales, no ociosos.

De ahi viene mi razonamiento, puestos en la disyuntiva de usar un tooltip personalizado (sin entrar en debates si es bueno o no usarlos) , el CSS gana sobre javascript.

En este caso no y mil veces no, y es lo que intento demostrar desde que empezamos esta discusión: con este javascript no se pierde ni un sólo átomo de accesibilidad ni funcionalidad. En muchísimos otros casos sí, pero mi cabezonería es porque en este caso concreto, quien prescinda del JS no pierde nada de nada en absoluto. Otra cosa sería que necesitara un noscript, pero no es así.
Sigo empeñado en que en este caso en concreto están absolutamente empatados, como pocas veces (no recuerdo otra, la verdad). Por eso, al margen de este caso, defiendo css a ultranza ante cualquier alternativa.

Y como estaremos aburriendo al personal, tras tu próxima réplica, doy por concluida la discusión.

Sin acritud

Mikel.