Como se soluciona el problema de hover en IE?

[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