Salve a tutti,
ultimamente mi sono trovato davanti ad un problema a cui non so trovare una soluzione.
Vi spiego sperando che qualcuno mi riesca a dare una mano.
Una pagina del mio sito web è strutturata a tabelle. Nella tabella di sinistra è presente un'elenco verticale di "x" foto (con codice javascript).
La mia necessità è creare in html se possibile uno scroll delle immagini se superano lo spazio consentito della tabella tramite 2 pulsanti a freccia uno sopra e uno sotto l'elenco di foto, con il mouseover o un comando simile.
Cioè al passaggio del mouse sopra il pulsante freccia "down" mi faccia scendere se l'altezza dell'elenco delle foto supera l'altezza della tabella, altrimenti non mi faccia nessuna azione. Viceversa per il pulsante freccia "up" per risalire.
Questa operazione deve avvenire il modo fluido come se l'effetto fosse stato fatto con flash.
Un effetto simile per darvi un idea più precisa l'ho trovato qua: http://flash.html.it/movie/demo/222/er/
Naturalmente la mia necessità è averlo in html o javascript avendo del codice da mantenere.
Vi posto anche il codice della mia pagina per darvi un idea più chiara. Grazie in anticipo
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>miosito</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
//Specify image paths and optional link (set link to "" for no link):
var dynimages=new Array()
dynimages[0]=["photo1_1.jpg", ""]
dynimages[1]=["photo1_2.jpg", ""]
dynimages[2]=["photo2_1.jpg", ""]
dynimages[3]=["photo2_2.jpg", ""]
dynimages[4]=["photo3_1.jpg", ""]
dynimages[5]=["photo3_2.jpg", ""]
//Preload images ("yes" or "no"):
var preloadimg="no"
//Set optional link target to be added to all images with a link:
var optlinktarget=""
//Set image border width
var imgborderwidth=0
//Optionally, change 1.0 and 0.7 below to affect Wipe gradient size and duration in seconds in IE5.5+:
var filterstring="progidXImageTransform.Microsoft.GradientWipe(GradientSiz e=1.0 Duration=0.7)"
///////No need to edit beyond here/////
if (preloadimg=="yes"){
for (x=0; x<dynimages.length; x++){
var myimage=new Image()
myimage.src=dynimages[x][0]
}
}
function returnimgcode(theimg){
var imghtml=""
if (theimg[1]!="")
imghtml='<a href="'+theimg[1]+'" target="'+optlinktarget+'">'
imghtml+='[img]'+theimg[0]+'[/img]'
if (theimg[1]!="")
imghtml+='</a>'
return imghtml
}
function modifyimage(loadarea, imgindex){
if (document.getElementById){
var imgobj=document.getElementById(loadarea)
if (imgobj.filters && window.createPopup){
imgobj.style.filter=filterstring
imgobj.filters[0].Apply()
}
imgobj.innerHTML=returnimgcode(dynimages[imgindex])
if (imgobj.filters && window.createPopup)
imgobj.filters[0].Play()
return false
}
}
function loadTwoImage(i1, i2){
modifyimage('dynloadarea1', i1);
modifyimage('dynloadarea2', i2);
return false;
}
</script>
<style type="text/css">
<!--
.Stile1 {font-family: Arial, Helvetica, sans-serif}
.Stile6 {color: #FFFFFF}
-->
</style>
</head>
<body onload="return loadTwoImage(0, 1);">
<table width="970" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="left" valign="top"><table width="970" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="295" height="878" align="left" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="33" align="left" valign="top"></td>
</tr>
<tr>
<td height="41" align="left" valign="top" class="box_01"><div align="center">[img]img/freccia_up.jpg[/img]</div></td>
</tr>
<tr>
<td height="725" align="left" valign="top" class="box_01"><div align="center">
<a href="#ancora_1" onclick="loadTwoImage(0, 1);">
[img]p1.jpg[/img]</a>
<a href="#ancora_1" onclick="loadTwoImage(2, 3);">
[img]p2.jpg[/img]</a>
<a href="#ancora_1" onclick="loadTwoImage(4, 5);">
[img]p3.jpg[/img]</a>
</div></td>
</tr>
<tr>
<td height="45" align="left" valign="top" class="box_01"><div align="center">[img]img/freccia_down.jpg[/img]</div></td>
</tr>
</table></td>
<td width="20" align="left" valign="top"></td>
<td width="655" align="left" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="34" align="left" valign="top"></td>
</tr>
<tr>
<td height="118" align="left" valign="top">[img]img/logo.jpg[/img]</td>
</tr>
<tr>
<td height="38" align="left" valign="bottom">[img]img/p.jpg[/img]</td>
</tr>
<tr>
<td align="left" valign="top"><table width="655" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="320"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="320" align="left" valign="top" class="box_01">
<a name="ancora_1" id="ancora_1"></a>
<div id="dynloadarea1" style="width:80px;height:200px">
</td>
</tr>
<tr>
<td height="15" align="left" valign="top">[img]img/spacer.gif[/img]</td>
</tr>
<tr>
<td height="320" align="left" valign="top" class="box_01"></td>
</tr>
</table></td>
<td width="15"></td>
<td width="320" align="left" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="320" align="left" valign="top" class="box_01"></td>
</tr>
<tr>
<td height="15" align="left" valign="top">[img]img/spacer.gif[/img]</td>
</tr>
<tr>
<td height="320" align="left" valign="top" class="box_01">
<div id="dynloadarea2" style="width:80px;height:200px">
</td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td height="38" align="left" valign="top"><div align="right">[img]img/d.jpg[/img]</div></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td align="center" valign="top"><table width="969" border="2" align="center" bgcolor="#FFFFFF">
<tr>
<th height="37" bordercolor="#E7E7E7" bgcolor="#FFFFFF" class="Stile1 box_01 Stile6" scope="col">0</th>
<th bordercolor="#E7E7E7" bgcolor="#FFFFFF" class="Stile1 box_01 Stile6" scope="col">1</th>
<th bordercolor="#E7E7E7" bgcolor="#FFFFFF" class="Stile1 box_01 Stile6" scope="col">2</th>
<th bordercolor="#E7E7E7" bgcolor="#FFFFFF" class="Stile1 box_01 Stile6" scope="col">3</th>
<th bordercolor="#E7E7E7" bgcolor="#FFFFFF" class="Stile1 box_01 Stile6" scope="col">4</th>
</tr>
</table></td>
</tr>
<tr>
<td align="left" valign="top">
[img]img/in.jpg[/img]</p>
</td>
</tr>
</table>
<map name="Map" id="Map"><area shape="rect" coords="311,30,513,46" href="http://www.altro.com" target="altro" alt="" />
</map></body>
</html>
Rispondi quotando
