Ocultar Imagen al sacar cursor en php
Les consulto lo siguiente.
Tengo el siguiente código y lo que necesito es que cuando no este seleccionando la imagen. Que la otra (imagen con zoom) se oculte.! Este código lo encontré en internet y funciona perfecto, con la excepción de esto.
Muchas Gracias!
Código:
<style>
*{ margin:0; padding:0; }
#lupa{width:500px;height:400px;position:absolute;border:0px solid #D8D8D8;overflow:hidden;left: 605px;top:55px;background-color:#999}
#im{position: relative; left:0;top:0}
#im0{cursor:crosshair; border:2px solid #D5D9EA ;left: 0px}
</style>
<script>
function t(id){return document.getElementById(id);}
function addEvent(obj,fun,type){
if(obj.addEventListener){
obj.addEventListener(type,fun,false);
}else if(obj.attachEvent){
var f=function(){
fun.call(obj,window.event);
}
obj.attachEvent('on'+type,f);
obj[fun.toString()+type]=f;
}else{
obj['on'+type]=fun;
}
}
function getPos(e){
var ev=e || window.event;
var obj=ev.target || ev.srcElement;
obj.style.position='relative';
posX=ev.layerX || ev.offsetX || 0;
posY=ev.layerY || ev.offsetY || 0;
return {x:posX,y:posY}
}
function css(id,prop){
if(window.getComputedStyle){
return document.defaultView.getComputedStyle(t(id),null).getPropertyValue(prop);
}else{
var re = /(-([a-z]){1})/g;
if (prop == 'float') prop = 'styleFloat';
if (re.test(prop)) {
prop = prop.replace(re, function () {
return arguments[2].toUpperCase();
});
}
return t(id).currentStyle[prop] ? T(id).currentStyle[prop] : null;
}
}
function cambiar(pos,rel,e,a,a2,w,h){
var al=parseInt(a);
var al2=parseInt(a2);
if(pos.x<(al/2)/rel)
pos.x=(al/2)/rel;
if(pos.y<(al2/2)/rel)
pos.y=(al2/2)/rel;
if(pos.x>(w)-(al/2)/rel)
pos.x=(w)-(al/2)/rel;
if(pos.y>(h)-(al2/2)/rel)
pos.y=(h)-(al2/2)/rel;
t('im').style.left=-(rel*pos.x)+(al/2)+'px';
t('im').style.top=-(rel*pos.y)+(al2/2)+'px';
}
onload=function(){
addEvent(
t('im0'),
function(e){
var al2=css('lupa','height');
var al=css('lupa','width');
var pos=getPos(e);
cambiar(pos,(t('im').width)/this.width,e,al,al2,this.width,this.height);
},
'mousemove'
);
}
</script>
<img align="left" left="10" id="im0" src="image1.jpg" width="500" height="500" border="5" />
<div id="lupa"><img id="im" src="image1.jpg" width="800" /></div>
Añade estas funciones a tu <script>
function mostrar(id){
document.getElementById(id).style.visibility = 'visible';
}
function ocultar(id){
document.getElementById(id).style.visibility = 'hidden';
}y las llamas desde tu imagen de esta manera
<img align="left" left="10" id="im0" src="image1.jpg" width="500" height="500" border="5" onmouseover="mostrar('lupa')" onmouseout="ocultar('lupa')" />
Muchas Gracias por la respuesta.
Te quería consultar porque no se como cargarlo dentro de un echo.
echo '<img align="left" left="10" id="im0" src="image/'.$row["imagen"].'" width="500" height="500" border="5" /> ';
Muchas Gracias.
Según als buenas prácticas en programación, no deberóas hacer eso, deberías hacer de la siguiente manera:
<img align="left" left="10" id="im0" src="<?php echo 'image/'.$row["imagen"]; ?>" width="500" height="500" border="5" />
No mezclar código HTML con PHP, porque retarda los tiempos de respuesta y se pueden presenta fallas en el interprete.
Si la imagen se muestra por medio de una condición se deberái hacer de la siguiente manera:
<?php if($condición == $comparacion) : ?> <img align="left" left="10" id="im0" src="<?php echo 'image/'.$row["imagen"]; ?>" width="500" height="500" border="5" /> <?php endif; ?>
Si lo imprimes por medio de un bucle (ejemplo FOR)
<?php for($i=0;$i<count($resultados-base-de-datos); $i++) : ?> //reemplaza $resultados-base-de-datos por la sentencia de consulta <img align="left" left="10" id="im0" src="<?php echo 'image/'.$row[$i]["imagen"]; ?>" width="500" height="500" border="5" /> <?php endfor; ?>
El caso es que no lo podrás hacer por medio de "echo" debido a que debes pasarle el parámetro a la función javascript dentro de comillas, lo que te presentará inconvenientes al momento de escribirlas a menos que hagas lo siguiente:
<?php
$funcion1 = "mostrar('lupa')";
$funcion2 = "ocultar('lupa')";
echo '<img align="left" left="10" id="im0" src="img1.png" width="500" height="500" border="5" onmouseover="'.$funcion1.'" onmouseout="'.$funcion2.'" />';
?>
