Quiero conseguir el efecto de que, al hacer click en una imagen, esta cambie, y al hac er click en la nueva imagen, se vuelva a poner la de inicio.
Código PHP:
<a href='#' onmouseover="img_on()" onmouseout="img_off()" onclick="div_on()"><img src='imagenes/ver_mas.png' alt='Ver más' title='Ver tarea' id='img_ver_mas' /></a>
Las imagenes sobre las que quiero conseguir esto, tienen un 'rollover', con el siguiente codigo:
Código PHP:
<!-- SCRIPT ROLLOVER IMAGEN VER TAREA -->
<script type="text/javascript">
function img_on(){
var img = document.getElementById("img_ver_mas");
if(img.src = "imagenes/ver_mas.png"){
img.src='imagenes/ver_mas_over.png';
}
else if(img.src = "imagenes/ver_menos.png"){
img.src='imagenes/ver_menos_over.png';
}
}
function img_off(){
var img = document.getElementById("img_ver_mas");
if(img.src = "imagenes/ver_mas_over.png"){
img.src='imagenes/ver_mas.png';
}
else if(img.src = "imagenes/ver_menos_over.png"){
img.src='imagenes/ver_menos.png';
}
}
</script>
Y el codigo con el que estoy intentando hacer el 'ON / OFF' es este:
Código PHP:
<script type="text/javascript">
function div_on(){
var img = document.getElementById("img_ver_mas");
var cont_tarea = document.getElementById("contenido_tarea");
var tarea = document.getElementById("tarea");
if(img.src = "imagenes/ver_mas.png"){
cont_tarea.style.display="block";
tarea.style.height="500px";
document.getElementById("img_ver_mas").src='imagenes/ver_menos.png';
}
else if(img.src = "imagenes/ver_menos.png"){
cont_tarea.style.display="none";
document.getElementById("img_ver_mas").src='imagenes/ver_mas.png';
}
}
</script>
Tambien estoy haciendo que una capa se agrande, como veis.
El problema es que cuando hago click en el MAS, la imagen cambia a la de un MENOS, pero al quitar el raton (onmouseout) la imagen se vuelve a poner el MAS, en lugar de hacer el rollover del menos.
No se si me he explicado bien.