Questo tutorial e stato scritto da Lorette Graphique in data 29 settembre 2008
E' vietato copiare anche solo in parte, e spacciarlo per vostro.
E gradito un link al mio sito se prelevate il codice HTML del calendarietto orizzontale
Calendario Orizzontale
Codice HTML per creare calendarietti orizzontali alla destra oppure alla sinistra
La larghezza e l'altezza dello sfondo lo fatte a vostro piacimento.
L'altezza che vedete heigt 120 e quella della mio sfondo immagine,
voi inserite quella della vostra
oppure scegliere di mantenere le stesse misure che sono inserite nel codice HTML
vi metto in rosso i valori che voi volete cambiare
Questi valori sono per inserire la tabella dei numeri a destra:
<TD align=middle width=5 height=120> </TD></TR></TBODY></TABLE>
Se invece volete spostare la tabella dei numeri a sinistra i valori sono questi:
<TD align=middle width=2800 height=120> </TD></TR></TBODY></TABLE>
Dovete cambiare il mio url con quella della vostra immagine.
Vi ho messo in rosso nel codice il punto dove volete cambiare i valori
Questo e il codice HTML completo da inserire nella vostra pagina web
<BODY leftMargin=0 topMargin=0 bgcolor="#FFFFFF">
<TABLE style="BORDER-COLLAPSE: collapse" height=120 cellSpacing=0 cellPadding=0
width=230 background="http://i126.photobucket.com/albums/p92/lorette_album/Puca1LoretteCreations.gif
" width="230" height="120" border=0>
<TBODY>
<TR>
<TD width=250 height=115 align="center">
<TD width=120 height=115 align="center"><script language="JavaScript">
<script language="JavaScript">
<!--
function SymError()
{
return true;
}
window.onerror = SymError;
var SymRealWinOpen = window.open;
function SymWinOpen(url, name, attributes)
{
return (new Object());
}
window.open = SymWinOpen;
//-->
</script>
<script language="JavaScript">
<!--
function SymError()
{
return true;
}
window.onerror = SymError;
var SymRealWinOpen = window.open;
function SymWinOpen(url, name, attributes)
{
return (new Object());
}
window.open = SymWinOpen;
//-->
</script>
<SCRIPT language=JavaScript>
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!--//Begin
monthnames = new Array(
"Gennaio",
"Febbraio",
"Marzo",
"Aprile",
"Maggio",
"Giugno",
"Luglio",
"Agosto",
"Settembre",
"Ottobre",
"Novembre",
"Dicembre");
var linkcount=0;
function addlink(month, day, href) {
var entry = new Array(3);
entry[0] = month;
entry[1] = day;
entry[2] = href;
this[linkcount++] = entry;
}
Array.prototype.addlink = addlink;
linkdays = new Array();
monthdays = new Array(12);
monthdays[0]=31;
monthdays[1]=28;
monthdays[2]=31;
monthdays[3]=30;
monthdays[4]=31;
monthdays[5]=30;
monthdays[6]=31;
monthdays[7]=31;
monthdays[8]=30;
monthdays[9]=31;
monthdays[10]=30;
monthdays[11]=31;
todayDate=new Date();
thisday=todayDate.getDay();
thismonth=todayDate.getMonth();
thisdate=todayDate.getDate();
thisyear=todayDate.getYear();
thisyear = thisyear % 100;
thisyear = ((thisyear < 50) ? (2000 + thisyear) : (1900 + thisyear));
if (((thisyear % 4 == 0)
&& !(thisyear % 100 == 0))
||(thisyear % 400 == 0)) monthdays[1]++;
startspaces=thisdate;
while (startspaces > 7) startspaces-=7;
startspaces = thisday - startspaces + 1;
if (startspaces < 0) startspaces+=7;
document.write("<FONT face='tahoma'>");<!--Font Face-->
document.write("<table border=0 " );<!--Border size-->
document.write("bordercolor=#000000 style='font-size : 9px; color : #646464;' cellpadding=0 cellspacing=1>");<!--Border color, font size, cell padding, cellspacing and font color-->
document.write("<tr><td colspan=7><center><strong>"
+ monthnames[thismonth] + " " + thisyear
+ "</strong></center></td></tr>");
document.write("<tr>");
document.write("<td align=center><font color=#ffffff>D</td>");<!--The color here and below are for each week day-->
document.write("<td align=center><font color=#ffffff>L</td>");
document.write("<td align=center><font color=#ffffff>M</td>")
document.write("<td align=center><font color=#ffffff>M</td>");
document.write("<td align=center><font color=#ffffff>G</td>");
document.write("<td align=center><font color=#ffffff>V</td>");
document.write("<td align=center><font color=#ffffff>S</font></td>");<!--Last color chage here-->
document.write("</tr>");
document.write("<tr>");
for (s=0;s<startspaces;s++) {
document.write("<td>-</td>");
}
count=1;
while (count <= monthdays[thismonth]) {
for (b = startspaces;b<7;b++) {
linktrue=false;
document.write("<td>");
for (c=0;c<linkdays.length;c++) {
if (linkdays[c] != null) {
if ((linkdays[c][0]==thismonth + 1) && (linkdays[c][1]==count)) {
document.write("<a href=\"" + linkdays[c][2] + "\">");
linktrue=true;
}
}
}
if (count==thisdate) {
document.write("<font color='#FFFFFF'>");<!--todays date color-->
}
if (count <= monthdays[thismonth]) {
document.write(count);
}
else {
document.write(" ");
}
if (count==thisdate) {
document.write("</font>");
}
if (linktrue)
document.write("</a>");
document.write("</td>");
count++;
}
document.write("</tr>");
document.write("<tr>");
startspaces=0;
}
document.write("</table>");
document.write("</FONT>");
</SCRIPT>
</TD>
<TD align=middle width=5 height=120> </TD></TR></TBODY></TABLE>
<DIV align=left>
<TABLE id=AutoNumber2 style="BORDER-COLLAPSE: collapse" cellSpacing=0
cellPadding=0 width=125 border=0>
<TBODY>
<TR>
<TD>
<P align=center> </P></TD></TR></TBODY></TABLE>
</div>
Ovviamente anche in questi codici mettete i vostri url
il codice per inserire il calendario nella vostra pagina HTML per vedersi il calendarietto e questo:
<td align="center" width="345"> <IFRAME marginWidth=0
marginHeight=0 src="http://lorettegraphique.altervista.org/puca1.html"
frameBorder=0 width=230 scrolling=no height=120 name="1" ></IFRAME>
Il codice per il boxino textarea e questo :
<td align="center" width="345"> <TEXTAREA onmouseover=this.select() rows=1 name="S14" cols="10"><!-------START 'Calendari' HTML CODE-------> <br><a href=" http://lorettegraphique.altervista.org/calendaripuca.html"><iframe src="http://lorettegraphique.altervista.org/puca1.html" width=230 height=120 MARGINWIDTH=0 MARGINHEIGHT=0 HSPACE=0 VSPACE=0 FRAMEBORDER=0 SCROLLING=no></iframe>
</a></a><br><!-------END 'Calendari ' HTML CODE-------></textarea>
Risultato calendario con tabella numeri a destra
Risultato calendario con tabella numeri a sinistra
Buon lavoro a tutte
© Lorette's Créations 2008
