Puoi salvare ogni livello del layout photoshop come immagine separata e con sfondo trasparente; per cui, siamo forzati ad usare immagini .gif tranne che per quella del livello di base, ovviamente.
Quindi in HTML + STYLE + JavaScript puoi gestire la visualizzazione delle immagini sovrapposte.
Ti faccio l' esempio per due soli livelli, le path ai file d' immagine sono immagazzinate in un array:
codice:
<html>
<head>
<title>layer image</title>
<script type="text/javascript">
var picture = new Array();
picture[0] = "http://i630.photobucket.com/albums/uu30/BenTruwe/McCullyHouse1965ca.jpg";
picture[1] = "http://www.scantips.com/g1/xparent.gif";
function show(index){
document.images["layer" + index].src = picture[index];
};
</script>
</head><body bgcolor="grey">
<div style="width: 543px; height: 341px; border: 1px solid black">
<div style="width: 543px; height: 341px;" >[img][/img]</div>
<div style="width: 543px; height: 341px; margin-top: -341px;">[img][/img]</div>
</div>
<input value="layer 0" type="button" onclick="show(0);">
<input value="layer 1" type="button" onclick="show(1);">
</body>
</html>
La function show() si potrà perfezionare in questa che accende e spegne:
function show(index){
 var img = document.images["layer" + index];
 img.src = (img.src==picture[index])? "" : picture[index];
};
I pulsanti anche, potranno diventare type="checkbox"
Rispondi quotando
...