Página 4 de 4

Re: [Para actualizar] Nuevos códigos html

PublicadoCOLON 29 Jul 2009 03:20
por Ivan
Así es.
Me he decidido a actualizarlo varias veces para que el admin
haga de él un banner debajo del foro.

Además para ayudar a los usuarios - lo fundamental -.

Re: [Para actualizar] Nuevos códigos html

PublicadoCOLON 29 Jul 2009 23:41
por Pablo
A ver si completa sun poco más el post y lo ponemos abajo :) Iván!
Felicidades y gracias por crear este post de ayuda!

Re: [Para actualizar] Nuevos códigos html

PublicadoCOLON 01 Ago 2009 03:58
por Ivan
Imagen que cambia al pasar el ratón (V3 - FINAL)
Valoración: 9.0
Descripción: Este es el final. Al pasar el mouse por arriba de la imagen, NO NECESITA RECARGARSE EL EXPLORADOR, cambia de imagen.

<script language="JavaScript" type="text/javascript">

var MenuImgs = new Array(7);
var MImgs = new Array(7);

MImgs[0] = new Image(184, 32);
MenuImgs[0] = new Image(184, 32);
MenuImgs[0].src = "http://wwwstatic.megaupload.com/gui2/menu/es/menuo_01.gif";
MImgs[1] = new Image(130, 32);
MenuImgs[1] = new Image(130, 32);
MenuImgs[1].src = "http://wwwstatic.megaupload.com/gui2/menu/es/menuo_02.gif";
MImgs[2] = new Image(126, 32);
MenuImgs[2] = new Image(126, 32);
MenuImgs[2].src = "http://wwwstatic.megaupload.com/gui2/menu/es/menuo_03.gif";
MImgs[3] = new Image(122, 32);
MenuImgs[3] = new Image(122, 32);
MenuImgs[3].src = "http://wwwstatic.megaupload.com/gui2/menu/es/menuo_04.gif";
MImgs[4] = new Image(149, 32);
MenuImgs[4] = new Image(149, 32);
MenuImgs[4].src = "http://wwwstatic.megaupload.com/gui2/menu/es/menuo_05.gif";
MImgs[5] = new Image(146, 32);
MenuImgs[5] = new Image(146, 32);
MenuImgs[5].src = "http://wwwstatic.megaupload.com/gui2/menu/es/menuo_06.gif";
MImgs[6] = new Image(133, 32);
MenuImgs[6] = new Image(133, 32);
MenuImgs[6].src = "http://wwwstatic.megaupload.com/gui2/menu/es/menuo_07.gif";
</script>

<div style="position:absolute; left:0px; top:49px;">
<TABLE cellpadding="0" cellspacing="0">
<TR>
<TD><a href="?c=signup"><IMG SRC="http://wwwstatic.megaupload.com/gui2/menu/es/menu_01.gif"

WIDTH="184" HEIGHT="32" BORDER="0" ALT="" onmouseover="MImgs[0].src=this.src; this.src=MenuImgs[0].src;"

onmouseout="this.src=MImgs[0].src;"></a></TD>
<TD><a href="?c=premium"><IMG SRC="http://wwwstatic.megaupload.com/gui2/menu/es/menu_02.gif"

WIDTH="130" HEIGHT="32" BORDER="0" ALT="" onmouseover="MImgs[1].src=this.src; this.src=MenuImgs[1].src;"

onmouseout="this.src=MImgs[1].src;"></a></TD>
<TD><a href="?c=rewards"><IMG SRC="http://wwwstatic.megaupload.com/gui2/menu/es/menu_03.gif"

WIDTH="126" HEIGHT="32" BORDER="0" ALT="" onmouseover="MImgs[2].src=this.src; this.src=MenuImgs[2].src;"

onmouseout="this.src=MImgs[2].src;"></a></TD>
<TD><a href="?c=top100"><IMG SRC="http://wwwstatic.megaupload.com/gui2/menu/es/menu_04.gif"

WIDTH="122" HEIGHT="32" BORDER="0" ALT="" onmouseover="MImgs[3].src=this.src; this.src=MenuImgs[3].src;"

onmouseout="this.src=MImgs[3].src;"></a></TD>
<TD><a href="?c=tools"><IMG SRC="http://wwwstatic.megaupload.com/gui2/menu/es/menu_05.gif" WIDTH="193"

HEIGHT="32" BORDER="0" ALT="" onmouseover="MImgs[4].src=this.src; this.src=MenuImgs[4].src;"

onmouseout="this.src=MImgs[4].src;"></a></TD>
<TD><a href="?c=support"><IMG SRC="http://wwwstatic.megaupload.com/gui2/menu/es/menu_06.gif"

WIDTH="126" HEIGHT="32" BORDER="0" ALT="" onmouseover="MImgs[5].src=this.src; this.src=MenuImgs[5].src;"

onmouseout="this.src=MImgs[5].src;"></a></TD>
<TD><a href="?c=faq"><IMG SRC="http://wwwstatic.megaupload.com/gui2/menu/es/menu_07.gif" WIDTH="109"

HEIGHT="32" BORDER="0" ALT="" onmouseover="MImgs[6].src=this.src; this.src=MenuImgs[6].src;"

onmouseout="this.src=MImgs[6].src;"></a></TD>
</TR>
<TR>

</TR>
</TABLE>
</div>



Cambie toda URL (dirección web) que encuentre y reemplazelo por la imagen para realizar
su imagen para el menú.

:der: Si tienes alguna duda o sugerencia, házmela saber. Gracias.

Script encontrado de MEGAUPLOAD. Libre reproducción.

Re: [Para actualizar] Nuevos códigos html

PublicadoCOLON 01 Ago 2009 09:12
por formuloizer
Muy buen post Iván, lo usaré!! ::D:

Re: [Para actualizar] Nuevos códigos html

PublicadoCOLON 05 Sep 2009 21:35
por michan
Bueno, si Ivan me lo permite, voy a poner un nuevo código, esto va por Jose93, que no encontro un codigo corto para hacer un Menú desplegable
Menú desplegable
Valoración: 7
Descripción: Como dice el titulo, es un menu que se desplega. Es esencial en webs con muchas páginas, ya que ayuda a que haya más espacio para poner otros. La pega es que esteticamente, es un poco poble... Al menos eso creo
<form>
<select NAME="links" onChange="top.location.href=this.form.links.options

[this.form.links.selectedIndex].value">
<option SELECTED>Elija la sección que desee</option>
<option VALUE="http://URL de la web ">texto deseado

</option>
<option VALUE="http://URL de la web ">texto deseado

</option>
<option VALUE="http://URL de la web ">Texto deseado

</option>
</select>
</form>

Solo deberas cambiar lo que esta en rojo para que funcione bien

Espero que sea de su agrado el codigo!!
Saludos

Re: [Para actualizar] Nuevos códigos html

PublicadoCOLON 20 Dic 2009 04:34
por Ivan
Imagen se agranda al pasar por encima el cursor
Valoración: 9
Descripción: Al pasar por encima de una imagen el ratón, esta primera se agrandará en un instante.

Aclaración: Este código ha sido trabajado detalladamente y propuesto para que observe correctamente en el editor de Palimpalem. Está estudiado también para hacer competencia al código LIGHTBOX que no es posible ser utilizado en este servidor de páginas. Si no entiendes mucho de este tema, no cambies los datos del <style> y pide ayuda aquí para que podamos editarlo a tu gusto.

Oculto:
<html>
<head
</head>

<body>

<style>
ul#thumbs, ul#thumbs li{
margin: 1px 0px 0px 2px;
padding:0;
list-style:none;
}

ul#thumbs li{
float:left;
margin-right:5px;
border:3px solid #999;
padding:1px;
}
ul#thumbs a{
display:block;
float:left;
width:150px;
height:150px;
line-height:100px;
overflow:hidden;
position:relative;
z-index:1;
}
ul#thumbs a img{
float:left;
position:absolute;
top:-10px;
left:-60px;
}

/* mouse over */

ul#thumbs a:hover{
overflow:visible;
z-index:1000;
border:none;
}
ul#thumbs a:hover img{
border:1px solid #999;
background:#fff;
padding:4px;
}

/* // mouse over */

/* clearing floats */

ul#thumbs:after, li#thumbs:after{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
ul#thumbs, li#thumbs{
display:block;
}
/* \*/
ul#thumbs, li#thumbs{
min-height:1%;
}
* html ul#thumbs, * html li#thumbs{
height:1%;
}
</style>




<ul id="thumbs">
<li><a href="#"><img src="http://malagaperruna.files.wordpress.com/2009/07/perros-guia.jpg" alt="my image" /></a></li>
</ul>

</body>

</html>


Fue ocultado para no entorpecer la visión de la página.

Espero que les guste el código, más tarde colocaré un demo o vista previa de como queda el código para aquellos que no quieran probarlo. He vuelto y sigo aquí colocando ayuda y esperando para que este post llegue muy lejos...

Re: [Para actualizar] Nuevos códigos html

PublicadoCOLON 20 Dic 2009 09:57
por formuloizer
¡Lo acabo de probar y va a las mil maravillas! Buen trabajo Iván

Re: [Para actualizar] Nuevos códigos html

PublicadoCOLON 19 Feb 2010 14:31
por Ivan
Pasar color hexadecimal a RGB (y viceversa)
Valoración: 7
Descripción: es un modelo para pasar colores hexadecimales a RedGreenBlue o viceversa,
utilizado para los que usan mucho Paint y no pueden colocar el color en #XXXXXX



Entre <head> y </head>
<script language="javascript" type="text/javascript">


//HEX to RGB
//-------------------------------------
function hex_a_decimal( miformu ) {
miformu.R.value = hex_a_R(miformu.hexadecimal.value)
miformu.G.value = hex_a_G(miformu.hexadecimal.value)
miformu.B.value = hex_a_B(miformu.hexadecimal.value)

//muestra el color en el textarea
cambiaColor( miformu )
}

//decimal para el rojo
function hex_a_R(valor_hex) {
valor_hex = quita_almoadilla(valor_hex)
return parseInt( valor_hex.substring(0,2), 16 )
}

//decimal para el verde
function hex_a_G(valor_hex) {
valor_hex = quita_almoadilla(valor_hex)
return parseInt( valor_hex.substring(2,4), 16 )
}

//decimal para el azul
function hex_a_B(valor_hex) {
valor_hex = quita_almoadilla(valor_hex)
return parseInt( valor_hex.substring(4,6), 16 )
}

//elimina el caracter # si esta presente
function quita_almoadilla(valor_hex) {
return (valor_hex.charAt(0)=="#") ? valor_hex.substring(1,7) : valor_hex
}

//RGB to HEX
//-------------------------------------
function RGB_a_hex( miformu ) {
var valor_R = miformu.R.value
var valor_G = miformu.G.value
var valor_B = miformu.B.value
miformu.hexadecimal.value = decimal_a_hex(valor_R) + decimal_a_hex(valor_G) + decimal_a_hex(valor_B)

//muestra el color en el textarea
cambiaColor( miformu )
}

function decimal_a_hex(numero) {
if (numero == null)
return "00"

numero = parseInt(numero)

if (isNaN(numero))
return "00"
else if (numero <= 0 )
return "00"
else if (numero > 255)
return "FF"

numero = Math.round(numero)

return "0123456789ABCDEF".charAt((numero - numero % 16)/16) + "0123456789ABCDEF".charAt(numero % 16)
}

//Cambia color muestra
function cambiaColor( formulario ) {
formulario.muestra.style.backgroundColor = '#' + formulario.hexadecimal.value
}






</script>



Entre <body> y </body>
<center>
<form><table cellpadding="8">
<tr><td>Hexadecimal</td><td></td><td>RGB</td><td>Muestra</td></tr>
<tr><td>#<input type="text" name="hexadecimal" size="8" value="FFFFFF"></td><td>
<input type="button" name="convertir" value=" << " onCLick="RGB_a_hex(this.form);">
<input type="button" name="convertir" value=" >> " onCLick="hex_a_decimal(this.form);">
</td><td>
<input type="text" name="R" size="3" value="255"> R<br>
<input type="text" name="G" size="3" value="255"> G<br>
<input type="text" name="B" size="3" value="255"> B
</td>
<td>
<textarea name="muestra" rows="3" cols="4" style="background-color: #FFFFFF;">

Re: [Para actualizar] Nuevos códigos html

PublicadoCOLON 05 Mar 2010 21:17
por Ivan
Imagen cambia al pasar el ratón por encima (V4)
Descripción: Al pasar el ratón por encima, cambia de imagen. Ideal para menús.
Valoración: 8


Script entre <head> y </head>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array;

for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src;

x.src=a[i+2];}
}
//-->
</script>



Enlace entre <body> y </body>
<a href="#" onMouseOut="MM_swapImgRestore()"

onMouseOver="MM_swapImage('Image1','','http://www.image1.jpg',1)">
<img src="http://www.image2.jpg" name="Image1" border="0" width="380" height="127"></a>

Re: [Para actualizar] Nuevos códigos html

PublicadoCOLON 07 Mar 2010 21:10
por Ivan
Barra estática (tipo Facebook)
Descripción: barra se mantiene quieta en la parte inferior de nuestra página. Editable.
Valoración: 9


Código en una página en blanco
<body background="http://img19.imageshack.us/img19/3581/mitu1.png" bgcolor="transparent"

text="#000000" style="background-repeat:repeat-x;">
<html>
<head>
<style type="text/css">
a
{
color: #C0C0C0;
}
a:visited
{
color: #C0C0C0;
}
a:active
{
color: #C0C0C0;
}
a:hover
{
color: #FFFFFF;
}
</style>
</head>



<font style="font-size:12px" color="#000000" face="Arial"><b><a href="http://www.google.com"

target="_blank" class="style3">Buscar en Google</a></b>

&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<img

src="http://img4.imageshack.us/img4/7130/mitu3.png" align="CENTER"border="0"

style="width:1px;height:33px;">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp

<b><a href="http://ivanblog.com.ar" target="_blank" class="style3">Iván Stebler

Blog</a></b></font></div></div>

&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<img

src="http://img4.imageshack.us/img4/7130/mitu3.png" align="CENTER" border="0"

style="width:1px;height:33px;">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp

<a href="http://www.foroactivo.com" target="_blank"><img

src="http://img513.imageshack.us/img513/2362/mitu2.png" alt="Ir a Foroactivo" align="CENTER"

border="0" style="width:80px;height:30px;"></a></div></div>

&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<img

src="http://img4.imageshack.us/img4/7130/mitu3.png" align="top" border="0"

style="width:1px;height:33px;">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp

</body>
</html>


Iframe en tu página real
<iframe rows="*,35" name="mainFrame" id="mainFrame"

style="position:fixed;left:0px;bottom:0px;width:100%;height:35px;z-index:4"

src="URL de página donde esta la barra" scrolling="no" frameborder="0"></iframe>


Re: [Actualizable] Nuevos códigos HTML-CSS

PublicadoCOLON 02 Abr 2010 19:04
por Ivan
Redondear bordes a tablas
Descripción: en cualquier tipo de tabla, redondearemos las esquinas.
Valoración: 8.5

Lo colocaremos entre <head> y </head> porque es un STYLE.
<style>
div#redondear {
background:#d40000;
margin:0 auto;
padding:0;
width:400px;
border-radius:7px;
-moz-border-radius: 7px;
-webkit-border-radius : 7px;
}
div#redondear p {
margin:0;
padding:10px;
color:#fff;
font-family:arial;
}
</style>


En el <body> donde quieras que vaya la tabla.
<div id="redondear">
<p>Aquí va tu texto, aquí va tu texto, aquí va tu texto, aquí va tu texto, aquí va tu texto, aquí va tu texto, aquí va tu texto, aquí va tu texto, aquí va tu texto, aquí va tu texto, aquí va tu texto, aquí va tu texto, aquí va tu texto.</p>
</div>

Puedes agregar cuantos más quieras de estilos al párrafo o al diseño de tu tabla, animate a crear distintas cosas. Yo aprendí con este sitio de Hojas de Estilos.

Atención: Es incompatible con Internet Explorer 6. Creo que nadie lo usa ya.

Re: [Actualizable] Nuevos códigos HTML-CSS

PublicadoCOLON 01 Ago 2011 03:01
por jannypan
Buenos codigos ivan