como hacer que cuando pincha un enlace me teletransporte?

jaimicko · #1 (**permalink**) 16/08/2012, 19:48

hola amigos miren tengo una web y tiene mucho contenido y me ustaria que cuando clickee un enlace o menu me teletransporte mas abajo de la web en html porfavor gracias!!

patilanz · #2 (**permalink**) 17/08/2012, 01:03

Lo puedes hacer mediante un link de esta manera:

Primero donde tienes algo de texto en tu web por ejemplo si es
<h1>Contenido</h1>
Le agregas :

<a name="primero"><h1>Contenido</h1></a>

Despues mas abajo te puedes referir a ella mediante :

<A href="#primero">Volver arriba</A>

Esto lo puedes hacer lo contrario para ir abajo cambiando los sitios y el nombre.

furoya · #3 (**permalink**) 17/08/2012, 07:43

También puedes poner el atributo markMeUpScotty="enterprise", donde "enterprise" es el identificador del elemento que quieres alcanzar. (Ojo!, es propietario.)

Bien, ahora en serio. El método que más me gusta es el que está en el mensaje anterior, pero creo que ya no está muy recomendado. Como es práctico y aún funciona, se usa.

Otros métodos que puedes encontrar tienen JS o CSS. Pero ni se te ocurra meter una "librería" para algo tan elemental.

variantes de focus

http://ksesocss.blogspot.com/2012/03...usar.html#more

jaimicko · #4 (**permalink**) 18/08/2012, 17:12

Cita:

Iniciado por patilanz

Lo puedes hacer mediante un link de esta manera:

Primero donde tienes algo de texto en tu web por ejemplo si es
<h1>Contenido</h1>
Le agregas :

<a name="primero"><h1>Contenido</h1></a>

Despues mas abajo te puedes referir a ella mediante :

<A href="#primero">Volver arriba</A>

Esto lo puedes hacer lo contrario para ir abajo cambiando los sitios y el nombre.

no entendi bien me podrias explicar denuevo porfavor?

Franchesquini · #5 (**permalink**) 23/08/2012, 09:26

Código HTML:

Ver original<head>
<title></title>
<script src="jquery.js"></script>
<script src="jquery.scrollTo.js"></script>
<script src="jquery.nav.min.js"></script>
</head>
 
<body>
<ul id="nav">
  <li class="current"><a href="#section-1">Section 1</a></li>
  <li><a href="#section-2">Section 2</a></li>
  <li"><a href="#section-3">Section 3</a></li>
</ul>
 
<div id="section-1">
  <strong>Section 1</strong>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
  incididunt ut labore et dolore magna aliqua.
skaldjaslkdjklasjdklasjdas
daslkdjaslkdjlkasjdlkajsdas
daskdjaslkdjlkasjdlaskjdlasd
asdlaskdjlkasjdlkasjdlkasda
 
sdlasjdlkasjdlkasjkldjaslkdkjlas
daskldjalskdjlkasjdlkasjkldjasd
asdlkjaslkdjalskdjlkasjdlas
daslkdjalskdjlasjdlaksjdas
dalksjdlaskjdlaskjdlasda
sdlkasjdlkasjdlkasjldas
</p>
</div>
<div id="section-2">
  <strong>Section 2</strong>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
  incididunt ut labore et dolore magna aliqua.
skaldjaslkdjklasjdklasjdas
daslkdjaslkdjlkasjdlkajsdas
daskdjaslkdjlkasjdlaskjdlasd
asdlaskdjlkasjdlkasjdlkasda
 
</p>
 
</div>
<div id="section-3">
  <strong>Section 3</strong>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
  incididunt ut labore et dolore magna aliqua.
skaldjaslkdjklasjdklasjdas
daslkdjaslkdjlkasjdlkajsdas
daskdjaslkdjlkasjdlaskjdlasd
asdlaskdjlkasjdlkasjdlkasda
 
sdlasjdlkasjdlkasjkldjaslkdkjlas
daskldjalskdjlkasjdlkasjkldjasd
asdlkjaslkdjalskdjlkasjdlas
daslkdjalskdjlasjdlaksjdas
dalksjdlaskjdlaskjdlasda
sdlkasjdlkasjdlkasjldasskaldjaslkdjklasjdklasjdas
daslkdjaslkdjlkasjdlkajsdas
daskdjaslkdjlkasjdlaskjdlasd
asdlaskdjlkasjdlkasjdlkasda
 
</p>
</div></body></html>

¿Algo así?

furoya · #6 (**permalink**) 23/09/2012, 13:27

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'.