Pequeño script para avatares. (con javascript y php)

santiago_ra · #1 (**permalink**) 15/03/2009, 12:55

Se hizo estando en clase.
Crear una página html o php, copiar y pegar el código(tal cual)
Guardamos la página con el nombre al gusto.
Creamos una carpeta con el nombre de: visor (minúsculas),
e introducimos las imágenes y listo. :)
No olvidar que por lo menos una imagen de las que introduciremos
en la carpeta debe llamarse 1.gif, ya las demas da igual.
Nota: Si lo queremos para mostrar imagenes no hace falta base de datos.
Está revisado para internet explorer y mozilla fire fox.

Código PHP:

 
<html> 
<head> 
<title>SELECCION DE AVATARES</title> 
<script languaje="javascript"> // script para elegir el avatar 
    function poner_avatar(imagen){ 
    document.getElementById('foto_avatar').src="visor/"+imagen;// lo que esta dentro del parentesis es el nombre de la ID y fuera el NOMBRE DE LA CARPETA DONDE ESTAN LAS IMÁGENES. 
    document.getElementById('avatar_pregunta').value=imagen;// lo que esta dentro del parentesis es la VARIABLE y también el mismo nombre para el la tabla de la base de datos. 
    }     
</script> 
<script languaje="javascript"> 
    function enviar(){ 
    var titulo=document.getElementById('titulo').value; 
    var noticias=document.getElementById('noticias').value; 
    var pantalla=document.getElementById('pantalla').value; 
    var valido=true; //El formulario es válido 
    var mensaje="Se han encontrado los siguientes errores: \n";  //   \n es un salto de línea 
     
    if (titulo==""){valido=false; mensaje+="Falta el TITULO. \n";} 
    if (noticias==""){valido=false; mensaje+="Falta la NOTICIA. \n";} 
    if (pantalla==""){valido=false; mensaje+="Falta la IMAGEN. \n";} 
    if (valido==true){document.getElementById('f').submit();} 
    else {alert(mensaje);} 
    } 
</script> 
</head> 
 
 
<body > 
<div align="center"> 
<table width="30%"  border="0" cellspacing="8" cellpadding="0"> 
<tr> 
<td align="left" valign="top"> 
 
<table width="100%"  border="0" cellspacing="0" cellpadding="0"> 
<tr> 
<td height="29" align="center" bgcolor="#99CC00"><b>SELECCIÓN DE AVATARES</b></td> 
</tr> 
</table> 
<table width="100%"  border="0" cellpadding="0" cellspacing="0" class="tabla_formularios"> 
<tr> 
<td align="left" valign="top"> 
<form  method="post" enctype="multipart/form-data" name="f" id="f" action="guardar_noticia.php" > 
<table width="100%"  border="0" cellpadding="0" cellspacing="0"> 
<tr align="left" valign="top"> 
<td colspan="3" align="left"> 
<table width="100%"  border="0" cellspacing="4" cellpadding="0"> 
<tr align="left" valign="top"> 
<td> 
<table width="100%" border="0" cellpadding="0" cellspacing="1" class="texto1"> 
<tr align="left" valign="top"> 
<td width="59" align="left" valign="middle" class="txt_1">Título:</td> 
<td width="261" height="30" valign="middle" class="texto_derecha"> 
<input name="titulo" type="text" class="imput_formulario" id="titulo" size="30" ></td> 
<td width="15" valign="middle" class="txt_1">&nbsp;</td> 
</tr> 
<tr align="left" valign="top"> 
<td height="30" align="left" valign="middle" class="txt_1">Imagen:</td> 
<td width="261" height="30" align="left" class="texto_derecha"><span class="txt_1"> 
<input  id="pantalla" name="pantalla" type="file" class="imput_formulario"> 
</span></td> 
<td width="15" align="left" class="txt_1">&nbsp;</td> 
</tr> 
<tr align="left" valign="top"> 
<td height="19" align="left" valign="top" class="txt_1">Noticia:</td> 
<td width="261" height="19" align="left" class="texto_derecha"><span class="txt_1"> 
<textarea name="noticias" cols="40" rows="7" class="imput_formulario" id="noticias"></textarea> 
</span></td> 
<td align="left" class="txt_1"><span class="texto_derecha"> </span></td> 
</tr> 
<tr align="left" valign="top"> 
<td height="53" align="left" valign="middle" class="txt_1">&nbsp;</td> 
<td width="261" height="53" align="center" valign="middle" class="texto_derecha"><table width="100%"  border="0" cellspacing="0" cellpadding="0"> 
<tr> 
<td height="45" align="center" valign="top"><p>  
<br> 
 
 
<?php 
$CARPETA=opendir("visor"); 
$VECTOR_ORDENAR_CARPETA=array(); 
while ($ELEMENTO=readdir($CARPETA)){ 
if($ELEMENTO!="." && $ELEMENTO!="..") 
{$VECTOR_ORDENAR_CARPETA[]=$ELEMENTO;} 
} 
closedir($CARPETA); 
sort($VECTOR_ORDENAR_CARPETA);  
$contador=0; 
$TOTAL=count($VECTOR_ORDENAR_CARPETA)-1; 
$I=0;                                                     
while($I<$TOTAL){$I++; $CONTADOR ++; ?> 
 
<!--cerramos el php porque interesa m&aacute;s para escribir ahora en HTML --> 
<img src="visor/<?php echo $VECTOR_ORDENAR_CARPETA[$I];?>" onMouseDown="poner_avatar('<?php echo $VECTOR_ORDENAR_CARPETA[$I];?>');" style="cursor:hand;" /> 
<!--abrimos el c&oacute;digo php--> 
 
<?php 
if ($CONTADOR>7){$CONTADOR=0; echo "<br/>";} 
} 
?> 
 
 
<br/> 
</p></td> 
</tr> 
<tr> 
<td align="center" valign="top"> 
<table width="100%"  border="0" cellspacing="0" cellpadding="2"> 
<tr> 
<td align="center" valign="middle" bgcolor="#f1f1f1"> El avatar que ha seleccionado es: </td> 
</tr> 
<tr> 
<td align="center" valign="middle"> 
<table width="2%"  border="0" cellpadding="2" cellspacing="1" bgcolor="#CCCCCC"> 
<tr> 
<td align="center" valign="middle" bgcolor="#FFFFFF"> 
<img src="visor/1.gif" name="foto_avatar" id="foto_avatar" border="0"/></td> 
</tr> 
</table></td> 
</tr> 
<tr> 
<td height="36" align="center" valign="middle"><span class="txt_1"> 
<input name="boton" type="button" class="boton_formulario" id="boton" onClick="enviar();" value="Guardar"> 
</span> 
</td> 
</tr> 
</table></td> 
</tr> 
</table> 
</td> 
<td width="15" align="center" valign="middle" class="txt_1">&nbsp;</td> 
</tr> 
</table></td> 
</tr> 
</table></td> 
</tr> 
</table> 
</form> 
</td> 
</tr> 
</table> 
</td> 
</tr> 
</table> 
</div> 
</body> 
</html>