[PROYECTO firmas Dinamicas] boton borrar

wilichau · #1 (**permalink**) 17/04/2011, 04:56

Hola a tod@s, en mi proyecto de web de firmas dinamicas, quiero que cuando en cursor pase por encima de la imagen, dentro de la imagen salga otra imagen y cuando se pulse me lleve al indice.

No se si me aveis ententido...

Dani_1270 · #2 (**permalink**) 17/04/2011, 05:05

Pues si tu tienes por ejemplo:

Código HTML:

<img id="ejemplo" src="ejemplo.jpg" alt="Ejemplo" />

Le añades el atributo onmouseover y pones una funcion asi:

Código Javascript:

Ver originaldocument.getElementById('ejemplo').src='ejemplo2.jpg';
// Asi cambias una imagen por otra al pasar el ratón

y luego en la funcion onclick le pones document.location="url de destino" y ya esta...

Osea, que te quedase algo como esto:

Código HTML:

<img id="ejemplo" src="ejemplo.jpg" alt="Ejemplo" onmouseover="cambiarImagen()" onmouseout="volveraImagenAnterior()" onclick="parent.location='url de destino'" />

Código Javascript:

Ver originalfunction cambiarImagen(){
document.getElementById('ejemplo').src='ejemplo2.jpg';
}
function volveraImagenAnterior(){
document.getElementById('ejemplo').src='ejemplo.jpg';
}

wilichau · #3 (**permalink**) 17/04/2011, 05:30

pero yo kiero k solo aparesca la imagen de borrar en una esquina y quiero que se mantenga la que hay

Dani_1270 · #4 (**permalink**) 17/04/2011, 06:04

ah pues pones un div con la imagen de borrar en una esquina, y con onmouseover y onmouseout controlas que se muestre o no

Algo como esta pagina http://www.karballo.net/ej/test__.html

El codigo fuente

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sin titulo</title>
<script>
function MostrarImagen(){
document.getElementById('imagenOculta').style.display='block';
}
function noMostrarImagen(){
document.getElementById('imagenOculta').style.display='none';
}
</script>
</head>
<body>
<img src="imagen.jpg" onmouseover="MostrarImagen()" onmouseout="noMostrarImagen()" />
<div id="imagenOculta" style="display:none; position:absolute; top:10px; left:10px;"><img src="imagen2.jpg" onmouseover="MostrarImagen()" onmouseout="noMostrarImagen()" onclick="alert('aqui iria el document.location')"></div>
</body>
</html>

wilichau · #5 (**permalink**) 17/04/2011, 06:16

Y para que salga donde esta la parte amarilla?

este es el codigo k llevo demomento:

Código PHP:

  <?php 
while ($img = $result->fetch_assoc()){ 
            echo '<div class="rodeo"><a href="../'.$img['imagen'].'" rel="lightbox[roadtrip]"><img style="max-height: 100px" src="../'.$img['imagen'].'" /></a>'; 
?> 
<div id="general"> 
<?php 
if ($ima == $uss) 
            { 
?> 
    <div id="botones"> 
        <div class="borrar"> 
<?php 
                    echo '<a href="admin.php?del='.$img['id'].'&url='.$img['nombre'].'" title="Borrar Imágen">'; 
?> 
                <span></span> 
                Borrar Imágen 
            </a> 
        </div> 
    </div> 
<?php 
} else { 
    echo ''; 
} 
?> 
    <div id="datos"> 
<?php 
                    echo 'Usuario: <a href="galeria.php?user='.$img['user'].'">'.$img['user'].'</a><br />'; 
                    echo date('d/m/y, H:i', $img['fecha']); 
?> 
    </div> 
</div> 
<?php 
                    echo '</div>';

wilichau · #6 (**permalink**) 17/04/2011, 06:22

vale ya lo consegi! gracias Dani_1270 te devo 1 !!

Dani_1270 · #7 (**permalink**) 17/04/2011, 06:25

Pues sería meter las dos imagenes dentro de un div, la que quieres que se muestre y se oculte dentro del div de la primera imagen, y quedaría asi:

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sin titulo</title>
<script>
function MostrarImagen(){
document.getElementById('imagenOculta').style.display='block';
}
function noMostrarImagen(){
document.getElementById('imagenOculta').style.display='none';
}
</script>
<style>
.divPrimeraImagen {position:absolute;}
.divSegundaImagen {position:absolute; bottom:0px; left:0px;}
</style>
</head>
<body>
<div class="divPrimeraImagen"><img src="imagen.jpg" onmouseover="MostrarImagen()" onmouseout="noMostrarImagen()" />
<div id="imagenOculta" class="divSegundaImagen" style="display:none;"><img src="imagen2.jpg" onmouseover="MostrarImagen()" onmouseout="noMostrarImagen()" onclick="alert('aqui iria el document.location')"></div></div>
</body>
</html>

Solo tendrías que cambiar la hoja de estilos, si quieres que se muestre abajo, pues con bottom:0px; left:0px;, o lo alineas como te venga a ti bien.
Actualicé el ejemplo: http://www.karballo.net/ej/test__.html

Dani_1270 · #8 (**permalink**) 17/04/2011, 06:29

Cita:

Iniciado por wilichau

vale ya lo consegi! gracias Dani_1270 te devo 1 !!

vale jajaja he tardado yo mas en escribir la respuesta que tu en deducirla jajajaja