Como se soluciona el problema de hover en IE?

[Ratus-BROWN]

Hola buenas a todos/as,


queria saber como puedo solventar el problema de hover en IE, estoy haciendo una galería de imágenes con rollover utilizando la pseudoclase hover y me he dado cuenta que no la soporta IE. ¿Se arregla con algún tipo de hack?......¿que debo hacer?......


Gracias
R,brown

[Joni2Back]

me pasaba lo mismo con unos botones (con imagenes) y no lo pude resolver de forma que me quede el css/xhtml valido, asi que tuve que hacerlo en flash

[ArturoGallegos]

con css estaría muy complicado tendrías una hoja de estilos muy grande te explico con este ejemplo:

body

Código HTML:

<div class="img1 rellover"><img src="img/spacer.gif" alt="as" width="70" height="70" />
<div class="img2 rellover"><img src="img/spacer.gif" alt="as" width="70" height="70" /></div> 

y css

Código HTML:

.rellover{overflow:hidden; width:70px; height:70px;}
.rellover:hover{background-position:bottom right; vertical-align:bottom;}
.img1{background:url(img/foto1.jpg) top left;}
.img2{background:url(img/foto2.jpg) top left;}

en la imagen de background se colocan las dos imágenes a mostrar por lo que nuestra imagen seria de 140x70 o 70x140 por ejem por cada imagen que quieras insertar es un class con lo que si son muchas imágenes la oja de estilos crecería demasiado

yo lo aria por facilidad con java ya que mencionas es una gallería

y seria así

un js con este código

Código HTML:

/*
  Standards Compliant Rollover Script
  Author : Daniel Nolan
  http://www.bleedingego.co.uk/webdev.php
 
  With modifs for Dialnet by Eloy Lafuente (stronk7)
 */

addEvent(window, 'load', initRollovers);

function initRollovers() {
    if(!document.getElementById) return;
    
    var aPreLoad = new Array();
    var sTempSrc;
    var aImages = document.getElementsByTagName("img");
    
    for(var i = 0; i < aImages.length; i++) {
        if(aImages[i].className.match(/^rollover|^rollover | rollover | rollover$|rollover$/)) {
            var src = aImages[i].getAttribute("src");
            var ftype = src.substring(src.lastIndexOf("."), src.length);
            var hsrc = src.replace("_bn" + ftype, ftype);
            
            aImages[i].setAttribute("hsrc", hsrc);
            
            aPreLoad[i] = new Image();
            aPreLoad[i].src = hsrc;
            
            aImages[i].onmouseover = function() {
                sTempSrc = this.getAttribute("src");
                this.setAttribute("src", this.getAttribute("hsrc"));
            }
            
            aImages[i].onmouseout = function() {
                if(!sTempSrc) {
                    sTempSrc = this.getAttribute("src").replace(ftype, "_bn" + ftype);
                }
                this.setAttribute("src", sTempSrc);
            }
        }
    }
}

function addEvent(objeto, evType, fn) {
    if (objeto.addEventListener) {
        objeto.addEventListener(evType, fn, false);
        return true;
    } else if (objeto.attachEvent) {
        var r = objeto.attachEvent("on" + evType, fn);
        return r;
    } else {
        return false;
    }
}

y en tu html

Código HTML:

<img src="img/mifoto_bn.jpg" class="rollover" border="0"/> 

en tu carpeta de imágenes debieras tener
mifoto.jpg y mifoto_bn.jpg

de inicio se muestra mifoto_bn.jpg y al pasar el raton mifoto.jpg

aclaro que este código no lo hice yo en el inicio del js vienen los créditos yo solo lo conseguí en san google

[Mikmoro]

Iniciado por Ratus-BROWN

queria saber como puedo solventar el problema de hover en IE, estoy haciendo una galería de imágenes con rollover utilizando la pseudoclase hover y me he dado cuenta que no la soporta IE. ¿Se arregla con algún tipo de hack?

Tienes dos opciones: o bien metes los elementos en enlaces (el único elemento sobre el que soporta IE6 el :hover), como en este ejemplo (o mil más), o bien cargas un javascript llamado IE8.js, que añade esas funcionalidades a IE y te permite usar el :hover como en los demás navegadores entre otras cosas.

[xurxinho]

Depende de lo que quieras hacer, lo mejor para mi es javaScript ( es tristisimo que el hover no esté implementado en todos los navegadores y versiones por defecto y haya otras mariconadas que no sirvan de nada).

A lo que iba, depende de la complidad pero si buscas un simple subrayado o cambio de color con esto hay garantía(cuidado con las comillas, detro de las funciones metí dobles y simples):



<style type="text/css">
a.link{
text-decoration:none;
color:#fcafca;
}
a.linkhover{text-decoration:underline;
color:black;
}
</style>

<a class="link" href="#" onMouseOut="javaScript:this.className='linkover'" onMouseOver="javaScript:this.className='link'">


Obviamente el css lo puedes cambiar

[std_alex]

si lo que quieres es cambiar una imagen por otra, seria parecido a lo cometado por xurxinho, pero puedes poner directamente la imagen...

<a href="privado.php"><img src="Imag_Web/privado_gris.jpg" border="0" onmouseover="this.src='Imag_Web/privado_color.jpg'" onmouseout="this.src='Imag_Web/privado_gris.jpg'"/></a>

espero te sirva

[pao01]

Fijate si te sirve esto, yo lo he intentado modificar para adaptarlo y poder aplicarlo aquí

[lemattma]

Encontre esta solucion, es un archivo HTC, que agregas a tu css de una manera facil. Espero les ayude.

http://www.alphadigital.cl/blog/lang...css-hover.html

Saludos.