Salve a tutti, ho questo codice javascript
e il relativo per html
questo script permette l'apertura di una pagina web in verticale tagliando a metà la pagina e creando due rettangoli che lasciando lo spazio sito.
volevo sapere se al posto dei due rettangoli bianchi che si aprono, potevo mettere ad esempio una foto che si taglia a metà lasciando lo spazio alla pagina web dopo il click del pulsante al centro...
Si puo fare? su quale codice devo intervenire e come?
grazie a tutti!
Codice:
var width=document.body.clientWidth;
var height=document.body.clientHeight;
function doClickText(who,type,step,timeOut) {
document.getElementById(who).style.display="none";
if(type==0) {
reveal('revealDiv1',step,timeOut,0);
reveal('revealDiv2',step,timeOut,1);
}
if(type==1) {
reveal('revealDiv1',step,timeOut,2);
reveal('revealDiv2',step,timeOut,3);
}
}
//////////////////////
// Reveal! function //
//////////////////////
function reveal(who,step,timeOut,type) {
if(type==0)
var where="top";
if(type==1)
var where="bottom";
if(type==2)
var where="left";
if(type==3)
var where="right";
eval('var temp=document.getElementById(who).style.'+where);
temp=parseInt(temp);
if(type==0||type==1)
var checkWith=height/2;
if(type==2||type==3)
var checkWith=width/2;
if(-temp<checkWith) {
temp-=step;
eval('document.getElementById(who).style.'+where+'=temp;');
setTimeout("reveal('"+who+"',"+step+",'"+timeOut+"',"+type+")", timeOut);
}
else {
document.getElementById(who).style.display="none";
document.body.scroll="yes";
}
}
/*
Following function is required to initialise Reveal
The function is called in the following manner :
initReveal(type,div1bg,div2bg,div1bw,div2bw,div1bc,div2bc,step,timeOut,click)
Parameter description :
type -> 0 for vertical | 1 for horizantal
div1bg -> Background color of first layer (eg. '#CCCCCC')
div2bg -> Background color of second layer (eg. '#CCCCCC')
div1bw -> Border width of first layer (eg. 1)
div2bw -> Border width of second layer (eg. 1)
div1bc -> Border color of first layer (eg. '#000000')
div2bc -> Border color of second layer (eg. '#000000')
step -> The amount revealed every interval (eg. 5)
timeOut -> The delay in milliseconds
click -> true if user has to click to reveal | false for auto reveal
*/
function initReveal(type,div1bg,div2bg,div1bw,div2bw,div1bc,div2bc,step,timeOut,click) {
if(type==0) {
var bWhere1="border-bottom";
var bWhere2="border-top";
var putZero1="top:0px; left:0px";
var putZero2="bottom:0px; left:0px";
document.write('<div id="revealDiv1" style="z-index:100; display:block; position:absolute; '+putZero1+'; background:'+div1bg+' ; width:'+(width)+'; height:'+(height/2)+'; '+bWhere1+':'+div1bc+' solid '+div1bw+'px"></div>');
document.write('<div id="revealDiv2" style="z-index:100; display:block; position:absolute; '+putZero2+'; background:'+div2bg+' ; width:'+(width)+'; height:'+(height/2)+'; '+bWhere2+':'+div2bc+' solid '+div2bw+'px"></div>');
if(!click) {
reveal('revealDiv1',step,timeOut,0);
reveal('revealDiv2',step,timeOut,1);
}
else {
clickText(type,step,timeOut);
}
}
if(type==1) {
var bWhere1="border-right";
var bWhere2="border-left";
var putZero1="top:0px; left:0px";
var putZero2="top:0px; right:0px";
document.write('<div id="revealDiv1" style="z-index:100; display:block; position:absolute; '+putZero1+'; background:'+div1bg+' ; width:'+(width/2)+'; height:'+(height)+'; '+bWhere1+':'+div1bc+' solid '+div1bw+'px"></div>');
document.write('<div id="revealDiv2" style="z-index:100; display:block; position:absolute; '+putZero2+'; background:'+div2bg+' ; width:'+(width/2)+'; height:'+(height)+'; '+bWhere2+':'+div2bc+' solid '+div2bw+'px"></div>');
if(!click) {
reveal('revealDiv1',step,timeOut,2);
reveal('revealDiv2',step,timeOut,3);
}
else {
clickText(type,step,timeOut);
}
}
function clickText(type,step,timeOut) {
document.write('<div id="clickText" style="z-index:101; display:block; position:absolute; top:'+(height/2-clickh/2-clickb)+'; left:'+(width/2-clickw/2-clickb)+'"><table style="border:'+clickc+' solid '+clickb+'px; background:'+clickbg+' ;width:'+clickw+'px; height:'+clickh+'; '+clickFont+'; cursor:hand; cursor:pointer" onClick="doClickText(\'clickText\','+type+','+step+','+timeOut+')"><tr><td align="middle">'+clickt+'</td></tr></table></div>');
}
}e il relativo per html
Codice:
<script type="text/javascript" src="reveal.js"></script>
<script language="JavaScript" type="text/javascript">
<!--
//////////////////////////////////
// Customise Reveal //
//////////////////////////////////
//
// prelevato e spiegato su http://www.web-link.it
/*
The following is required only if you
want the user to click to reveal the page
*/
var clickw=150; // Width
var clickh=20; // Height
var clickb=2; // Border width
var clickc="#000000"; // Border color
var clickbg="#000000"; // Background color
var clickt="Reveal!"; // Text to display
var clickFont="font-family:verdana,arial,helvetica; font-size:10pt; font-weight:bold; color:#FFFFFF"; // The font style of the text
/*
Following is required to initialise Reveal
The function is called in the following manner :
initReveal(type,div1bg,div2bg,div1bw,div2bw,div1bc,div2bc,step,timeOut,click)
Parameter description :
type -> 0 for vertical | 1 for horizantal
div1bg -> Background color of first layer (eg. '#CCCCCC')
div2bg -> Background color of second layer (eg. '#CCCCCC')
div1bw -> Border width of first layer (eg. 1)
div2bw -> Border width of second layer (eg. 1)
div1bc -> Border color of first layer (eg. '#000000')
div2bc -> Border color of second layer (eg. '#000000')
step -> The amount revealed every interval (eg. 5)
timeOut -> The delay in milliseconds
click -> true if user has to click to reveal | false for auto reveal
See below for an example of how to call the function.
*/
new initReveal(0,'#CCCCCC','#CCCCCC',1,1,'#000000','#000000',3,10,true);
// end -->
</script>questo script permette l'apertura di una pagina web in verticale tagliando a metà la pagina e creando due rettangoli che lasciando lo spazio sito.
volevo sapere se al posto dei due rettangoli bianchi che si aprono, potevo mettere ad esempio una foto che si taglia a metà lasciando lo spazio alla pagina web dopo il click del pulsante al centro...
Si puo fare? su quale codice devo intervenire e come?
grazie a tutti!
Ultima modifica:
