Hace unos días me dejaron unos escritos antiguos, muy curiosos, en formato libro, con 10 o 12 páginas cada uno, para escanearlos y poder usarlos en mis páginas cuando me interese. Ya lo haré cuando lo estime oportuno en mi página Plaza Mayor Villarreal.
El caso es que para mostrarlos adecuadamente necesitaba algunas funciones en javascript que dieran el aspecto al libro.
He visto verdaderas maravillas por la red, para hacer este efecto, pero están hechas con flash.
Yo, de momento no trabajo con herramientas de pago, por lo que mis aspiraciones eran más modestas, y al final he hecho lo que seguidamente les muestro con páginas de ejemplo.
Si puede serle útil a alguien, aquí le dejo el código. Las imágenes tienen que llamarse 1.jpg, 2.jpg,...
<script>
var hoja;
var ancho;
var ancholibro=350;
function libro(ancholibro)
{
l='<table border=0 style="border-collapse: collapse;width:'+ancholibro+';background-color:gray ;margin:0;padding:0"><tr><td id="par" width="50%">';
l+='</td><td id="impar" width="50%">';
l+='</td></tr></table>';
document.write(l);
ancho=ancholibro/2;
hoja=1;
document.getElementById("impar").innerHTML='<img width="'+parseInt(ancho-4,10)+'px" alt="" src="'+hoja+'.jpg" onclick=pasahoja(2) onerror=sinimagen("impar") />';
}
function pasahoja(x)
{
hoja=parseInt(hoja+x,10);
ancho=ancholibro/2;
document.getElementById("impar").innerHTML='<img width='+parseInt(ancho-4,10)+'px" alt="" src="'+hoja+'.jpg" onclick=pasahoja(2) onerror=sinimagen("impar") />';
document.getElementById("par").innerHTML='<img width="'+parseInt(ancho-4,10)+'px" alt="" src="'+parseInt(hoja-1,10)+'.jpg" onclick=pasahoja(-2) onerror=sinimagen("par") />';
}
function sinimagen(a)
{
document.getElementById(a).innerHTML='';
}
libro(ancholibro);
</script>
No hay comentarios:
Publicar un comentario
¿Te ha sido útil algo de lo que has visto?, si es así, deja tu comentario, en caso contrario dime que esperabas encontrar, quizá cuando vuelvas ya esté. Gracias.