Problema al insertar dos rollover o más.

[nodudu]

Buenas!

Estoy haciendo una web con botones que tienen rollover sencillos.
Me funciona un botón con rollover, pero cuando repito el código para poner otro boton con rollover (con otras dos imagenes), ya no funciona ninguno...

Aqui os pego el codigo :


<div id="boton1">

<a href= "#" onclick="returnfalse;" onmouseover="document.ejemplo.src='img/btnweb.jpg';" onmouseout="document.ejemplo.src='img/btnweb0.jpg';">
<IMG name="ejemplo" src="img/btnweb0.jpg" alt = "ejemplo de rolloversimple" border= "0">
</a>
</div>

<div id="boton2">

<a href= "#" onclick="returnfalse;" onmouseover="document.ejemplo.src='img/btnweb.jpg';" onmouseout="document.ejemplo.src='img/btnweb0.jpg';">
<IMG name="ejemplo" src="img/btnidentidad0.jpg" alt = "ejemplo de rolloversimple" border= "0">
</a>


</div>



Supongo que será por las apelaciones en cada codigo... ya que no cambié, se quedan iguales ("alt=ejemplo de rolloversimple" o documento.ejemplo.src) verdad ?
Alguien sabría corregir este codigo para que pueda funcionar por favor ? Le sería muy agradecida!!

muchisimas gracias de antemano!!
un saludo

[zerokilled]

buenas,
lamento esta introducción pero es una clara muestra de que el copy & paste no es una solución y mucho menos recomendada para los que dominan poco o nada cierto material. le recomiendo mejor leer un tutorial con explicación de como funciona y como crearlo. así tienes las ideas básicas para defenderte por ti misma.

el código no funciona porque las referencias son directas en lugar de dinámicas. primero... en el fragmento document.ejemplo, ejemplo es una referencia a cualquier elemento que tiene como valor el mismo nombre en el atributo name. y segundo... nótese que al repetirlo dos o más veces, el fragmento document.ejemplo, ¿a cuál de los elementos hace referencia? a ninguno porque dicho fragmento se convierte en otro tipo de valor, una colección de elementos.

de todos modos, en javascript hay multiples caminos para lograr el mismo objetivo, algunos más eficientes y otros no tanto. mi recomendación es intentes hacerlo de otra manera, especificamente con CSS porque con javascript, además de ser un lenguaje de programación, también requiere estar alerta al significado que puede adquirir una instrucción en determinadas condiciones. eso no significa que en CSS sea fácil porque también puede tener sus complicaciones, pero son menos detalles a considerar. busca por la web con terminos css rollover, hay muchos tutoriales con bastante explicación y ejemplos.

[caricatos]

Hola:

No suelo discrepar con el compañero zerokilled, es más; generalmente estamos de acuerdo pero cuando se trata de efectos lo que prefiero es usar un lenguaje de programación como javascript, en vez de hojas de estilo, que debería usarse para maquetar, o ubicar los elementos de las páginas.

Para hacer un rollover con css habría que usar lo que no sé si se llama pseudo-elemento ":hover", que en viejas versiones de explorer (no sé nada sobre esa evolución), solo se podía aplicar a los enlaces; o sea, obligaba a usarlo en etiquetas "a"; así que por compatibilidad con viejos navegadores tal vez no sea tan aconsejable... (¡sí...!, ya sé que hasta microsoft recomienda pasarse a las nuevas versiones... pero la web es la web... ¿?)

Con un "media='print'", ¿qué pasaría con los :hover, y demás...?

Sobre el tema concreto de los rollover, te puedo ayudar con este apunte: Javascript: rollover; y sobre usar css o javascript, me gustaría escuchar opiniones.

Saludos

[Carlangueitor]

Hola,

Caricatos, yo también suelo estar de acuerdo con lo que escribes, pero creo que en este caso yo disiento

El soporte para la pseuadoclase :hover en Internet Explorer fue añadida en la versión 7, solo las anteriores no son compatibles. Según las estadísticas(1), la versión 6 tiene un uso de entre el 2.3% y el 3.7% según el rubro del sitio (IE 5 no llega ni al 0.1%). No creo que solo por ese pequeño porcentaje se justifique utilizar Javascript para un rollover tomando en cuenta que JavaScript puede estar desactivado en cualquiera los otros navegadores (ni hablar de móviles y otros dispositivos).

Aunque si por otro lado mi sitio posee un alto porcentaje de visitantes con esta versión (por ejemplo en Cuba el porcentaje de usuarios con IE6 es de más del 8%(2)), o simplemente no queremos dejar fuera a esos usuarios a mi punto de vista lo mejor sería utilizar CSS para todos los demás navegadores y añadir mediante comentarios condicionales el Javascript para IE, así solo lo usar cuando sea necesario.

Ahora, quizá no es el caso especifico del usuario, pero en muchos casos algunos elementos que requieren rollovers como los menús también deberían ser enlaces, semánticamente hablando.

Sobre el media="print" no comprendo, un rollover con CSS y uno con JavaScript se verá igual en un medio impreso: No va a salir, se va imprimir el elemento en su estado normal.

1. Las estadísticas tomadas de StatCounter y w3schools.
   
2. De nuevo StatCounter

Saludos

[zerokilled]

saludos gentes!
si de opiniones se trata, opino que la mejor solución depende de cada caso. luego de leer el artículo de @caricatos, estoy de acuerdo con él en la medida que sea el método más adecuado para el caso. me explico. es cierto que el efecto rollovers se puede aplicar a diferentes contenidos de forma general. para este caso particular asumí que: 1) el rollover es aplicado en un listado de enlaces, y 2) la autora no tiene mucha idea de javascript. le ofreci la alternativa de CSS para que no se complicara con la programación.

ahora bien, para efectos prácticos. por lo general un rollover agrega un poco de usabilidad pero en teoría no agrega información útil. por ejemplo, un rollover en menu de enlaces le dice a un usuario que dicho contenido es interactivo. en este tipo de caso yo prefiero hacerlo con CSS más bien porque es una cuestion prestenacional.

el otro caso es el que expone el artículo, rollover sobre contenido que agrega información. si fuera hacerse un rollover sobre un contenido útil, lo mejor es hacerlo con javascript de forma no intrusiva. estoy en total acuerdo que usar la técnica de una imagen de fondo para suplantar el elemento IMG no es la mejor manera. primero porque le quita valor semántico, y segundo porque se trata de una imagen que agrega información. si javascript esta desactivado, personalmente no veo la preocupación de que la imagen no tenga el efecto, más me preocuparía si la imagen por alguna razón no se muestra.

[emprear]

@Carlangueitor

Me permito agregar que si el problema es ie6, hace ya tiempo existe esto
http://peterned.home.xs4all.nl/

Saludos

[caricatos]

Hola:

Justamente el tema semántico es el que me hace pensar que css no debe usarse para efectos visuales (o de otro tipo)... la respuesta a eventos y efectos no son cosas de diseño; más bien son cosas de programación.

Hay cosas que pueden hacerse de más de una manera, y lo que propongo es que se aplique siempre lo mejor o más adecuado. Está claro que un rollover no es cosa exclusiva de javascript; pero tampoco de css, pero entre una cosa y otra, al tratarse de un efecto visual, creo que lo apropiado es javascript... y si alguien deshabilita javascript será porque entre otras cosas no tiene interés en un efecto visual rollover (como sea).

Otro debate podría ser entre atributos html o estilos, y siempre prefiero (o mejor dicho, pienso que es lo adecuado) usar estilos (como height, width, align, etc...)

Claro que algunos atributos no tienen versión "style" (enctyppe, type, action, target, href, etc...)

Saludos