Foros del web, para los que viven de bits

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

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

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

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...

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 { }

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

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

Mikel.

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

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.

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

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

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

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.

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!

Si, mejor en javascript

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.

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

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.