Foros del Web » Creando para Internet » CSS »

Como se soluciona el problema de hover en IE?

Estas en el tema de Como se soluciona el problema de hover en IE? en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 31/03/2009, 13:36
Avatar de Ratus-BROWN  
Fecha de Ingreso: febrero-2009
Ubicación: Valencia
Mensajes: 169
Antigüedad: 8 años, 10 meses
Puntos: 8
Como se soluciona el problema de hover en IE?

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
  #2 (permalink)  
Antiguo 31/03/2009, 14:00
Avatar de Joni2Back  
Fecha de Ingreso: marzo-2009
Mensajes: 146
Antigüedad: 8 años, 8 meses
Puntos: 1
Respuesta: Como se soluciona el problema de hover en IE?

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
  #3 (permalink)  
Antiguo 31/03/2009, 15:48
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.826
Antigüedad: 9 años, 9 meses
Puntos: 953
Respuesta: Como se soluciona el problema de hover en IE?

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
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....

Última edición por ArturoGallegos; 31/03/2009 a las 15:55
  #4 (permalink)  
Antiguo 31/03/2009, 17:20
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Como se soluciona el problema de hover en IE?

Cita:
Iniciado por Ratus-BROWN Ver Mensaje
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.
  #5 (permalink)  
Antiguo 01/04/2009, 07:40
 
Fecha de Ingreso: marzo-2009
Mensajes: 171
Antigüedad: 8 años, 8 meses
Puntos: 4
Respuesta: Como se soluciona el problema de hover en IE?

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
  #6 (permalink)  
Antiguo 01/04/2009, 11:05
 
Fecha de Ingreso: marzo-2009
Mensajes: 10
Antigüedad: 8 años, 9 meses
Puntos: 0
Respuesta: Como se soluciona el problema de hover en IE?

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
  #7 (permalink)  
Antiguo 01/04/2009, 20:24
Avatar de pao01
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 1.875
Antigüedad: 9 años, 6 meses
Puntos: 351
Respuesta: Como se soluciona el problema de hover en IE?

Fijate si te sirve esto, yo lo he intentado modificar para adaptarlo y poder aplicarlo aquí
__________________
Entre más estrecha la mente, más grande la boca.- Ted Cook
Autosconarte-Blog
  #8 (permalink)  
Antiguo 18/02/2010, 08:52
Avatar de lemattma  
Fecha de Ingreso: marzo-2009
Ubicación: Santiago
Mensajes: 49
Antigüedad: 8 años, 9 meses
Puntos: 3
De acuerdo Respuesta: Como se soluciona el problema de hover en IE?

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.
__________________
Martín Miranda
AlphaDigital
Blog
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 16:53.