[Actualizable] Nuevos códigos HTML-CSS

Sección para"expertos", que quieren cambiar el código HTML de su página o insertar Java Scripts, Iframes, etc.. Si eres principiante, esta sección no te hace falta.

ModeradorCOLON Moderadores

Avatar de Usuario
Ivan
Master User
Master User
MensajesCOLON 2172
RegistradoCOLON 29 Oct 2005 00:15
UbicaciónCOLON Santa Fe, Argentina
CONTACTCOLON

Re: [Para actualizar] Nuevos códigos html

Notapor Ivan » 29 Jul 2009 03:20

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

Avatar de Usuario
Pablo
Administrador
Administrador
MensajesCOLON 2411
RegistradoCOLON 25 Nov 2006 23:26
UbicaciónCOLON Granada
CONTACTCOLON

Re: [Para actualizar] Nuevos códigos html

Notapor Pablo » 29 Jul 2009 23:41

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!

Avatar de Usuario
Ivan
Master User
Master User
MensajesCOLON 2172
RegistradoCOLON 29 Oct 2005 00:15
UbicaciónCOLON Santa Fe, Argentina
CONTACTCOLON

Re: [Para actualizar] Nuevos códigos html

Notapor Ivan » 01 Ago 2009 03:58

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.

Avatar de Usuario
formuloizer
Grand User
Grand User
MensajesCOLON 487
RegistradoCOLON 16 Jun 2009 19:50
UbicaciónCOLON Palma de Mallorca

Re: [Para actualizar] Nuevos códigos html

Notapor formuloizer » 01 Ago 2009 09:12

Muy buen post Iván, lo usaré!! ::D:
http://www.formuloizer.tk
Web de Fórmula 1 y Moto GP

Avatar de Usuario
michan
Moderador
Moderador
MensajesCOLON 1610
RegistradoCOLON 29 Dic 2008 17:37
Escribe: PalimpalemCOLON Palimpalem
UbicaciónCOLON Seras cotilla ¬¬
CONTACTCOLON

Re: [Para actualizar] Nuevos códigos html

Notapor michan » 05 Sep 2009 21:35

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

Avatar de Usuario
Ivan
Master User
Master User
MensajesCOLON 2172
RegistradoCOLON 29 Oct 2005 00:15
UbicaciónCOLON Santa Fe, Argentina
CONTACTCOLON

Re: [Para actualizar] Nuevos códigos html

Notapor Ivan » 20 Dic 2009 04:34

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

Avatar de Usuario
formuloizer
Grand User
Grand User
MensajesCOLON 487
RegistradoCOLON 16 Jun 2009 19:50
UbicaciónCOLON Palma de Mallorca

Re: [Para actualizar] Nuevos códigos html

Notapor formuloizer » 20 Dic 2009 09:57

¡Lo acabo de probar y va a las mil maravillas! Buen trabajo Iván
http://www.formuloizer.tk
Web de Fórmula 1 y Moto GP

Avatar de Usuario
Ivan
Master User
Master User
MensajesCOLON 2172
RegistradoCOLON 29 Oct 2005 00:15
UbicaciónCOLON Santa Fe, Argentina
CONTACTCOLON

Re: [Para actualizar] Nuevos códigos html

Notapor Ivan » 19 Feb 2010 14:31

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;">

Avatar de Usuario
Ivan
Master User
Master User
MensajesCOLON 2172
RegistradoCOLON 29 Oct 2005 00:15
UbicaciónCOLON Santa Fe, Argentina
CONTACTCOLON

Re: [Para actualizar] Nuevos códigos html

Notapor Ivan » 05 Mar 2010 21:17

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>

Avatar de Usuario
Ivan
Master User
Master User
MensajesCOLON 2172
RegistradoCOLON 29 Oct 2005 00:15
UbicaciónCOLON Santa Fe, Argentina
CONTACTCOLON

Re: [Para actualizar] Nuevos códigos html

Notapor Ivan » 07 Mar 2010 21:10

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>


Avatar de Usuario
Ivan
Master User
Master User
MensajesCOLON 2172
RegistradoCOLON 29 Oct 2005 00:15
UbicaciónCOLON Santa Fe, Argentina
CONTACTCOLON

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

Notapor Ivan » 02 Abr 2010 19:04

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.

jannypan
Aprendiz
Aprendiz
MensajesCOLON 3
RegistradoCOLON 01 Ago 2011 02:52

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

Notapor jannypan » 01 Ago 2011 03:01

Buenos codigos ivan


Volver a

¿Quién está conectado?

Usuarios navegando por este Foro: 6 y 0 invitados

cron