Foros del Web - Ver Mensaje Individual - rotar horizontalmente texto e imágenes con javascript

alette666 · #1 (**permalink**) 21/01/2012, 13:09

Hola gente tengo una duda (ya que con la hoja de estilo y el parametro FlipH no funca) (podria funcionar en versiones muuuuuuuuuuy viejas)

Tengo el siguiente script rescatado de www.giratutexto.com.ar pero evidentemente no es la posicion que quiero.
Ejemplo:

Código:

Oracion original: "hola, mi nombre es alejandro"

que me aparesca en el texbox la visualizacion de esta manera:

Código:

Vista previa: "ordnajela se erbmon im ,aloh"

evidentemente con las letras apuntando en la otra dirección

PASANDO CODIGO:
se necesitan 3 archivos:
test.html
theSecret.js
validar.js

test.html

Código HTML:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Gira tu Texto - Dale un estilo diferente y original a tus Textos</title>
	<link rel="stylesheet" type="text/css" href="http://www.escribealreves.com.mx/css/style.css">
<script type="text/javascript" src="theSecret.js"></script>
    <script type="text/javascript" src="validar.js"></script>
</head>
<body>
<div id="header"> <a href="http://www.GiraTuTexto.com.ar"><img 
src="index_files/logo.png" alt="Gira tu Texto" border="0" 
width="174" height="140"></a> 
  <h1>Gira tu Texto!</h1>
</div>	
<div id="page-wrap"> 
  <div id="main-content"> 
    <h2>Gira texto y dale un estilo diferente </h2>
    <hr>
    <p>¿Qué es GiraTuTexto.com.ar?</p>
    <p><strong>Gira 
      tu texto</strong> es un <strong>generador online</strong> que 
      te permite darle una rotación a los aburridos textos para que sorprendas 
      a tus amigos </p>
    <p>Te cambia la fuente del texto, rotando cada letra en 180 grados (no sólo 
      te lo invierte si no que lo puedes poner hacia atrás). Entonces podés <strong>copiar 
      y pegar el texto girado</strong> y ponerlo como tu nickname o en tus actualizaciones 
      de estado del Facebook. <br>
      <i>Definitivamente llamaras la atencion!</i><br>
      <br>
            <!-- si vas a piratear aqui esta la parte interesante -->
    </p>
    <div id="box"> 
      <form name="f" action="">
        <p>Escriba su mensaje de texto original:<br>
          <textarea style="background-color: rgb(216, 223, 234);" 
onkeyup="flip()" cols="57" rows="5" name="original"></textarea>
          <br>
          <input checked="checked" name="backwards" value="yes" 
onclick="flip()" type="checkbox">
          (Marque esta casilla para reflejar el texto girado.)</p>
        <p>Copy-paste el texto al revés:<br>
          <textarea style="background-color: rgb(216, 223, 234);" 
cols="57" rows="5" name="flipped"></textarea>
        </p>
      </form>
      <img src="index_files/box-foot.png" alt="" class="foo" 
width="561" height="13"></div>
    <!-- no te olvides de las partes importantes de arriba -->
    <br>
    <h3>¿Dónde puedes utilizar el texto de Gira tu Texto?</h3>
    <hr>
    <ul>
      <li>Usalo en tus actualizaciones de estatus o en tus post's del Facebook, 
        como aqui:</li>
    </ul>
    <img src="index_files/comentario.gif" alt="wall post del 
Facebook al revés" width="540" height="91">
    <ul>
      <li>Usa una palabra al revés <strong>como password ultra seguro!</strong>.</li>
      <li>Usa los textos en tu <strong>Nickname del Windows Live Messenger </strong>(MSN 
        Messenger)</li>
      <li>Postea texto boca abajo en <strong>Facebook, Twitter, blogs, foros, 
        MySpace, Netlog, Bebo, Hi5, <br>
        Yahoo! Messenger, Flickr, AIM, eBuddy, Meebo, Windows Live Messenger, 
        Google Talk</strong>, etc.</li>
    </ul>
  </div>

</div>
</body></html>

theSecret.js

Código:

// JavaScript Document
function flip() {
   var result = flipString(document.f.original.value.toLowerCase());
  if (document.f.backwards.checked)
	  {
	  result = result.split("").reverse().join("");
	  }
   document.f.flipped.value = result;
  }
  
  function flipString(aString) {
   var last = aString.length - 1;
   //Thanks to Brook Monroe for the
   //suggestion to use Array.join
   var result = new Array(aString.length)
   for (var i = 0; i <= last; i++) {
var c = aString.charAt(i)
var r = flipTable[c]
result[last +i] = r != undefined ? r : c
}
   return result.join('')
  }
  
  var flipTable = {
  a : '\u0250',
  b : 'q',
  c : '\u0254',
  d : 'p',
  e : '\u01DD',
  f : '\u025F',
  g : '\u0183',
  h : '\u0265',
  i : '\u0131',
  j : '\u027E',
  k : '\u029E',
  l : '|',
  m : '\u026F',
  n : 'u',
  //ñ : '',
  r : '\u0279',
  t : '\u0287',
  v : '\u028C',
  w : '\u028D',
  y : '\u028E',
  '.' : '\u02D9',
  '[' : ']',
  '(' : ')',
  '{' : '}',
  '?' : '\u00BF',
  '!' : '\u00A1',
  "\'" : ',',
  '<' : '>',
  '_' : '\u203E',
  ';' : '\u061B',
  '\u203F' : '\u2040',
  '\u2045' : '\u2046',
  '\u2234' : '\u2235',
  '\r' : '\n'
  }
  
  for (i in flipTable) {
	flipTable[flipTable[i]] = i
}

validar.js

Código:

// JavaScript Document
function esCampoVacio(campo){
	if(campo.value=='') return false;
	else return true;	
}

function comprobarMail(m){
	arroba = m.indexOf('@');
	
	if(arroba==-1) return false;
	else if(m.indexOf('.', arroba)==-1) return false;
	else return true;	
}

function limpiar(txt){
	txt= txt.split('.').join('');
	txt= txt.split(' ').join('');
	txt= txt.split('-').join('');
	txt= txt.split('/').join('');
	txt= txt.split(',').join('');
	txt= txt.split('\n').join('');
	txt= txt.split('\r').join('');
	txt= txt.split('\t').join('');
	txt= txt.split('\\').join('');
	txt= txt.split('$').join('');
	return txt;
}

function gestionarError(campo, mensaje){
	alert(mensaje);
	campo.focus();
	campo.select();
}

Alguien me tiraria un cable????