Desarrollos Técnicos y Profesionales: febrero 2014

El siguiente ejercicio me permite modificar
- El tamaño,
- Forma,
- Color y Contenido de un DIV
Además cambia el Texto dentro de un Botón

<!DOCTYPE html>



<html>

<head>
<style type="text/css">
#caja { width:200px; height:60px; background-color:green; color:white; font-size:15px; text-align:center; }
</style>
</head>

<body>
   <div id="caja">Aqui esta el div rojo </div>
   <br>
   <input id="miboton" type="button" onClick="cambios()" value="Clic aca para los cambios del div rojo arriba" />
</body>

<script language="javascript">
function cambios(){
document.getElementById("caja").style.width = "500px";
document.getElementById("caja").style.height = "450px";
document.getElementById("caja").style.fontSize = "62px";
   document.getElementById("caja").style.textAlign = "center";
   document.getElementById("caja").style.backgroundColor = "#FFB3B3";
   document.getElementById("caja").style.border = "4px dashed red";
   document.getElementById("caja").style.color = "black";
   document.getElementById("caja").innerHTML="Se puede insertar Estilo y contenido de elementos en un Div";
   document.getElementById("miboton").value = "Y funciona";
   }
</script>

</html>

Esta codificación permite crear una galería de imágenes en una página HTML5 por medio de una Barra de Corrimiento Horizontal (Scroll). Una vez que presionamos el Botón para repetir la acción. Limpia el Vector y vuelve a cargar todo de nuevo.

<!doctype html>
<html lang="es">


<head>
<meta charset="utf-8">
<title>Barra Horizontal V.05</title>
</head>

<body onload="agregar()">

<style>
/* Barra Horizontal de Corrimiento */
.barra-panel {overflow:auto; position:absolute; left:10px; top:80%; width:98.5%; right:20px; height:140px; z-index:1; }
.borde-Panel {border: 1px solid RGB(0,0,0); background: RGB(215,201,168); }
.punta-Izq {border-top-left-radius: 5px; }
.punta-Der {border-top-right-radius: 5px; }
.barra-Scroll {width: 4500px; } /* Aca entran 20 fotos con un incremento de 130px por fotograma +/- */
.contiene-Item img {border: 1px solid RGB(0,0,0); width:150px; height:100px; float:left; margin: 10px; }
</style>

<div class="barra-panel borde-Panel punta-Izq punta-Der">
<div class="barra-Scroll" id="tira">
</div>
</div>
<input type="button" onclick="agregar()" value="Dame clic"/>
</body>

<script>
var bandera=0; // impide que limpie el vector recien creado al inicio del proceso
    var kT = 11; // Cantidad de Imagenes
    var misImagenes= new Array(kT); // Vector con las imagenes
    // Completo el Vector con 22 imagenes
    for (k = 0; k < kT; k++) {
        if(k<10) {misImagenes [k] ="./Imagenes/img0"+k+".jpg";} else {
        misImagenes[k] ="./Imagenes/img"+k+".jpg";}
    };

function agregar() {
// **** Limpiar y recomenzar *****************************************************
if (bandera!=0) {
var kT=11;
for (k = 0; k < kT; k++) {
var papa = document.getElementById("P0"+k);
papa.parentNode.removeChild(papa);
}
};
// **** Carga las Imagenes *******************************************************
var kT=11;
for (k = 0; k < kT; k++) {
var elemento = document.createElement("div");
elemento.id="P0"+k;
elemento.className = "contiene-Item img";
elemento.innerHTML = "<img id=H0"+k+" src="+misImagenes[k]+">";
document.getElementById("tira").appendChild(elemento);
// document.getElementById('padre').insertBefore(nuevo_parrafo,segundo_p);
}
bandera=1;
};
</script>

</html>

Desarrollos Técnicos y Profesionales

sábado, 15 de febrero de 2014

Ejercicio 002

viernes, 14 de febrero de 2014

Ejercicio 001