beh, per la verità la pagina è disponibile (almeno quando sono on line io, cioè quasi tutta la giornata), comunque: ho alcune premesse da fare: il codice della pagina è generato in javascript, quindi posterò sia la pagiina generata in html da javascript sia il codice javascript che il css ralativo alla pagina:
pagina in html generata
(il Problema potrebbe essere che ho inserito un DIV dentro ad un FORM?)
codice:
<html>
<head>
<title>Galleria</title>
<meta name="GENERATOR" content="Quanta Plus">
<meta name="AUTHOR" content="Luigi Curzi">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="StyleSheet" type="text/css" href="css/strutturaPagina.css">
<link rel="StyleSheet" type="text/css" href="css/strutturaMenu.css">
<link rel="StyleSheet" type="text/css" href="css/strutturaAltro.css">
<link rel="StyleSheet" type="text/css" href="css/strutturaContenuto.css">
<script type="text/javascript" src="javascript/galleria.js"></script>
<style type="text/css">
#imgZoom {visibility:hidden;}
</style></head><body>
<div id="main">
<div id="menuLingue">
<ul>
[*]<a class="selected">italiano</a>
[*]english
[*]français
[/list]
</div>
<div id="header">
</div>
<div id="corpo">
<div id="menu">
<ul>
[*]Chi siamo
<ul>
[*]La Storia
[*]La Compagnia
[*]Stampa
[/list]
[*]Curriculum
<ul>
[*]'80 - '89
[*]'90 - '99
[*]'00 - Oggi
[/list]
[*]Il Teatro Open-Air
[*]Spettacoli
<ul>
[*]T.V. Cumprà
[*]Occhi d'Oriente
[/list]
<li class="selected"><a>Media</a>
<ul>
<li class="selected"><a>Immagini</a>
[*]Video
[/list]
[*]Link
[*]Contatti
[/list]
</div>
<div id="contenuto">
<div id="menuOri">
<ul>
<li class="selected"><a>Immagini</a>
[*]Video
[/list]
</div>
<form method="post" id="formAnteprima">
<submit style="visibility: hidden;"
type="image" id="bwButton"></submit>
<div id="boxAnteprima">
[img]foto/sito/1Min.jpg[/img]
[img]foto/sito/2Min.jpg[/img]
[img]foto/sito/3Min.jpg[/img]
[img]foto/sito/4Min.jpg[/img]
</div>
<submit type="image" id="fwButton"></submit>
<div class="clearDiv"></div>
</form>
<div id="contentFoto">
<a id="imgZoomLink" href="foto/sito/1.jpg">
[img]foto/sito/1Ris.jpg[/img]
</a>
</div>
</div>
<div class="clearDiv"></div>
</div>
<div id="footer" align="center">
<ul>
[*]html4.01 Validation
[*]CSS Validation
[/list]
<div id="textClear">
creato da Luigi Curzi
</div>
</div>
</div>
<script type="text/javascript">
init();
</script>
</body>
</html>
ecco la parte in javascript (scusate i pochi commenti):
codice:
document.write("\n<style type='text/css'>\n\t#imgZoom {visibility:hidden;}\n</style>\n");
//funzioni per le immagini
function init() {
if(!document.getElementById || !document.getElementsByTagName) {
return;
}
var contenuto = document.getElementById("contenuto");
contenuto.removeChild(document.getElementById("boxAnteprimaNoCSS"));
var formAnteprima = document.createElement("form");
formAnteprima.setAttribute("id", "formAnteprima");
formAnteprima.setAttribute("method", "POST");
var bwButton = document.createElement("submit");
bwButton.setAttribute("id","bwButton");
bwButton.setAttribute("type", "image");
bwButton.onclick = function(){ move(-1); return(false); };
bwButton.style.visibility = "hidden";
formAnteprima.appendChild(bwButton);
var boxAnteprima = document.createElement("div");
boxAnteprima.setAttribute("id", "boxAnteprima");
for (i = 1; i<=4; i++) {
var img = document.createElement("img");
img.setAttribute("id", i);
img.setAttribute("src", "foto/sito/"+i+"Min.jpg");
img.onclick = function(){ show(this); return(false); };
img.setAttribute("alt", "foto #"+i);
boxAnteprima.appendChild(img);
}
formAnteprima.appendChild(boxAnteprima);
var fwButton = document.createElement("submit");
fwButton.setAttribute("id","fwButton");
fwButton.setAttribute("type", "image");
fwButton.onclick = function(){ move(1); return(false); };
formAnteprima.appendChild(fwButton);
var clearDiv = document.createElement("div");
clearDiv.setAttribute("class", "clearDiv");
formAnteprima.appendChild(clearDiv);
contenuto.insertBefore(formAnteprima, document.getElementById("contentFoto"));
var contentFoto = document.getElementById("contentFoto");
var imgZoomLink = document.createElement("a");
imgZoomLink.setAttribute("href", "foto/sito/1.jpg");
imgZoomLink.setAttribute("id", "imgZoomLink");
var imgZoom = document.createElement("img");
imgZoom.setAttribute("src", "foto/sito/1Ris.jpg");
imgZoom.setAttribute("alt", "foto #1");
imgZoom.setAttribute("id", "imgZoom");
imgZoom.style.visibility = "visible";
imgZoomLink.appendChild(imgZoom);
contentFoto.appendChild(imgZoomLink);
setOpacity(imgZoom, 0);
fadeIn("imgZoom",0);
}
function move(val) {
imgArr = document.getElementById("boxAnteprima").getElementsByTagName("img");
imgFirstId = imgArr[0].getAttribute("id");
if (val == -1) {
if (parseInt(imgFirstId) == 2) {
document.getElementById("bwButton").style.visibility = "hidden";
} else if (imgFirstId == 10) {
document.getElementById("fwButton").style.visibility = "visible";
}
if (parseInt(imgFirstId) >= 2 && parseInt(imgFirstId) <= 10) {
var img = document.createElement("img");
var i = parseInt(imgFirstId) - 1;
img.setAttribute("id", i);
img.setAttribute("src", "foto/sito/"+i+"Min.jpg");
img.onclick = function(){ show(this); return(false); };
img.setAttribute("alt", "foto #"+i);
var nodeToRemove = document.getElementById(parseInt(imgFirstId) + 3);
document.getElementById("boxAnteprima").removeChild(nodeToRemove);
var nodeAfter = document.getElementById(imgFirstId);
document.getElementById("boxAnteprima").insertBefore(img, nodeAfter);
if (imgFirstId == 2) {
document.getElementById("bwButton").style.visibility = "hidden";
} else if (imgFirstId == 10) {
document.getElementById("fwButton").style.visibility = "visible";
}
}
} else if (val == 1) {
if (parseInt(imgFirstId) == 9) {
document.getElementById("fwButton").style.visibility = "hidden";
} else if (imgFirstId == 1) {
document.getElementById("bwButton").style.visibility = "visible";
}
if (parseInt(imgFirstId) >= 1 && parseInt(imgFirstId) <= 9) {
var img = document.createElement("img");
var i = parseInt(imgFirstId) + 4;
img.setAttribute("id", i);
img.setAttribute("src", "foto/sito/"+i+"Min.jpg");
img.onclick = function(){ show(this); return(false); };
img.setAttribute("alt", "foto #"+i);
var nodeToRemove = document.getElementById(imgFirstId);
document.getElementById("boxAnteprima").removeChild(nodeToRemove);
document.getElementById("boxAnteprima").appendChild(img);
if (imgFirstId == 9) {
document.getElementById("fwButton").style.visibility = "hidden";
} else if (imgFirstId == 1) {
document.getElementById("bwButton").style.visibility = "visible";
}
}
}
}
function show(obj) {
var imgZoom = document.getElementById("imgZoom");
var imgZoomLink = document.getElementById("imgZoomLink");
imgZoomLink.removeChild(imgZoom);
//cambiamo la foto
var imgZoom = document.createElement("img");
imgZoom.setAttribute("id", "imgZoom");
imgZoomLink.appendChild(imgZoom);
setOpacity(imgZoom, 0);
imgZoom.style.visibility = "hidden";
var indFoto = "foto/sito/"+obj.getAttribute("id")+"Ris.jpg";
imgZoom.setAttribute("src", indFoto);
imgZoom.setAttribute("alt", "foto #"+obj.getAttribute("id"));
imgZoom.style.visibility = "visible";
fadeIn("imgZoom",0);
var imgZoomLink = document.getElementById("imgZoomLink");
imgZoomLink.setAttribute("href", "foto/sito/" +obj.getAttribute("id")+ ".jpg");
}
//funzione che regola l'opacita dell'immagine
function setOpacity(obj, opacity) {
opacity = (opacity == 100)?99.999:opacity;
// IE/Win
obj.style.filter = "alpha(opacity:"+opacity+")";
// Safari<1.2, Konqueror
obj.style.KHTMLOpacity = parseInt(opacity)/100;
// Older Mozilla and Firefox
obj.style.MozOpacity = parseInt(opacity)/100;
// Safari 1.2, newer Firefox and Mozilla, CSS3
obj.style.opacity = parseInt(opacity)/100;
}
//funzione che regola la comparsa dell'immagine
function fadeIn(objId, opacity) {
if (document.getElementById) {
obj = document.getElementById(objId);
if (opacity <= 100) {
setOpacity(obj, opacity);
opacity += 20;
window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 100);
}
}
}
continua nel prox messaggio....
Rispondi quotando
