Foros del Web » Creando para Internet » HTML »

'mover' imagen dentro de iframe

 Estas en el tema de 'mover' imagen dentro de iframe en el foro de HTML en Foros del Web. hola Me gustaria saber si de alguna forma mediante javascript o html se pudiera conseguir desplazar una imagen de un tamaño 500 px dentro de ...
  #1 (permalink)  
Antiguo 24/02/2005, 19:05
 
Fecha de Ingreso: marzo-2002
Mensajes: 466
Antigüedad: 22 años
Puntos: 0
'mover' imagen dentro de iframe
hola
Me gustaria saber si de alguna forma mediante javascript o html se pudiera conseguir desplazar una imagen de un tamaño 500 px dentro de un iframe de 100, de tal forma, que para 'mover' la imagen en lugar de usar el scroll vertical y horizontal, pues que saliera el icono de la 'manita' y arrastrar con el raton hacia donde queremos movernos en la imagen....tal y como lo hace el acrobat reader con los pdf.
Saludos
  #2 (permalink)  
Antiguo 24/02/2005, 22:48
Avatar de vitrorhei
Usuario baneado!
  
Fecha de Ingreso: julio-2004
Ubicación: Anhedonia es mi lugar
Mensajes: 144
Antigüedad: 19 años, 8 meses
Puntos: 0
Si se puede, esto lo puedes construir mas rapido si manejas el DreamW, es un poco tedioso explicarlo pero en resumidas; lo que llamas al IFRAME es en si otra pagina web, por lo que en esta pagina a llamar, por medio de capas moviles que contiene tu imagen, realizaras este efecto que buscas, eso si debes indicar en las propiedades del IFRAME el no abrir scrolls.

En el DreamW en español estaria en comportamientos-Arrastras capa.

Espero que lo puedas realizar..-.
  #3 (permalink)  
Antiguo 25/02/2005, 08:48
 
Fecha de Ingreso: marzo-2002
Mensajes: 466
Antigüedad: 22 años
Puntos: 0
si pero..
hola

gracias por la respuesta..pero es q no tengo dreamW....uso frontpage...el tema es que hago al iframe n q no tenga scrollings..pero la imagen se qeda fija y no se que etiqeta de html me permite lo que tu llamas 'arrastrar capa'.

Podrias mirarlo tu dreamW si tienes y la etiqueta html que le asigna el dreamW para poder realizar lo q necesito?

saludos
  #4 (permalink)  
Antiguo 25/02/2005, 09:23
 
Fecha de Ingreso: octubre-2003
Ubicación: Lima
Mensajes: 96
Antigüedad: 20 años, 6 meses
Puntos: 0
Y alguien sabe de algun otro programa free o GPL que también lo haga como las líneas de tiempo para no tener que estar pasando por Dreamweaver para esto.
  #5 (permalink)  
Antiguo 25/02/2005, 09:34
Avatar de FuLaNo_  
Fecha de Ingreso: mayo-2003
Ubicación: Don Torcuato, Buenos Aires, Argentina
Mensajes: 1.250
Antigüedad: 20 años, 10 meses
Puntos: 2
Flash???? has algo tipo 360º con flash, es facilisimo, hasta puedes hacer que la imagen se mueva segun el movimiento del cursor...
__________________
I Love Programming...
  #6 (permalink)  
Antiguo 25/02/2005, 23:13
Avatar de vitrorhei
Usuario baneado!
  
Fecha de Ingreso: julio-2004
Ubicación: Anhedonia es mi lugar
Mensajes: 144
Antigüedad: 19 años, 8 meses
Puntos: 0
Aqui un ejemplo de capa movil.

codigo fuente:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Capa Movil - Vitro Rhei</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Autor" content="[email protected]">
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_dragLayer(objName,x,hL,hT,hW,hH,toFront,dropBac k,cU,cD,cL,cR,targL,targT,tol,dropJS,et,dragJS) { //v4.01
//Copyright 1998 Macromedia, Inc. All rights reserved.
var i,j,aLayer,retVal,curDrag=null,curLeft,curTop,IE=d ocument.all,NS4=document.layers;
var NS6=(!IE&&document.getElementById), NS=(NS4||NS6); if (!IE && !NS) return false;
retVal = true; if(IE && event) event.returnValue = true;
if (MM_dragLayer.arguments.length > 1) {
curDrag = MM_findObj(objName); if (!curDrag) return false;
if (!document.allLayers) { document.allLayers = new Array();
with (document) if (NS4) { for (i=0; i<layers.length; i++) allLayers[i]=layers[i];
for (i=0; i<allLayers.length; i++) if (allLayers[i].document && allLayers[i].document.layers)
with (allLayers[i].document) for (j=0; j<layers.length; j++) allLayers[allLayers.length]=layers[j];
} else {
if (NS6) { var spns = getElementsByTagName("span"); var all = getElementsByTagName("div");
for (i=0;i<spns.length;i++) if (spns[i].style&&spns[i].style.position) allLayers[allLayers.length]=spns[i];}
for (i=0;i<all.length;i++) if (all[i].style&&all[i].style.position) allLayers[allLayers.length]=all[i];
} }
curDrag.MM_dragOk=true; curDrag.MM_targL=targL; curDrag.MM_targT=targT;
curDrag.MM_tol=Math.pow(tol,2); curDrag.MM_hLeft=hL; curDrag.MM_hTop=hT;
curDrag.MM_hWidth=hW; curDrag.MM_hHeight=hH; curDrag.MM_toFront=toFront;
curDrag.MM_dropBack=dropBack; curDrag.MM_dropJS=dropJS;
curDrag.MM_everyTime=et; curDrag.MM_dragJS=dragJS;
curDrag.MM_oldZ = (NS4)?curDrag.zIndex:curDrag.style.zIndex;
curLeft= (NS4)?curDrag.left:(NS6)?parseInt(curDrag.style.le ft):curDrag.style.pixelLeft;
if (String(curLeft)=="NaN") curLeft=0; curDrag.MM_startL = curLeft;
curTop = (NS4)?curDrag.top:(NS6)?parseInt(curDrag.style.top ):curDrag.style.pixelTop;
if (String(curTop)=="NaN") curTop=0; curDrag.MM_startT = curTop;
curDrag.MM_bL=(cL<0)?null:curLeft-cL; curDrag.MM_bT=(cU<0)?null:curTop-cU;
curDrag.MM_bR=(cR<0)?null:curLeft+cR; curDrag.MM_bB=(cD<0)?null:curTop+cD;
curDrag.MM_LEFTRIGHT=0; curDrag.MM_UPDOWN=0; curDrag.MM_SNAPPED=false; //use in your JS!
document.onmousedown = MM_dragLayer; document.onmouseup = MM_dragLayer;
if (NS) document.captureEvents(Event.MOUSEDOWN|Event.MOUSE UP);
} else {
var theEvent = ((NS)?objName.type:event.type);
if (theEvent == 'mousedown') {
var mouseX = (NS)?objName.pageX : event.clientX + document.body.scrollLeft;
var mouseY = (NS)?objName.pageY : event.clientY + document.body.scrollTop;
var maxDragZ=null; document.MM_maxZ = 0;
for (i=0; i<document.allLayers.length; i++) { aLayer = document.allLayers[i];
var aLayerZ = (NS4)?aLayer.zIndex:parseInt(aLayer.style.zIndex);
if (aLayerZ > document.MM_maxZ) document.MM_maxZ = aLayerZ;
var isVisible = (((NS4)?aLayer.visibility:aLayer.style.visibility) .indexOf('hid') == -1);
if (aLayer.MM_dragOk != null && isVisible) with (aLayer) {
var parentL=0; var parentT=0;
if (NS6) { parentLayer = aLayer.parentNode;
while (parentLayer != null && parentLayer.style.position) {
parentL += parseInt(parentLayer.offsetLeft); parentT += parseInt(parentLayer.offsetTop);
parentLayer = parentLayer.parentNode;
} } else if (IE) { parentLayer = aLayer.parentElement;
while (parentLayer != null && parentLayer.style.position) {
parentL += parentLayer.offsetLeft; parentT += parentLayer.offsetTop;
parentLayer = parentLayer.parentElement; } }
var tmpX=mouseX-(((NS4)?pageX:((NS6)?parseInt(style.left):style.pi xelLeft)+parentL)+MM_hLeft);
var tmpY=mouseY-(((NS4)?pageY:((NS6)?parseInt(style.top):style.pix elTop) +parentT)+MM_hTop);
if (String(tmpX)=="NaN") tmpX=0; if (String(tmpY)=="NaN") tmpY=0;
var tmpW = MM_hWidth; if (tmpW <= 0) tmpW += ((NS4)?clip.width :offsetWidth);
var tmpH = MM_hHeight; if (tmpH <= 0) tmpH += ((NS4)?clip.height:offsetHeight);
if ((0 <= tmpX && tmpX < tmpW && 0 <= tmpY && tmpY < tmpH) && (maxDragZ == null
|| maxDragZ <= aLayerZ)) { curDrag = aLayer; maxDragZ = aLayerZ; } } }
if (curDrag) {
document.onmousemove = MM_dragLayer; if (NS4) document.captureEvents(Event.MOUSEMOVE);
curLeft = (NS4)?curDrag.left:(NS6)?parseInt(curDrag.style.le ft):curDrag.style.pixelLeft;
curTop = (NS4)?curDrag.top:(NS6)?parseInt(curDrag.style.top ):curDrag.style.pixelTop;
if (String(curLeft)=="NaN") curLeft=0; if (String(curTop)=="NaN") curTop=0;
MM_oldX = mouseX - curLeft; MM_oldY = mouseY - curTop;
document.MM_curDrag = curDrag; curDrag.MM_SNAPPED=false;
if(curDrag.MM_toFront) {
eval('curDrag.'+((NS4)?'':'style.')+'zIndex=docume nt.MM_maxZ+1');
if (!curDrag.MM_dropBack) document.MM_maxZ++; }
retVal = false; if(!NS4&&!NS6) event.returnValue = false;
} } else if (theEvent == 'mousemove') {
if (document.MM_curDrag) with (document.MM_curDrag) {
var mouseX = (NS)?objName.pageX : event.clientX + document.body.scrollLeft;
var mouseY = (NS)?objName.pageY : event.clientY + document.body.scrollTop;
newLeft = mouseX-MM_oldX; newTop = mouseY-MM_oldY;
if (MM_bL!=null) newLeft = Math.max(newLeft,MM_bL);
if (MM_bR!=null) newLeft = Math.min(newLeft,MM_bR);
if (MM_bT!=null) newTop = Math.max(newTop ,MM_bT);
if (MM_bB!=null) newTop = Math.min(newTop ,MM_bB);
MM_LEFTRIGHT = newLeft-MM_startL; MM_UPDOWN = newTop-MM_startT;
if (NS4) {left = newLeft; top = newTop;}
else if (NS6){style.left = newLeft; style.top = newTop;}
else {style.pixelLeft = newLeft; style.pixelTop = newTop;}
if (MM_dragJS) eval(MM_dragJS);
retVal = false; if(!NS) event.returnValue = false;
} } else if (theEvent == 'mouseup') {
document.onmousemove = null;
if (NS) document.releaseEvents(Event.MOUSEMOVE);
if (NS) document.captureEvents(Event.MOUSEDOWN); //for mac NS
if (document.MM_curDrag) with (document.MM_curDrag) {
if (typeof MM_targL =='number' && typeof MM_targT == 'number' &&
(Math.pow(MM_targL-((NS4)?left:(NS6)?parseInt(style.left):style.pixel Left),2)+
Math.pow(MM_targT-((NS4)?top:(NS6)?parseInt(style.top):style.pixelTo p),2))<=MM_tol) {
if (NS4) {left = MM_targL; top = MM_targT;}
else if (NS6) {style.left = MM_targL; style.top = MM_targT;}
else {style.pixelLeft = MM_targL; style.pixelTop = MM_targT;}
MM_SNAPPED = true; MM_LEFTRIGHT = MM_startL-MM_targL; MM_UPDOWN = MM_startT-MM_targT; }
if (MM_everyTime || MM_SNAPPED) eval(MM_dropJS);
if(MM_dropBack) {if (NS4) zIndex = MM_oldZ; else style.zIndex = MM_oldZ;}
retVal = false; if(!NS) event.returnValue = false; }
document.MM_curDrag = null;
}
if (NS) document.routeEvent(objName);
} return retVal;
}
//-->
</script>
</head>

<body>
<div id="Layer1" style="position:absolute; width:200px; height:115px; z-index:1; left: 155px; top: 75px; background-color: #99CC00; layer-background-color: #99CC00; border: 1px none #000000;" onClick="MM_dragLayer('Layer1','',0,0,0,0,true,fal se,-1,-1,-1,-1,false,false,550,'',false,'')">
<div align="center"><font size="5"><strong><em>Mueve con el cursor...</em></strong></font></div>
</div>

</body>
</html>


Espero te sirva...
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


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 01:23.