Ver Mensaje Individual
  #6 (permalink)  
Antiguo 23/09/2012, 13:27
furoya
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 21 años, 6 meses
Puntos: 317
Respuesta: como hacer que cuando pincha un enlace me teletransporte?

Cita:
Iniciado por jaimicko (para patilanz)
no entendi bien me podrias explicar denuevo porfavor?
El código está ahí. No creo que tengas que pedir ninguna explicación más. A lo sumo harás una búsqueda en gugl para ver otros ejemplos funcionando o para leer la documentación.
Lo único objetable de ése es que hay un elemento de bloque (como <h1> dentro de un elemento en línea (como <a>). Eso no debería ocurrir. Es algo que también fue explicado muchas veces.



Cita:
Iniciado por Franchesquini
¿Algo así?
No lo creo.
Como dije más arriba, que alguien piense en una "librería" (o en tu caso ... ¡¿tres?! ) para algo tan elemental que ya está resuelto de maneras mucho más simples, es demasiado ridículo.

Hablando en serio ¿notaste que tu ejemplo es lo mismo que puso patilanz, y que por lo tanto, está de más? Porque no se te habrá ocurrido responder al "pedido de explicaciones", ¿no?.
Lo único que agregas es que se puede poner la referencia como identificador (y no sólo como name="") fuera del tag <a>, pero insisto, es justo lo que hubiese aprendido jaimicko al usar el buscador.



Bah, total que ya no importa. Al final, volví por otra cosa.
Resulta que estuve un tiempo lejos del Foro por cuestiones de fuerza mayor, y varias veces me seguí acordando de la "teletransportación".
Hasta que una tarde -y viendo que ya le habían dado unas vueltas más al asunto- me senté a la máquina para ahuyentar esos fantasmas (cual Barclay después de transportarse a la Yosemite *), y me puse a investigar si había otra manera de interpretar un título tan original.

Hasta que terminé con esto

Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title>TRANSPORTADOR.</title>
<script type="text/javascript">
var transportable; 
var coordenadaX = 110;
var coordenadaY = 110;
var gradoMaterializacion = -0.008;
var finMaterializacion = 1;
var limiteMaterializacion = -1;
var matDesmat = 1;
var quantumBufferX = [25,-2, 25,0, 25,2, 25,2, 25,2, 25,0, 25,-2, 25,-2];
var quantumBufferY = [25,-2, 25,-2, 25,-2, 25,0, 25,2, 25,2, 25,2, 25,0];

function scan() {
 transportable = document.getElementById("EErickson");

 for (i=0; i<3; i++){
  document.getElementById("EErickson").innerHTML += document.getElementById("EErickson").innerHTML;
 }
}

function energiza() {
 if (quantumBufferX[0] != limiteMaterializacion){
  for (i=0; i<8; i++){
   var j = i*2;
   quantumBufferX[j] += (quantumBufferX[j + 1]) * matDesmat;
   quantumBufferY[j] += (quantumBufferY[j + 1]) * matDesmat;
   finMaterializacion += gradoMaterializacion;

   transportable.getElementsByTagName("img")[i].style.left = quantumBufferX[j] + "px";
   transportable.getElementsByTagName("img")[i].style.top = quantumBufferY[j] + "px";
   transportable.getElementsByTagName("img")[i].style.opacity = finMaterializacion;
   if (document.body.filters) transportable.getElementsByTagName( "img" )[i].filters.item( 
    "DXImageTransform.Microsoft.Alpha" ).Opacity = finMaterializacion * 100;
  }

 setTimeout(energiza, 50);
 }

 else {
  document.body.style.cursor = "pointer";
  transportable.style.top = (coordenadaY - 110) + "px";
  transportable.style.left = (coordenadaX - 110) + "px";
  gradoMaterializacion = 0.008;
  limiteMaterializacion = (limiteMaterializacion == -1)? 25 : -1;
  matDesmat = -1;
  if (quantumBufferX[0] != 25) setTimeout(energiza, 50);
 }
}


function destino(e){
 coordenadaX = (e.x)? e.x : e.pageX; 
 coordenadaY = (e.y)? e.y : e.pageY;
 finMaterializacion = 0.8;
 matDesmat = 1;
 gradoMaterializacion = -0.008;

 energiza();
}

onload = function() {
 scan();
 if (document.addEventListener) {
  document.addEventListener('click', function(event){ destino(event); }, false);
 }
 else {
  document.attachEvent('onclick', function(event){ destino(event); });
 }
}
</script>
<style type="text/css">
html, body {background-color: black; height: 100%; width: 100%; margin: 0; 
overflow: hidden; cursor: pointer; }
#EErickson {width: 225px; height: 225px; position:relative; }
#EErickson img {position: absolute; top: 25px; left: 25px; cursor: not-allowed; 
width: 150px; height: 150px; }
</style>
<!--[if lt IE 7.0000]> 
<style type="text/css">
html, body {background-color: white; }
</style>
<![endif]-->
</head>
<body title="Click en página para teletransportar.">

<div id=EErickson title="Aquí no, que ya estoy!.">
<img src="http://static.forosdelweb.com/fdwtheme/fdw-foco-1.png" alt=""
style="filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);">
</div>

</body>
</html>
No lo iba a publicar porque es muy borrador, debí usar dos funciones en vez de una cambiando mil valores; pero como ya le tenía reemplazados los nombres genéricos y le puse variables y funciones descriptivas...

Lo que no tiene es un solo comentario.


Efecto borroso o nublado o desenfocado, sin filter blur.

Efecto explosion desde atras.




* TNG 'Realm of Fear'.