Rollovers

[jj68]

Hola a todos.
Yo he sido capaz de hacer el rollover pero no soy capaz de ponerlo alrededor de la imagen y en el caso mio son 10 rollovres al rededor de la imagen.
Me gustaria saber como hago un rollover, bueno me explico el rollover que quiero hacer es con una imagen en el centro y alrededor de ella el texto que ira cambiando de colo en este caso y que despues me lleve a la pagina que pone en el mismo rollover.
Me podeis ayudar.
Un saludo de jj.

[gorkreg]

Te recomiendo que muevas este post a la sección de CSS.

Para conseguir efectos rollover se utiliza la pseudoclase :hover de la siguiente manera:

a:hover {
Aquí iría el efecto que quieres lograr (cambio de color fondo, etc)
}

Este código indica que el efecto rollover deseado se aplicará a todas las anclas. También se puede aplicar a cualquier otro elemento pero explorer 6 no lo soporta.

Es muy básico pero no se cuanto sabes de CSS. Si necesitas más ayuda, pregunta de nuevo.

[jj68]

como muvo el post a css?

[gorkreg]

De CSS ya se y te puedo ayudar pero de mover posts, ni idea Quizá solo lo pueda hacer el administrador, no se.

Vuelve a hacer la pregunta en la nueva sección o sigue preguntando por aquí.

[David]

Espera a que el Moderador de esta sección traslade tu tema.

Saludos.

[jj68]

Ok gracias

[caricatos]

Iniciado por gorkreg

Te recomiendo que muevas este post a la sección de CSS.

Para conseguir efectos rollover se utiliza la pseudoclase :hover de la siguiente manera:

a:hover {
Aquí iría el efecto que quieres lograr (cambio de color fondo, etc)
}

...

Bueno, bueno... discrepo en que rollover sea cosa de estilos, y afirmo que es un tema para javascript, siempre que se trate del efecto... a:hover implica el uso del tag a, que semánticamente se debe usar en enlaces o anclajes (anchor => ancla)... si no se pretende enlazar o anclar, lo que debe usarse son los eventos mouseover/mousedon. lamentablemente se ha malusado javascript para chorradas que han provocado la desactivación por parte de muchos usuarios, pero eso no cambia nada... sin enlaces de por medio, los efectos deben programarse con javascript... de todos modos cada uno hace su página como se le antoja.

Saludos

[kseso?]

Hola Pepe. ¿Me permites discrepar de la discrepancia?
Sin entrar si es cosa de un lenguaje u otro.
La pseudoclase :hover se puede aplicar a cualquier elemento (tag). Otra cosa es si hay algún engendro del demonio que no lo soporte.
¿Qué lenguaje utilizar? Eso ya es harina de otro costal. Css, javascript, js. Cada uno con sus pros y contras.

Un saludo

[tunait]

...no acabo de entender muy bien lo que se quiere hacer pero me dá que con css se queda corto así que traslado el tema para javascript que me suena más a eso

tema movido desde Web general

[jj68]

Hola de nuevo,graccias a todos vosotros.
Yo se hacer los rollovers individuales los cuales me salen varias imagenes enlas que me salen el mombre y terminan en _01, down, over, es decir las tres imagenes que necesito.
Pero ahora llega cuando la matan a ella, yo tengo una web y en ella quiero poner una imagen central redonda y fija, al rededor de ella van a estar los enlaces rollovers con las informaciones, y ahí esta el momento son 10 textos rodeando el circulo de la image y no se como hacerlos.

[caricatos]

Hola:

Me parece que esa imagen debería estar centrada dentro de una capa con posición relativa, y dentro ubicar los elementos que quieres aplicar el efecto con posición absoluta procurando ubicarla con los estilos left, y top... o tal vez sea mejor un mapa... con mapas te pongo un ejemplo: Polígonos Industriales (debes poner el cursor en los círculos), eso sí, el sistema está programado con javascript. Puedes revisar el código.

Saludos

[jj68]

Gracias Caricatos, lo de la sengunda opcion me gusta mas, no es que lo voy hacer, los rollovers los suelo hacer imageready y lo demas lo monto con dreanweaver, eso si soy principiante en esto de hacerme mis paginas y en lo de javascript mas nuevo todavia porque acabo de empezar, lo voy a intentar con lo que se y sei veo que no puedo pido mas informacion ok.

[caricatos]

Iniciado por jj68

Gracias Caricatos, lo de la sengunda opcion me gusta mas, no es que lo voy hacer, los rollovers los suelo hacer imageready y lo demas lo monto con dreanweaver, eso si soy principiante en esto de hacerme mis paginas y en lo de javascript mas nuevo todavia porque acabo de empezar, lo voy a intentar con lo que se y sei veo que no puedo pido mas informacion ok.

Bueno, para empezar, lo normal es empezar con herramientas de ayuda, pero no creo aconsejable depender de ellas. Supongo que Imageready creará bien las etiquetas y demás, pero dreanweaver, al menos cuando lo he usado, no pone un código bueno, y mete mucha basura (hace algunos años, recuerdo que era así... )

Mi consejo es que vayas aprendiendo el código, y animarte con el block de notas (a tu ritmo, claro está).

Por cierto, siempre es bueno compartir el código final, tal vez se pueda mejorar...

Saludos

[jj68]

Hola de nuevo os mado un enlace a lo que he echo
jj6168. iespana. es/ y aqui debajo el codigo ok: no medaja subir el codigo





y a todos vosotros muchas gracias cuando lo suba mando otro enlace esto que estai viendo son pruebas.

[jj68]

otra pregunta creo que se hace con javascrip. los o las imagenes que dan vieltas y cuando pasas el raton se para o van mas rapido asta que le haces clik auno como se hace, o me estoy metiendo en mucho.

[jj68]

Perdonar pero tengo un problemilla. con esto pues que l he ido a subir y cuando menos me lo esperaba me ha deformado la pagina y creo que es debido al css que tiene javascrip.
me eschis una manilla.

[jomaruro]

Hola:

Haría falta ver el código, si lo subes a tu servidor no podrás poner el enlace a menos que lo pongas sin http ni www, es decir misitio.com.

Si no puedes subirlo puedes usar la técnica del copy&paste y publicarlo en el propio foro.

Saludos.

[jj68]

Hola buenos dias.
Pude hahacer con dreanweaver lo que pregunte de varios rollovers y lo he subido a jj6168.iespana.es en don se puede ver que funciona perfectamente, el problema me viene cuando lo intento poner aqui adac-ex.com que como veras me ha descolocado todo, yo utilizo la erramiento firebug para ver los codigos ...
ya me direis algo.
gracias de nuevo

[jj68]

Hola buenas, muchas gracias atodos.
Ya he solucionado con ayuda de un amiguete que entiende un poco mas que yo y ha retocado el codigo que me deformaba el resto del contenido y ahora se ve perfecto.
Echarle un vistazo y me decis algo.
adac-ex.com gracias.

[furoya]

Hola todos :

Me alegra que ya hayas resuelto el tema, jj68. Llegué un poco tarde para ayudarte, así que ahora sólo adhiero a las sugerencias ya dadas, lo mejor es escribir el código uno mismo. Las páginas y lo efectos prefabricados funcionan cuando funcionan, y si no, hay que arreglarlos; y para arreglarlos hay que saber, y si uno sabe no necesita copiarlos y pegarlos, simplemente los escribe. ¡Y se terminaron nuestros problemas!

Yo no soy muy afecto a esta recomendación, pero si hay incompatibilidades entre un host y otro, quizá lo mejor es usar flash. Es un objeto que se mete en la página y se ve con el mismo programa en todas.


Bien. En realidad me estoy dando una vuelta por tu tema porque me quedé pensando en

Iniciado por caricatos

discrepo en que rollover sea cosa de estilos, y afirmo que es un tema para javascript, siempre que se trate del efecto... a:hover implica el uso del tag a, que semánticamente se debe usar en enlaces o anclajes (anchor => ancla)... si no se pretende enlazar o anclar, lo que debe usarse son los eventos mouseover/mousedon. lamentablemente se ha malusado javascript para chorradas que han provocado la desactivación por parte de muchos usuarios, pero eso no cambia nada... sin enlaces de por medio, los efectos deben programarse con javascript

Iniciado por kseso?

La pseudoclase :hover se puede aplicar a cualquier elemento (tag). Otra cosa es si hay algún engendro del demonio que no lo soporte.

Hace un montón que no nos encontramos en un tema, caricatos, y ya no recuerdo si alguna vez debatimos este asunto y si llegamos a ponernos de acuerdo en algo; pero resulta que hace unos meses justamente comenté sobre si realmente nos convenía apoyar las animaciones (algunas muy complejas) con CSS.

Empecemos por marcar una diferencia : al comienzo del tema se habló de

Iniciado por jj68

una imagen en el centro y alrededor de ella el texto que ira cambiando de color ... y que despues me lleve a la pagina que pone en el mismo rollover.

Pero más tarde ya había imágenes girando que cambiaban y se detenían con el puntero. El primer caso puede ser perfectamente un enlace con hover, pero el segundo es un rollover. En verdad, todos los hover son rollover, pero no todos los rollover funcionan como hover.

Hagamos un poco de historia. Cuando las páginas eran sólo HTML, su fuerte —como su sigla lo indica— era el hyper texto. Estos enlaces o anclas permitían que saltásemos desde allí a otro párrafo u otro documento relacionados, y tenían un color azul característico que lo destacaban del texto negro común y corriente. Estamos hablando de una época en que no había CSS, ni JAVA ni JavaScript, y el azul del anchor era practicamente un 'color de sistema', que nos marcaba dónde estaba el hypertexto.
Y no era el único color, si la página del link había sido visitada antes, en vez de azul aparecía violeta. Con eso nos ahorrabamos el chasco de esperar por un sitio que ya habíamos visto.
Otro color era el verde, que se veía después del click y hasta que aparecía la nueva página. Como en esa época abrir un documento demoraba mucho, el color del enlace nos confirmaba que estaba activado y que no habíamos clickeado en falso.
Y por último, el "engendro del demonio" agregó un color —creo que— rojo, que avisaba cuándo el puntero entraba en un texto clickeable. Sobre todo marcaba los límites del enlace, algo que el cursor manecilla no necesariamente hacía. (El reborde punteado sí, pero era más que nada para la navegación por teclado).

Ahora se entiende mejor por qué dije que eran practicamente 'colores de sistema', cada uno tenía un significado y se podían configurar (nadie lo hacía ) desde el panel del navegador.

Pero había un problema. Eran demasiados colores, y si (p.e.) el fondo era verde, el enlace activo 'desaparecía'. Y eso no lo podía cambiar el usuario : lo sabía sólo el diseñador que puso el fondo, así que se agregaron atributos al HTML para que se pudieran reasignar colores desde allí reemplazando alos default o a los personalizados.

Craso error.

Si bien MS siempre tuvo buen criterio para crear etiquetas y atributos (que el W3C después no los aceptara, es otra historia), esta vez confió demasiado en los desarrolladores web; apenas tuvieron un :hover en el CSS, lo usaron para animar tamaños, imágenes, posiciones; y la siguiente generación que aprendió con ellos olvidó que eran un recurso de accesibilidad, y dio por sentado que era un efecto pirotécnico, con el apuyo demagógico del Consortium que ahora permite que se lo metan a un div o una celda aunque no sean elementos activables de HTML, XML o XHTML.

Una vergüenza.

Aunque es totalmente cierto eso de que

Iniciado por caricatos

cada uno hace su página como se le antoja

Sólo que conviene explicar las diferencias. Para que no pase como aquella vez en que unos diseñadores gráficos descubrieron que maquetando con tablas podían hacer páginas más o menos como diagramaban una revista; y después las usamos todos. Ahora hay que decirles que para organizar el documento se usan estilos, y para hacer animaciones se usa lenguaje de programación.

Después sí. Cada uno elige hacerlo como se le dé la gana.

[jj68]

Hola de nuevo ahora que he conseguido ponerlo como queria me invade la curiosidad en mi mente el hacerlo más original y la idea es la que comenta FUROYA las imagenes que tengo alrededor de otra imagen que den vueltas pero cuando se pase el mouse se pare y pueda pulsar en ella para que me lleve al enlace.
Os pongo la pagina para que veais como esta hecho y lo que quiero.
adac-ex.com.

gracias.

[furoya]

Pensé que en este tiempo alguien iba a responder. Aunque más no fuera con un enlace, porque la pregunta seguro ya se hizo antes. Otra cuestión podría ser que este último efecto no tiene mucho que ver con el rollover del comienzo. Pero resulta que preparé un ejemplo donde le inventé un punto de contacto, para así postearlo también acá. :D

Antes del código, digamos que no fui yo quien habló de estas animaciones

Iniciado por jj68

...otra pregunta creo que se hace con javascrip. los o las imagenes que dan vieltas y cuando pasas el raton se para o van mas rapido asta que le haces clik auno como se hace, o me estoy metiendo en mucho...

Lo de los cambios de velocidad habría que discutirlo un poco; por lo demás, se parece mucho a las marquesinas de enlaces, que al acercar el puntero se detienen para que no tengamos que andar persiguiendo los botones por toda la pantalla.

Los menúes giratorios tienen un uso muy limitado. Suelen estar como portadas, y los botones nos llevan a las distintas páginas del sitio. o pueden estar —ya más reducidos— en algún rincón, a modo de banner animado.
Las mías son aseveraciones muy generales, seguramente un buen diseñador puede crear un caso más particular donde quede bien en medio del documento, pero no es algo que vayamos a debatir entre tú y yo.

Por otro lado, los botones deben ser todos del mismo tamaño, muy preferentemente circulares o cuadrados. Ya vi que tampoco es tu caso.

Y aprovecho que estamos en "tu caso" para comentar que el cambio de rollover se podría hacer con la técnica de sprite. Es mucho más eficiente y apenas más complicada.


Bueno, vamos al punto. Resulta que la rotación o giro de botones es una animación que ya se sale de los límites del tema. Pero si lo pensamos un poco, "rotación" es también el efecto que hace el rollover. Quiero decir, que hay un botón o una imagen, y al ponerle el cursor encima se cambia por otro/a. En el caso de la "rotación" de banners, el cambio suele ser automático y aquí el cambio lo hacemos manual. Pero es basicamente lo mismo.

Todo esto me recordó un truco, un efecto visual, que muestra una rotación (cambio) secuenciada, y simula una rotación (giro) de la rueda de botones.

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title>MENÚ GIRATORIO.</title>
<script type="text/javascript">
var guarda, paso = 1;

function gira1(){
if(paso == 1){
guarda = document.getElementById("P0").innerHTML; 

for(f=0;f<=329;f+=30){
document.getElementById("P"+f).innerHTML = 
document.getElementById("P"+(f+30)).innerHTML;
}
document.getElementById("P330").innerHTML = guarda;
}
setTimeout("gira1()" , 500);

}
onload = gira1;
</script>
<style type="text/css">
body, html {font-size:100%; background-color:#000000; color: #ffffff; }
#caja {font-size: 30px; font-weight: 900; height: 5em; position: relative; 
font-family: "arial unicode ms", "lucida sans unicode", sans-serif; width: 320px; 
height: 320px; cursor: no-drop; }
#caja p {text-align: center; width:50px; height: 50px; position: absolute; }
#Ctro {position: absolute; top: 120px; left: 120px; }
#aster {position: absolute; top: 100px; left: 320px; color: #ffff00; font-size: 100px; 
font-weight: bold; }
a {cursor: pointer; text-decoration: none; }
a.fuego:link, a.fuego:visited {color: #ff9999; }
a.fuego:hover {color: #ff0000 }
a.agua:link, a.agua:visited {color: #9999ff; }
a.agua:hover {color: #0000ff; }
a.tierra:link, a.tierra:visited {color: #d2b48c; }
a.tierra:hover {color: #f3c49c; }
a.aire:link, a.aire:visited {color: #999999; }
a.aire:hover {color: #cccccc; }
#Ctro a:link {color: #ffffff; }
#Ctro a:hover {color: #ffff00; }
</style>
</head>
<body>
<h2>Zod&iacute;aco.</h2>

<div id="caja"  onmouseover="paso=0" onmouseout="paso=1">

<p style="top: 120px; left: 240px" id=P0><a class="agua" onmouseover="paso=0" 
href="http://es.wikipedia.org/wiki/C%C3%A1ncer_(astrolog%C3%ADa)">♋</a></p>

<p style="top: 179px; left: 223px" id=P30><a class="fuego" onmouseover="paso=0" 
href="http://es.wikipedia.org/wiki/Leo_(astrolog%C3%ADa)">♌</a></p>

<p style="top: 223px; left: 180px" id=P60><a class="tierra" onmouseover="paso=0"  
href="http://es.wikipedia.org/wiki/Virgo_(astrolog%C3%ADa)">♍</a></p>

<p style="top: 239px; left: 120px" id=P90><a class="aire" onmouseover="paso=0"  
href="http://es.wikipedia.org/wiki/Libra_(astrolog%C3%ADa)">♎</a></p>

<p style="top: 223px; left: 60px" id=P120><a class="agua" onmouseover="paso=0"  
href="http://es.wikipedia.org/wiki/Escorpio_(astrolog%C3%ADa)">♏</a></p>

<p style="top: 180px; left: 16px" id=P150><a class="fuego" onmouseover="paso=0"  
href="http://es.wikipedia.org/wiki/Sagitario_(astrolog%C3%ADa)">♐</a></p>

<p style="top: 120px; left: 0px" id=P180><a class="tierra" onmouseover="paso=0"  
href="http://es.wikipedia.org/wiki/Capricornio_(astrolog%C3%ADa)">♑</a></p>

<p style="top: 60px; left: 16px" id=P210><a class="aire" onmouseover="paso=0"  
href="http://es.wikipedia.org/wiki/Acuario_(astrolog%C3%ADa)">♒</a></p>

<p style="top: 16px; left: 59px" id=P240><a class="agua" onmouseover="paso=0"  
href="http://es.wikipedia.org/wiki/Piscis_(astrolog%C3%ADa)">♓</a></p>

<p style="top: 0px; left: 119px" id=P270><a class="fuego" onmouseover="paso=0"  
href="http://es.wikipedia.org/wiki/Aries_(astrolog%C3%ADa)">♈</a></p>

<p style="top: 16px; left: 179px" id=P300><a class="tierra" onmouseover="paso=0"  
href="http://es.wikipedia.org/wiki/Tauro_(astrolog%C3%ADa)">♉</a></p>

<p style="top: 59px; left: 223px" id=P330><a class="aire" onmouseover="paso=0"  
href="http://es.wikipedia.org/wiki/G%C3%A9minis_(astrolog%C3%ADa)">♊</a></p>

<p id="Ctro"><a onmouseover="paso=0"   
href="http://es.wikipedia.org/wiki/Asesino_del_Zodiaco">⌖</a></p>

</div>

<p><b>* Homenaje a <u>Zodiac</u> (2007), de David Fincher.</b></p>

<div id="aster">*</div>

</body>
</html>

Por supuesto, aquí no se mueve nada, es sólo un reemplazo de contenido, pero da la ilusión de un giro antihorario de los signos. El tamaño y la combinación de colores es importante para que se vea minimamente creíble. Y una animación "angular" le ganaría por goleada. Pero es lo mejor que se me ocurrió para meter en este tema y no tener que saltar a otro.


girar un div???

Sprites css

Diferentes MouseOver's a una Imagen

ayuda con marquee

122.- Cómo poner un reloj analógico en mi web

Reloj analógico



P.D. : Mmmmm. Me parece que de un tiempo para acá, ya estoy homenajeando cualquier cosa.