Voy a tratar de explicar en este mensaje que es lo que hace el codigo para despues publicarlo.
El codigo publica un cuadro con caretos donde ahora se encuentran los caretos de mi@. Al lado del mismo publica un par de botones que al clickear muestra otros caretos en ese lugar. Asi puedes agrupar tus caretos y mostrar los que quieras. Al clickear sobre uno de los caretos inserta el codigo correspondiente que linkea con la imagen. Si se pasa por arriba de un careto muestra la ayuda en su recuadro correspondiente.
Luego copia el codigo que voy a presentar a continuacion en el foro donde lo quieras. Ubicalo en la posicion que quieras segun tu foro y luego de que estas seguro que entiendes el codigo, hazle los cambios que necesites.
Este codigo tiene algunas fallas. Si la persona tiene mensajes sin ver de mi@, o hace vista previa o la publicidad de miarroba tiene un enter de mas (ARREGLENLO PORFIS!!!), el mismo queda descentrado pero igual de util.
Tengan cuidado con la cantidad de caretos que le ponen porque cargan al cargar la pagina... o sea, no la hagan muy pesada!
Creo que eso es todo. Espero que lo sepan aprovechar...
<!--
Personalizacion de Caretos Version 2.0
Script by -BigHead-
-->
<script>
//Este parte del script conviene que este puesta en un archivo js a aprte y vincularlo desde aca
//Defino variable. Carpeta es donde se ubican los caretos que quiero agregar
//Inicio es el codigo a agregar antes de cualquier imagen, fin el final
var carpeta = "http://www.gorrapuestas.com.ar/caretos/"
var inicio = "[img]"+carpeta
var fin ="[/img]"
//Con esta parte me fijo si es una pagina de post (o sea de respuesta de mensajes o de nuevos temas)
//si lo es creo los arreglos con los nombres de mis caretos, si no creo arreglos vacios asi no da error
var ubicacion = document.location.toString()
var post = "http://miarroba.com/foros/post.php"
if (ubicacion.substring(0, post.length) == post)
{
//Cada arreglo incluye el nombre del archivo y una descripcion del mismo
var gorras = new Array (
new Array("gp_wink.gif", "Guiño"),
new Array("gp_triste.gif", "Triste"),
new Array("gp_sorpresa.gif", "Sorprendido"),
new Array("gp_sonrisa.gif", "Sonriendo"),
new Array("gp_risa.gif", "Riendo"),
new Array("gp_molesto.gif", "Molesto"),
new Array("gp_llanto.gif", "Llorando"),
new Array("gp_lengua.gif", "Lengua Afuera"),
new Array("gp_insulto.gif", "Insultando"),
new Array("gp_feliz.gif", "Feliz"),
new Array("gp_enojo.gif", "Enojado"),
new Array("gp_eem.gif", "Disimulando"),
new Array("gp_asleep.gif", "Durmiendo"),
new Array("gp_amor.gif", "Enamorado"),
new Array("gp_confuso.gif", "Confundido"),
new Array("gp_alpedo.gif", "Loco")
)
//Aca defino otro arreglo, se pueden definir cuantos se quieran, este ejemplo es para dos
var locos = new Array (
new Array("loco_culo.gif", "Culo al Aire"),
new Array("loco_fuckyou.gif", "Fuck You"),
new Array("loco_futbol.gif", "Futbol"),
new Array("loco_paja.gif", "Manuela"),
new Array("loco_pete.gif", "Pete"),
new Array("loco_risa.gif", "Mucha Risa"),
new Array("loco_seguido.gif", "Persecucion"),
new Array("loco_tomado.gif", "Borracho"),
new Array("loco_heavy.gif", "Re Heavy, re jodido"),
new Array("loco_aplauso.gif", "Aplausos")
)
}
else
{
var gorras= ""
var locos= ""
}
//esta funcion sera la encargada de cambiar el texto ayuda
//fijarse que por cada arreglo imprimo algo diferente.
function TextoAyuda (text, nro)
{
if (text=="Gorrapuesta")
var inicioayuda = "Insertar Careto<br>" + text +" ---> "+ gorras[nro][1]
else
var inicioayuda = "Insertar Careto<br>" + text +" ---> "+ locos[nro][1]
Editor_CambiaTextoAyuda(inicioayuda,'post','texto')
}
</script>
<!--
Esta parte es la mas importante. Creamos dos DIV que ubicamos donde queremos (para eso dirbve el DIV!!!),
No es necesario cambiar la posicion de tu codigo. SE UBICA SOLO
El primer DIV es el 'mascaretos', este encierra tantas tablas como arreglos de caretos tengamos y va a ser
el encargado de mostrar el rectangulo con cada Arreglo de caretos.
Para eso se crea una tabla para cada una con un nombre que debe empezar con "post-texto-" y seguido con un nombre distintivo
A esta tabla modifiquenle los colores a su gusto.
-->
<div id='mascaretos' style='position:absolute; right:60; top:300;'>
<table id="post-texto-gorras" name="post-texto-gorras" align="left" valign="middle" style="border:1px solid #6898c8; display: none" width="57" height="290" cellpadding="0" cellspacing="0">
<script>
//en este script rellenamos la tabla usando uno de los arreglos. Para el tipo de caretos que tenia se eligio agrupar dos por linea
for (var nro=0; nro<gorras.length-1; nro+=2)
{
document.write("<tr class=tabla_texto_1><td align=center valign=middle><a href=javascript:Editor_AnadeTexto('"+inicio+gorras[nro][0]+fin+"','post','texto')><img border=0 src="+carpeta+gorras[nro][0]+" onmouseover=TextoAyuda('Gorrapuesta',"+nro+") onmouseout=Editor_CambiaTextoAyuda('','post','texto')></a></td>")
document.write("<td align=center valign=middle><a href=javascript:Editor_AnadeTexto('"+inicio+gorras[nro+1][0]+fin+"','post','texto')><img border=0 src="+carpeta+gorras[nro+1][0]+" onmouseover=TextoAyuda('Gorrapuesta',"+eval(nro+1)+") onmouseout=Editor_CambiaTextoAyuda('','post','texto')></a></td></tr>")
}
</script>
</table>
<!--
Aca creo la segunda tabla (se vera una por vez). Esta tabla sigue la misma convencion pero como los caretos que tiene
son mas grandes uso uno solo por linea.
-->
<table id="post-texto-locos" name="post-texto-locos" align="left" valign="middle" style="border:1px solid #6898c8; display: none" width="57" height="290" cellpadding="0" cellspacing="0"><tr class="tabla_texto_1"><td align="center" valign="middle">
<script>
for (var nro=0; nro<locos.length; nro++)
document.write("<tr class=tabla_texto_1><td align=center valign=middle><a href=javascript:Editor_AnadeTexto('"+inicio+locos[nro][0]+fin+"','post','texto')><img border=0 src="+carpeta+locos[nro][0]+" onmouseover=TextoAyuda('Animado',"+nro+") onmouseout=Editor_CambiaTextoAyuda('','post','texto')></a></td></tr>")
</script>
</table>
</div>
<!--
Aca comienza la segunda etiqueta DIV. Esta etiqueta se encarga de mostrar unos botones que activan las diferentes
tablas de caretos. Un boton para cada arreglo y uno mas para los de mi@ (opcional). Fijarse que al llamar a la funcion
solo lo hacemos con la parte final del nombre de la tabla (omitimos el "post-texto-"). Puedes modificar el arreglo que se
le manda a la funcion ayuda y las imagenes que se muestran.
-->
<div id='mascaretos2' style='position:absolute; right:30; top:315;'>
<table width=24 border="0" cellpadding="0" cellspacing="0"><tr>
<td valign=top align=right>
<a href="javascript:Editor_MostrarHerramienta('gorras','post','texto')"><img src='http://www.gorrapuestas.com.ar/caretos/gp.gif' border='0' onmouseover="Editor_CambiaTextoAyuda('Inserta careto en el texto.<br>Pulsar para ver los emoticons Gorrapuestas.','post','texto')" onmouseout="Editor_CambiaTextoAyuda('','post','texto')" style="margin-top:4px;margin-bottom:1px;" width="23" height="22"></a>
<a href="javascript:Editor_MostrarHerramienta('gamaemoticons','post','texto')"><img src='http://pics.miarroba.com/botones/caretos.gif' border='0' onmouseover="Editor_CambiaTextoAyuda('Inserta careto en el texto.<br>Pulsar para ver los emoticons normales.','post','texto')" onmouseout="Editor_CambiaTextoAyuda('','post','texto')" style="margin-top:4px;margin-bottom:1px;" width="23" height="22"></a>
<a href="javascript:Editor_MostrarHerramienta('locos','post','texto')"><img src='http://www.gorrapuestas.com.ar/caretos/loco.gif' border='0' onmouseover="Editor_CambiaTextoAyuda('Inserta careto en el texto.<br>Pulsar para ver los emoticons animados.','post','texto')" onmouseout="Editor_CambiaTextoAyuda('','post','texto')" style="margin-top:4px;margin-bottom:1px;" width="23" height="22"></a>
</td></tr></table></div>
<!--
En esta parte escondemos los DIV en caso de que no sea una pagina para escribir
y en caso de que lo sea mostramos la tabla de caretos que deseamos. Si omiten
la clausula else, mostraran los de mi@,
Tambien se ubican en la posicion correcta las tablas
-->
</td></tr></table>
<script>
function findPosX(obj)
{
var curleft = 0;
if (obj.offsetParent)
{
while (obj.offsetParent)
{
curleft += obj.offsetLeft
obj = obj.offsetParent;
}
}
else if (obj.x)
curleft += obj.x;
return curleft;
}
function findPosY(obj)
{
var curleft = 0;
if (obj.offsetParent)
{
while (obj.offsetParent)
{
curleft += obj.offsetTop
obj = obj.offsetParent;
}
}
else if (obj.y)
curleft += obj.y;
return curleft;
}
if (ubicacion.substring(0, post.length) != post)
{
document.getElementById('mascaretos').style.display="none"
document.getElementById('mascaretos2').style.display="none"
}
else
{
Editor_MostrarHerramienta('gorras','post','texto')
var Ypos=findPosY(document.getElementById('post-texto-gamacolores'))
var Xpos=findPosX(document.getElementById('post-texto-gamacolores'))
document.getElementById('mascaretos').style.top=Ypos
document.getElementById('mascaretos2').style.top=Ypos
document.getElementById('mascaretos').style.left=Xpos
document.getElementById('mascaretos2').style.left=Xpos+document.getElementById('post-texto-'+post_texto).offsetWidth+20 //poner un numero coherente para correrlo horizontalmente
}
</script>
<table><tr><td>
Editado por -BigHead-, Lunes, 24 de Noviembre de 2003, 01:38
Me olvidaba, dato importante, tiene que estar en el pie del foro... parece que sino tira el error que nombra Dash (aunque funciona).
El archivo js es opcional. es incluitr todo lo que dije dentro de un archivo (obviando las etiquetas <script> y </script> y linkeando desde el codigo poniendo
<script SRC="direccion del archivo .js"></script>
Acabo de ponerlo en mi zona de pruebas y funciona perfectamente, y copiado tal cual esta, simplemente modificando el top para que se ajustara al foro, aun falta ajustarlo al milimetro, pero funciona perfectamente
Hay que modificar lo que digo en el codigo... pero esperen dos minutos, estoy en una version que no hay que modificar mas nada.... unos minutos y la publico....
Cambie el codigo superior. Ahora no es necesario ubicarlo mas a mano, se ubica automaticamente, no tiene problemas con paginas de vista previa o errores. Que alguien lo testee por favor y luego le avisamos a VonMuerte o Pedro que cambien el de trucos y foros...
Para los que ya lo habia personalizado les digo que lo que lo unico que cambie fue la ultima funcion que estaba entre etiquetas <script>:
<script>
if (ubicacion.substring(0, post.length) != post)
{
document.getElementById('mascaretos').style.display="none"
document.getElementById('mascaretos2').style.display="none"
}
else
{
Editor_MostrarHerramienta('gorras','post','texto')
}
</script>
Por la siguiente:
</td></tr></table>
<script>
function findPosX(obj)
{
var curleft = 0;
if (obj.offsetParent)
{
while (obj.offsetParent)
{
curleft += obj.offsetLeft
obj = obj.offsetParent;
}
}
else if (obj.x)
curleft += obj.x;
return curleft;
}
function findPosY(obj)
{
var curleft = 0;
if (obj.offsetParent)
{
while (obj.offsetParent)
{
curleft += obj.offsetTop
obj = obj.offsetParent;
}
}
else if (obj.y)
curleft += obj.y;
return curleft;
}
if (ubicacion.substring(0, post.length) != post)
{
document.getElementById('mascaretos').style.display="none"
document.getElementById('mascaretos2').style.display="none"
}
else
{
Editor_MostrarHerramienta('gorras','post','texto')
var Ypos=findPosY(document.getElementById('post-texto-gamacolores'))
var Xpos=findPosX(document.getElementById('post-texto-gamacolores'))
document.getElementById('mascaretos').style.top=Ypos
document.getElementById('mascaretos2').style.top=Ypos
document.getElementById('mascaretos').style.left=Xpos
document.getElementById('mascaretos2').style.left=Xpos+document.getElementById('post-texto-'+post_texto).offsetWidth+10
}
</script>
<table><tr><td>
Editado por -BigHead-, Lunes, 24 de Noviembre de 2003, 01:43
Escrito originalmente por -BigHead-TITO ya me mando un privado diciendome que en opera no funciona, pero ya se donde esta el error y hoy a la noche lo arreglare, supongo...
y gaf, muerte rapida por favor..
como voy a matar, a uno de los pocos argentinos que me cae bien
Escrito originalmente por ELITE_runaraeste va a la perfeccion en el IE BigHead.muxas gracias, ers un CRACK!!
este soy yo perdon k estaba conectado con el nick de un amigo pa ponerselo en el foro,jeje, BigHead e puesto un enlaze a tu foro en mi foro pa k lo visiten, esa es mi reconpensa,jeje
Miarroba Networks, S.L. Apartado de correos, 50, 39610 Astillero (CANTABRIA) - CIF B-39512736 Inscrita en el Registro Mercantil de Cantabria, tomo 743, folio 161, libro 0, hoja S-12428, Instripción 1ª