onLoad di un immagine

**cisco.seven** · 19-07-2008, 20:58

Ciao a tutti,

intanto vi informo che sono all'inizio con la programmazione in javascript e le mie conoscenze sono molto basilari.

Vi descrivo il mio problema:
All'interno della mia pagina web ho uno script in javascript che tramite degli onclick mi permette dinamicamente di caricare 3 immagini.
Avrei la necessità di creare un caricameto automatico della prima foto in modo automatico all'apertura della pagina.
Sono a conoscenza del comando "onload" per il caricamento automatico ma ho provato in tutti i modi e non riesco a farla comparire in automatico.

Vi posto il codice della pagina nella speranza che qualcuno mi possa aiutare, grazie anticipatamente.

<!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>mia pagina</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="progid

XImageTransform.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
}
}
</script>

</head>

<body>
<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" align="left" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="50" align="left" valign="top"></td>
</tr>
<tr>
<td height="795" align="left" valign="top" class="box_01">

<a href="#" onClick="return modifyimage('dynloadarea1', 0);">

[img]p1.jpg[/img]</a>

<a href="#" onClick="return modifyimage('dynloadarea1', 2);">

[img]p2.jpg[/img]</a>

<a href="#" onClick="return modifyimage('dynloadarea1', 4);">

[img]p3.jpg[/img]</a>

</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="160" align="left" valign="top"></td>
</tr>
<tr>
<td height="30" align="left" valign="top"></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">

<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="30" align="left" valign="top"></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td align="left" valign="top"></td>
</tr>
<tr>
<td align="left" valign="top"></td>
</tr>
</table>
</body>
</html>

**artorius** · 19-07-2008, 21:14

Molto semplicemente metti al tag body:

<body onload="return modifyimage('dynloadarea1', 0);">

o al posto di 0 l'indice dell'immagine da caricare all'apertura della pagina

**cisco.seven** · 20-07-2008, 18:50

Grazie mille per la tua risposta immediata. Ho provato e il caricamento all'apertura funziona.
Ne approfitto per chiederti un'altra domanda sempre per un altro problema che ho in questa pagina.

Io vorrei che la funzione onclick e anche l'ultima inserita dell'onLoad mi caricassero insieme 2 immagini.
Ti spiego meglio: all'apertura della mia pagina web l'onLoad mi deve fare partire al posto della singola immagine, 2 immagini in 2 posizioni diverse (dynloadarea1, dynloadarea2). Stessa cosa per i vari onClick presenti nella pagina.

Io avevo provato in questo sistema ma sicuramente sbaglio qualche cosa perchè non mi funziona:

[img]p1.jpg[/img]

Ti ringrazio anticipatamente per il tuo aiuto.

**artorius** · 20-07-2008, 19:59

fai così, nel tag script aggiungi:

Codice PHP:


function loadTwoImage(FirstIndex, SecondIndex){



modifyimage('dynloadarea1', FirstIndex); 

modifyimage('dynloadarea2', SecondIndex);



return false;

}

Ed usa questo medoto nell' onclick e onload indicando gli opportuni indici

**cisco.seven** · 20-07-2008, 21:02

Ho provato a fare come hai scritto ma sicuramente sbaglio qualche cosa...
Nello script la function modifyimage la devo sostituire con la function loadTwoImage oppure le matengo entrambe?

Cmq ti posto il codice di quello che ho fatto così forse ti aiuto a capire di più il mio problema:

<!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>mia pagina</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="progid

XImageTransform.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(0, 1){

modifyimage('dynloadarea1', 0);
modifyimage('dynloadarea2', 1);

return false;
}
</script>

</head>

<body onload="return modifyimage('dynloadarea1', 0);">
<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" align="left" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="50" align="left" valign="top"></td>
</tr>
<tr>
<td height="795" align="left" valign="top" class="box_01">

<a href="#" onClick="return modifyimage('dynloadarea1', 0);">

[img]p1.jpg[/img]</a>

<a href="#" onClick="return modifyimage('dynloadarea1', 2);">

[img]p2.jpg[/img]</a>

<a href="#" onClick="return modifyimage('dynloadarea1', 4);">

[img]p3.jpg[/img]</a>

</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="160" align="left" valign="top"></td>
</tr>
<tr>
<td height="30" align="left" valign="top"></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">

<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="30" align="left" valign="top"></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td align="left" valign="top"></td>
</tr>
<tr>
<td align="left" valign="top"></td>
</tr>
</table>
</body>
</html>

**cisco.seven** · 21-07-2008, 22:53

...faticaccia ma ci sono riuscito.
Forse per te era una delle cose più semplici al mondo ma come ti ho detto per me javascript è veramente alle prime armi.
Cmq grazie mille del tuo aiuto.

Se percaso avrai bisogno in futuro di un aiuto di web marketing non esitare a chiedere.
Grazie ancora.

Discussione: onLoad di un immagine

Strumenti discussione

Ricerca discussione

Visualizza

onLoad di un immagine

Permessi di invio