Hola a todos. Mientras esperamos la vuelta de Caricatos, voy a dejar dos sugerencias a ver que os parecen:
1 -
Poner un efecto de scroll a la parte de los dibujillos Habría que cambiar un poco la tabla donde van colocados y quedaría "ma o meno" así:
<table style="width:770;height:120"><tr>
<td width="20">
<div id="izquierda" style="width:20px; height:20px; border:1px solid black" onMouseOver="mueve('iz')" onMouseOut="parar()"><</div>
</td>
<td width="560">
<div id="dibujos" style="position:absolute; left:30px; top: 370px; width:560;height:120px;clip:rect(0,560,110,0);over flow: hidden">
<div id=escaparate style="height:120;width:1700;overflow-x:auto;background-color:#eeeeee">
</div></div>
</td>
<td width="20">
<div id="derecha" style="width:20px; height:20px; border:1px solid black" onMouseOver="mueve('de')" onMouseOut="parar()">></div>
</td>
- Y las funciones para que funcione el efecto, serían:
var paso=0, W=500;
var X=50,valor,tiempo;
capa="dibujos";
izquierda=-1100;
activo= false;
function mueve(sentido) { //(iz)quierda (de)recha
X=parseInt(document.getElementById(capa).style.lef t);
W=parseInt(document.getElementById(capa).style.wid th);
if ((X>izquierda) && (sentido=='iz')) {
activo=true;
valor=5;
paso+=valor;
document.getElementById(capa).style.width=(W+valor );
document.getElementById(capa).style.left=(X-valor);
eval('document.getElementById(capa).style.clip="re ct(0,'+(W+valor)+',120,'+paso+')"');
tiempo=setTimeout('mueve("iz")',50);
}
else if ((X<=25) && (sentido=='de') && (activo==true)) {
valor=-5;
paso+=valor;
document.getElementById(capa).style.width=(W+valor );
document.getElementById(capa).style.left=(X-valor);
eval('document.getElementById(capa).style.clip="re ct(0,'+(W+valor)+',120,'+paso+')"');
tiempo=setTimeout('mueve("de")',50);
}
}
2 -
Mantener las proporciones en el apartado de cambiar el tamaño de los dibujo (si el usuario quiere) También hay que cambiar un poco los controles (en negrita los cambios)
visor += "'> izquierda = <input size=5 onkeyup='modimagen(1, this.value)' id=izq type=text value='" + elemento.izq;
visor += "'><br>tamaño: ancho = <input
name='ancho' size=5 onkeyup='modimagen(2, this.value)' type=text value='" + elemento.ancho;
visor += "'> alto = <input
name='alto' size=5 onkeyup='modimagen(3, this.value)' type=text value='" + elemento.alto;
visor += "'>
<input type='checkbox' name='propor' onclick='buscarPropor()'><br> capa : <button size=5 onclick=\"ocultar(" + x + ")\">ocultar</button>";
- Función nueva:
var propH;
var propV;
function buscarPropor() {
propH=parseInt(document.getElementById("capaSup"). style.width) / parseInt(document.getElementById("capaSup").style. height);
propV=parseInt(document.getElementById("capaSup"). style.height) / parseInt(document.getElementById("capaSup").style. width)
alert(propH+'\n'+propV);
}
- Y función a modificar
function modimagen(n, dato) {
var estilo = document.getElementById("capaSup").style;
switch(n) {
case 0:
estilo.top = dato;
dibus[editando].sup = dato;
break;
case 1:
estilo.left = dato;
dibus[editando].izq = dato;
break;
case 2:
estilo.width = dato;
dibus[editando].ancho = dato;
if (propor.checked) {
an=ancho.value;
al=Math.round(an * propV);
alto.value=al;
propor.checked=false;
modimagen(3,al);
propor.checked=true;
}
break;
case 3:
estilo.height = dato;
dibus[editando].alto = dato;
if (propor.checked) {
al=alto.value;
an=Math.round(al * propH);
ancho.value=an;
propor.checked=false;
modimagen(2,an);
propor.checked=true;
}
break;
}
}
Bueno, esto ha quedabo bastante largo
Espero vuestras opiniones. saludos,