Anteprima

Slide immagini effetto fade^^

Box slide per inserire foto o immagini con descrizione ^_^
Il codice è un po' lungo, una parte va inserita tra <head> e </head> e un'altra nel body
ma vi basterà inserire le immagini e la descrizione nei capi prestabiliti
Si possono inserire immagini con dimensioni diverse fra loro

Per comodità ho messo il codice in un foglio "Blocco note" fate il Download del file in zip
scompattate e avrete il codice bello pronto da personalizzare
I più pratici potranno realizzare un'iframe così da poter postare lo slide
nel proprio spazio con una sola riga di codice ^_^

Ecco il codice e dove dovete inserire i vostri contenuti^^
Parte di codice da inserire tra <head> e </head>
qui dovrete inserire le immagini e la descrizione

Si possono inserire infinite immagini occorre solo aggiungere il tag --> Picture[1] ='url immagine'
per quante immagini servono aumentando il numero tra parentesi quadre,
stessa cosa per il tag della descrizione --> Caption[1] = "descrizione immagine";

<style type="text/css">
.Caption {
font-family: Palatino Linotype;
font-weight: normal;
font-size: 8pt;
color: #356735;
text-align : center; }

A.Controls:link { color:#356735;
text-decoration:none;
font-family: Palatino Linotype;
font-size: 8pt;
font-weight: bold; }
A.Controls:visited { color:#356735; text-decoration:none;
font-family: Palatino Linotype;
font-size: 8pt;
font-weight: bold; }
A.Controls:active { color:#356735; text-decoration:none;
font-family: Palatino Linotype;
font-size: 8pt;
font-weight: bold; }
A.Controls:hover { color:#356735; text-decoration:none;
font-family: Palatino Linotype;
font-size: 8pt;
font-weight: bold; }

</style>
<script type="text/javascript">

// (C) 2003 by CodeLifter.com
// Free for all users, but leave in this header.

// ==============================
// Set the following variables...
// ==============================

// illustrato e spiegato su http://www.web-link.it

// Set the duration of crossfade (in seconds)
var CrossFadeDuration = 3;

var Picture = new Array(); // don't change this
var Caption = new Array(); // don't change this
var showHot = false; // don't change this

// Specify the image files...
// To add more images, just continue
// the pattern, adding to the array below.
// To use fewer images, remove lines
// starting at the end of the Picture array.
// Caution: The number of Pictures *must*
// equal the number of Captions!

QUI SI INSERISCONO LE IMMAGINI HOSTATE

Picture[1] = 'http://i376.photobucket.com/albums/oo201/penelopesito/slide/immy4300.png';
Picture[2] = 'http://i376.photobucket.com/albums/oo201/penelopesito/slide/immy1400.png';
Picture[3] = 'http://i376.photobucket.com/albums/oo201/penelopesito/slide/immy2200.png';

// Specify the Captions...
// To add more captions, just continue
// the pattern, adding to the array below.
// To use fewer captions, remove lines
// starting at the end of the Caption array.
// Caution: The number of Captions *must*
// equal the number of Pictures!

QUI LE DESCRIZIONI AL NUMERO Picture[1] CORRISPONDE IL NUMERO Caption[1]

Caption[1] = "Prima immagine slide";
Caption[2] = "Seconda immagine slide";
Caption[3] = "Terza immagine slide";

// =====================================
// Do not edit anything below this line!
// =====================================

var tss;
var iss;
var jss = 0;
var pss = Picture.length-1;

var preLoad = new Array();
for (iss = 1; iss < pss+1; iss++){
preLoad[iss] = new Image();
preLoad[iss].src = Picture[iss];}

function control(how){
if (showHot){
if (how=="H") jss = 1;
if (how=="F") jss = jss + 1;
if (how=="B") jss = jss - 1;
if (jss > (pss)) jss=1;
if (jss < 1) jss = pss;
if (document.all){
document.images.PictureBox.style.filter="blendTrans(duration=2)";
document.images.PictureBox.style.filter="blendTrans(duration=CrossFadeDuration)";
document.images.PictureBox.filters.blendTrans.Apply();}
document.images.PictureBox.src = preLoad[jss].src;
if (document.getElementById) document.getElementById("CaptionBox").innerHTML= Caption[jss];
if (document.all) document.images.PictureBox.filters.blendTrans.Play();
}}

</script>

Parte di codice da inserire nel body, qui potrete scrivere un titolo per il vostro Slide
e inserire una prima immagine, che sarà un'anteprima dello slide

<body onload='showHot=true;self.focus();'>
<div align="center">
<table style="border:solid #356735 1px" align="center" background="http://i376.photobucket.com/albums/oo201/penelopesito/slide/sfondoverdino.png" cellpadding=3 cellspacing=0 width="450">
<tr>
<td style="border:solid #356735 1px; border-top:0px; border-left:0px; border-right:0px"class=Caption height=30 bgcolor="#c3fdc3" align="center" width="442" colspan="3">My album photo QUI CAMBI IL TITOLO COME VUOI </td>
</tr>
<tr>
<td height=400 align="center" width="442" colspan="3"><img src=http://i376.photobucket.com/albums/oo201/penelopesito/slide/immy3179.png name=PictureBox> QUI IMMAGINE ANTEPRIMA SLIDE
</td>
</tr>
<tr>
<td> </td>
<td style="border:solid #356735 1px" bgcolor="#c3fdc3" id=CaptionBox class=Caption align=center height="30">Premi i pulsanti < ></td>
<td> </td>
</tr>
<tr>
<td align="center" width="442" colspan="3">
<a class=Controls href="#" onClick="javascript:control('B');" title="indietro">
<img border="0" src="http://i376.photobucket.com/albums/oo201/penelopesito/slide/indietro2V.png" onMouseOver="this.src='http://i376.photobucket.com/albums/oo201/penelopesito/slide/indietro1V.png'" onMouseOut="this.src='http://i376.photobucket.com/albums/oo201/penelopesito/slide/indietro2V.png'" alt=""></a>
<a class=Controls href="#" onClick="javascript:control('H');" title="inizio">
<img border="0" src="http://i376.photobucket.com/albums/oo201/penelopesito/slide/inizio2V.png" onMouseOver="this.src='http://i376.photobucket.com/albums/oo201/penelopesito/slide/inizio1V.png'" onMouseOut="this.src='http://i376.photobucket.com/albums/oo201/penelopesito/slide/inizio2V.png'" alt=""></a>
<a class=Controls href="#" onClick="javascript:control('F');" title="avanti">
<img border="0" src="http://i376.photobucket.com/albums/oo201/penelopesito/slide/avanti2V.png" onMouseOver="this.src='http://i376.photobucket.com/albums/oo201/penelopesito/slide/avanti1V.png'" onMouseOut="this.src='http://i376.photobucket.com/albums/oo201/penelopesito/slide/avanti2V.png'" alt=""></a>
</td>
</tr>
<tr>
<td width="442" colspan="3"><br><a target="_blank" href="http://www.iltelaiodipenelope.it/">
<font face="Palatino Linotype" size="1" color="#356735" style="text-decoration: none">by www.iltelaiodipenelope.it</a></td>
</tr>
</table></div>

Ecco gli slide...

...Slide violetto

[ Download file zip ]

...Slide arancio

[ Download file zip ]

...Slide verde

[ Download file zip ]

...Slide azzurro

[ Download file zip ]

...Slide nero

[ Download file zip ]

Spero vi piacciano e vi siano utili ^_^
Fatemi sapere se li prelevate basterà un salutino in tag^^
Grazie della visita un abbraccione Penelope

Home

www.iltelaiodipenelope.it

- -