Ragazzi ho scaricato questo template da html.it che permette presentazioni di immagini con descrizione:
http://javascript.html.it/demo/javas...20/esempio.htm
Ogni immagine però ha sotto una didascalia. Qualora non volessi mettere nulla, che faccio?
Il codice che riporto nella pagina:
<div id="slider">
<ul id="sliderContent">
<li class="sliderImage">[img]images/410/1.jpg[/img]<span class="top">descrizione foto 1</span>
<li class="sliderImage">[img]images/410/2.jpg[/img]<span class="top">descrizione foto 2 </span>
<li class="sliderImage">[img]images/410/3.jpg[/img]<span class="top">descrizione foto 3 </span>
<div class="clear sliderImage"></div>[/list]
</div>
il css associato:
#slider {
width: 980px; /* important to be same as image width */
height: 302px; /* important to be same as image height */
position: relative; /* important */
overflow: hidden; /* important */
}
#sliderContent {
width: 980px; /* important to be same as image width or wider */
position: absolute;
top: 0;
margin-left: 0;
}
.sliderImage {
float: left;
position: relative;
display: none;
}
.sliderImage span {
position: absolute;
font: 10px/15px Arial, Helvetica, sans-serif;
padding: 10px 13px;
width: 384px;
background-color: #000;
filter: alpha(opacity=70);
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
color: #fff;
display: none;
}
.clear {
clear: both;
}
.sliderImage span strong {
font-size: 14px;
}
.top {
top: 0;
left: 0;
}
.bottom {
bottom: 0;
left: 0;
}
ul { list-style-type: none;}
Rispondi quotando
