Códigos avanzados en HTML/JS/CSS para tu página de IMVU

Hola a todos los usuarios del IMVU.

El presente tema quiere ir un poco más allá en la modificación de nuestras páginas personales.
Ellas, al igual que nuestro avatar, nos representan y debemos controlar cada aspecto de ellas sin demasiados problemas: Para que sea justo todos deberían saber lo que se puede hacer con ellas en extremo.

También la privacidad de los datos es necesaria, aunque los del IMVU se empeñen en hacer constar nuestros movimientos y datos personales.

Así comenzamos, sin más dilación, con una modificación con muchas posibilidades:


----------------------------------------------------------

Modificación de la información del panel: "About me":

Código:


<script>

// VUESTRO NOMBRE DE AVATAR

var ie4 = (document.all)? true:false;

if (ie4) {

y=document.getElementById('aboutme_panel_body').firstChild.firstChild.firstChild;
y.childNodes.item(2).firstChild.nodeValue = 'Tisha';
y.childNodes.item(4).firstChild.nodeValue = 'Avatar since: 05/01/1905';
y.childNodes.item(7).nodeValue = 'Gender: Female';
y.childNodes.item(9).nodeValue = 'Age: 99';
y.childNodes.item(11).nodeValue = 'Location';
y.childNodes.item(13).nodeValue = 'Last Log on: never!!!';

}
else
{

y=document.getElementById('aboutme_panel_body').childNodes.item(1).firstChild.childNodes.item(1);
y.childNodes.item(5).firstChild.nodeValue = 'Tisha';
y.childNodes.item(8).firstChild.nodeValue = 'Avatar since: 05/01/1905';
y.childNodes.item(12).nodeValue = 'Gender: Female';
y.childNodes.item(14).nodeValue = 'Age: 99';
y.childNodes.item(16).nodeValue = 'Location;
y.childNodes.item(18).nodeValue = 'Last Log on: never!!!';

}
</script>


- Este código modifica la información personal no modificable"
* funciona tanto en el IE como en FF (Cross-Browser) *

Consejos: Sustituid el texto de ejemplo insertado. Repetidlo donde sea necesario.
Explicación: Este script en JS ataca el nodo de la estructura DOM donde se ubica la cadena de carácteres y lo modifica. Como podréis observar, tiene diferente código para IE y FF, (no funcionan igual?), pues NO. El IE ignora ciertos nodos por la cara, así que tienen otra estructura para el navegador.

----------------------------------------------------------


Anulación de la información del panel: "About me":

Código:

<script>

// VUESTRO NOMBRE DE AVATAR

var ie4 = (document.all)? true:false;

if (ie4) {
z=document.getElementById('aboutme_panel_body').firstChild.firstChild.firstChild;
z.removeChild(z.childNodes.item(13))
}
else
{
y=document.getElementById('aboutme_panel_body').childNodes.item(1).firstChild.childNodes.item(1);
y.removeChild(y.childNodes.item(18));
}
</script>


- Este código retira el "Last log on: ......."
* funciona tanto en el IE como en FF (Cross-Browser) *

Consejos: Para retirar otra información, basta con reducir la cifra en el 13 y el 18 hasta llegar al dato importante (p.e. la edad).
Explicación: Este script en JS ataca el nodo de la estructura DOM donde se ubica la cadena de carácteres y lo elimina. Como podréis observar, tiene diferente código para IE y FF, (no funcionan igual?), pues NO. El IE ignora ciertos nodos por la cara, así que tienen otra estructura para el navegador.

Por petición popular... (no por vosotros, que no participais!)

Código:


<script>

// VUESTRO NOMBRE DE AVATAR

var ie4 = (document.all)? true:false;

if (ie4) {      z=document.getElementById('aboutme_panel_body').firstChild.firstChild.firstChild;
z.removeChild(z.childNodes.item(9))
}
else
{
y=document.getElementById('aboutme_panel_body').childNodes.item(1).firstChild.childNodes.item(1);
y.removeChild(y.childNodes.item(14));
}
</script>


- Este código retira vuestra edad..."
* Ésto deberíais de haberlo sacado vosotros ya... *

Consejos: No engañéis con ésto... Sed limpios/as y mantened la dignidad, ok?


UN ÚLTIMO CONSEJO:
Algunos usuarios me han comentado acerca de que se hacen un lío eliminando información... y mi consejo es: hacedlo en orden inverso, desde el más profundo (de número más alto) al menos profundo (número más bajo). Así no tenéis que recalcular la posición de cada nodo en cada momento.
Pista: Si retiráis el primer nodo... ¡¡el segundo es ahora el primero!! y el resto tiene un índice inferior en 1 unidad.

Ejemplo:

Código:


<script>

var ie4 = (document.all)? true:false;

if (ie4) {      z=document.getElementById('aboutme_panel_body').firstChild.firstChild.firstChild;
z.removeChild(z.childNodes.item(13));
z.removeChild(z.childNodes.item(12));
z.removeChild(z.childNodes.item(11));
z.removeChild(z.childNodes.item(10));
z.removeChild(z.childNodes.item(9));
z.removeChild(z.childNodes.item(8));
z.removeChild(z.childNodes.item(7))
}
else
{
y=document.getElementById('aboutme_panel_body').childNodes.item(1).firstChild.childNodes.item(1);
y.removeChild(y.childNodes.item(18));
y.removeChild(y.childNodes.item(17));
y.removeChild(y.childNodes.item(16));
y.removeChild(y.childNodes.item(15));
y.removeChild(y.childNodes.item(14));
y.removeChild(y.childNodes.item(13));
y.removeChild(y.childNodes.item(12));
}
</script>


* ¡Los "retornos de carro", "returns", "enters", etc... también son nodos! *
----------------------------------------------------------

Restringir tamaño de avatares sobredimensionados y tablas:

Código:


<style type="text/css">#friends_panel_body .avPic { width: 80px !important; height: 120px !important; overflow: hidden !important;  }</style>


- Este código restringe el tamaño de los avatares en el panel "My Buddies"
*Esos incómodos avatares gigantes que nos deforman la página*

Consejos: Cambiad el valor de width y height para darle el tamaño que queráis.
Explicación: Daos cuenta de que defino las propiedades de un estilo CSS tras haber sido definido en el servidor... (nosotros tenemos la última palabra!)

Código:


<style type="text/css">#messages_panel_body .msgAvImg { width: 80px !important; height: 120px !important; overflow: hidden !important;  }</style>


- Este código restringe el tamaño de los avatares en el panel "My Messages"
*Esos incómodos avatares gigantes que nos deforman la página*

Código:


<style type="text/css"> #wishlist_panel_body { overflow: hidden !important; width: 300px !important; } </style>


- Este código restringe el tamaño del panel "My Wishlist"

----------------------------------------------------------

Añadir Stickers caseros (sin pagar a IMVU).

Código:


<style type="text/css">

#alanypato1 {
position:absolute;
width:158px;
height:115px;
z-index:1;
left: 390px;
top: 37px;
}

</style>

<div id="alanypato1"><img src="http://i147.photobucket.com/albums/r295/AlanYeref/01.png" border="0" alt="Photobucket - Video and Image Hosting"></div>


- Este código añade un Sticker (pegatina?) casero
*Esos Stickers no son caros... pero ésto seguro que es más barato.*

Consejos: Sustituid texto del alt (alternative)
Explicación: Se define un DIV flotante conteniendo una imagen con una referencia externa al IMVU
Ahora una vuelta de tuerca más...

Código:


<style>
#imagen {
 position: absolute;
 top: 60px;
 left: 310px;
 width: 300px;
 height: 244px;
 z-index: 25000;
 background-image: url("http://www.urlimagen.com/imagen.png") !important;
 background-image: none; filter: none !important;
 filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.urlimagen.com/imagen.png'); }
</style>

<script>
 <div id="imagen"></div>
</script>


- Este código añade un Sticker (pegatina?) casero con transparencias (PNG)
*Debido a fallos (para variar) del IE6 o inferiores, los png de 32 bits no se representan bien.*

Consejos: Usad sólo con .png's de 32 bits (con canal alfa). (éstos son los buenos... sin dientes de sierra en los bordes)
Explicación: Se fuerza a usar el filtro CSS exclusivo de IE para imágenes con canal alfa.

Editar Texto de título del panel "About me" e interior

Código:


<script>
var ie4 = (document.all)? true:false;

if (ie4) {
document.getElementById("aboutme_panel_header").firstChild.firstChild.firstChild.firstChild.firstChild.data = 'About Me -' +' The Waves, The Sea Breeze, The Moon,.. My Beloved Moon... ';

y=document.getElementById('aboutme_panel_body').firstChild.firstChild.firstChild.childNodes.item(4);
y.firstChild.nodeValue = 'Avatar since: 05/01/1635';
}
else
{
document.getElementById("aboutme_panel_header").childNodes.item(1).firstChild.childNodes.item(1).firstChild.firstChild.data = 'About Me -' +' The Waves, The Sea Breeze, The Moon,.. My Beloved Moon... ';

y=document.getElementById('aboutme_panel_body').childNodes.item(1).firstChild.childNodes.item(1).childNodes.item(8);
y.firstChild.nodeValue = 'Avatar since: 05/01/1635';
}
</script>


Consejos: Investigad para cambiar textos en el resto de paneles.
Explicación: Se edita el nodo DOM tras localizarlo por ingeniería inversa. Existen dos estructuras diferentes para adaptarse a los browsers... (Cross-Browser)

Cambiar el texto y la imagen animada que sale mientras carga una página

Código:


<script language="javascript" type="text/javascript">
document.getElementById("LoadingPage").innerHTML = '<CENTER><FONT>MI PRIMERA LINEA DE TEXTO<BR>MI SEGUNDA LINEA DE TEXTO</FONT><br><img alt="processing" src="/catalog/web_images/processing2.gif"></CENTER>';
</script>


Consejos: Solamente cambien las entradas MI PRIMERA LINEA DE TEXTO y MI SEGUNDA LINEA DE TEXTO por el texto de su preferencia, y listo, tienen ya su propio mensajes para mientras cargue la página.

Para cambiar la imagen animada de que está cargando (los circulos esos) deberán cambiar la entrada dice /catalog/web_images/processing2.gif por la dirección completa de la imagen de su preferencia. Eso si sugiero pongan imágenes ahi que no sean pesadas, ya que ese panel sale en lo que va cargando la página y se ve solamente por unos segundos... y si es muy pesada la imagen, no se verá.

Explicación: Se edita el contenido HTML del nodo DOM del objeto "LoadingPage" (al menos desde que carga nuestro código, así que poned el código lo más alto posible en la carga!!!)

Cambiar el nombre principal del avatar

Código:


<script>
document.getElementById("avatar_name").innerHTML = "Nuevonombre";
</script>


Este código cambia el código HTML del nombre del avatar...
pero veo más elegante ésto...

Código:


<script>
document.getElementById("avatar_name").firstChild.data = "Nuevonombre";
</script>


El cual sólo cambia el texto... así no hay que declarar el formato del DIV...

Consejos:Ummm no os aconsejo retirar vuestro nombre de avatar totalmente de la página... es útil para luego localizaros y comenzar un chat3d... que para eso estamos.
Explicación: Se edita el contenido HTML del nodo DOM del objeto "avatar_name"