Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » JavaScript » toggle() con imagen fija cuando se hace click

JavaScript - toggle() con imagen fija cuando se hace click

Volver
Nuevo Tema
<<>>
 
Vista:
Imágen de perfil de AGUSTIN

toggle() con imagen fija cuando se hace click

Publicado por AGUSTIN (2 intervenciones) el 12/11/2014 20:05:49
<a id="displayText" href="javascript:toggle();" name="displayText">

<img id="image_3395978" src= "http:IMAGEN1"

onmouseover="this.src='IMAGEN2'"

onmouseout="this.src='IMAGEN1;"

alt="" name="" /></a>

<div id="toggleText" style="display: none">

Hasta aquí creo que se ve que la función está asociada a una imagen con toggle() que al hacer click sobre ella se despliega un texto. Los eventos onmouseover y onmouseout supongo que no son ningún misterio.

Lo que quiero es lo siguiente: que al hacer click y se despliegue el texto, la IMAGEN2 se mantenga (como la de "onmouseover") y que no intervenga "onmouseout" hasta que el texto se contraiga con otro click.

Saludos.

Os dejo el <script> por si lo necesitais:

<script language="javascript" type="text/javascript">
//<![CDATA[

function toggle() {
var ele = document.getElementById("toggleText");
var text = document.getElementById("displayText");
if(ele.style.display == "block") {
ele.style.display = "none";
}
else {
ele.style.display = "block";
}

}
</script>



Ahorro_y_calidad_garantizados
Ahorro_y_calidad_garantizados2
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve
Val: 3.162
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

toggle() con imagen fija cuando se hace click

Publicado por xve (2100 intervenciones) el 13/11/2014 12:37:59
Hola Agustin, una manera que se me ocurre, es que modifiques el contenido del onmouseout según sea tu interés...

Aquí te muestro un ejemplo en el que he realizado la prueba... solo tienes que cambiar los nombres de las imágenes.

Una vez has pulsado, se queda la imagen fija, y si vuelves a pulsar, vuelven a intercambiarse como al inicio.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="utf-8">
 
    <script>
    function toggle() {
        var ele = document.getElementById("toggleText");
        var imagen=document.getElementById("image_3395978");
        if(ele.style.display == "block") {
            ele.style.display = "none";
            imagen.onmouseout="this.src='img_6.jpg'";
        }
        else {
            ele.style.display = "block";
            imagen.onmouseout="this.src='img_5.jpg'";
        }
    }
    </script>
 
</head>
 
<body>
 
<a id="displayText" href="javascript:toggle();" name="displayText">
    <img id="image_3395978" src="img_6.jpg"
    onmouseover="this.src='img_5.jpg'"
    onmouseout="this.src='img_6.jpg'"
    alt="" name="" /></a>
 
<div id="toggleText" style="display: none">
fasklfhlaskdflaksfd
</div>
 
</body>
</html>

Te serviría?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de AGUSTIN

toggle() con imagen fija cuando se hace click

Publicado por AGUSTIN (2 intervenciones) el 14/11/2014 11:03:28
Para empezar gracias por tu respuesta.

Bueno, he probado tu propuesta y ha mejorado algo el problema aunque no lo ha resuelto del todo. Una vez hago click la imagen se queda estática en "modo oscuro" y ya no vuelve a funcionar el onmouseout(). Aún así la solución no es mala pues da la impresión de querer recordar que ese toggle() ya lo has seleccion/ leído.

Otra solución que también he probado, aunque con idéntico resultado es la siguiente:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
function toggle(switchImgTag)
   {
        var ele = document.getElementById("toggleText");
        var text = document.getElementById("displayText");
        var imageEle = document.getElementById(switchImgTag);
 
   if(ele.style.display == "block")
        {
            ele.style.display = "none";
imageEle.innerHTML  = '<img src = "'IMAGEN1";>'


        }

        else 

        {

            ele.style.display = "block";

imageEle.innerHTML = '<img src="IMAGEN2">';
 
        }
    }
 
<a id="imageDivLink" href="javascript:toggle('imageDivLink');" name="image_1"><img src="IMAGEN1" onmouseover=
"this.src='IMAGEN2'" onmouseout=
"this.src='IMAGEN1'" alt="" name="" /></a></center>
<div id="toggleText" style="display: none">
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar