meerdere scripts op één pagina

Status
Niet open voor verdere reacties.

Henk Schepers

Gebruiker
Lid geworden
3 apr 2004
Berichten
187
Hallo
Ik ben bezig met een webpagina www.mbf.nl. Op deze site zie je nu 4 plaatjes die faden.
dit zijn echter Gif plaatjes met elk ± 60 frames.
Elk gif plaatje is ± 1.2 mb groot. Totaal om te laden ruim 4.5 mb
dit duurt veel te lang, dus ben ik het gaan zoeken in javascript. Ik heb verschillende scripts gevonden die op zich goed werken zolang het maar bij één plaatje blijft. Nu wil ik vier afzonderlijk werken foto's plaatsen met een fade effect. Daarbij komt dat de kleine foto's onder de kop veranderen met een mouseover effect en dat moet ook blijven.
probleem is dus dat als het een werkt werkt het andere niet en anders om.
wie heeft java ervaring om dat op te lossen?
:eek:
 
Je hebt 4 'plaatjes' die voortdurend tussen 2 foto's heen en weer faden?

Ja, dat is best makkelijk in javascript uit te voeren. Je plaatst dan gewoon per plaatje eerst de ene foto boven de andere en laat de opacity teruglopen naar 0 en dan later weer terug.

Ik kan er wel even naar kijken.
 
Trouwens, om terug te komen op het probleem met de twee scriptjes, dit is meestal het geval wanneer in het javascript gebruik wordt gemaakt van het onload event.

In het script wordt een functie aan de property "onload" toegewezen. Wanneer window dan geladen is en de onload propertie wordt aangeroepen wordt de functie aangeroepen.

Wanneer je deze property twee keer instelt, wordt alleen de laatste gebruikt:
Document 1:
Code:
window.onload = functie1;
Document 2:
Code:
window.onload = functie2;

Nu wordt dus alleen functie2 gebruikt wanneer de pagina is ingeladen.

Je moet dus een van deze regels verwijderen en de functie toevoegen aan de andere:
Document 1:
Code:
window.onload = function() { functie1(); functie2(); };

Document 2:
Code:
<hier is de window.onload weggehaald>
 
Hallo

Bedankt voor je reactie.
Het het script voor het overvloeien heb ik van het internet gehaald en dat werkt.
de mouse over plaatjes die beneden aan de website staan die werken ook.
maar ze werken of / of, maar als ik beide scripts te gelijk. wil laten werken dan doet er één het maar. Het gaat er om dat ik 4 slideshows en de rest als mouseover wil laten werken. precies zoals je op de website ziet
Je bent iets vlugger dan ik, maar hier een voorbeeld


<html>
<head>
<title>MBF Hoofddorp</title>
<link rel="icon" href="/mbf.png" type="mbf.png" />
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
</head>
<script src="rollover.js"
slideShowSpeed = 5000
var crossFadeDuration = 3
var Pic = new Array() // don't touch this
Pic[0] = 'images/hoofdfoto/1.jpg'
Pic[1] = 'images/hoofdfoto/2.jpg'
Pic[2] = 'images/hoofdfoto/3.jpg'
Pic[3] = 'images/hoofdfoto/4.jpg'
Pic[4] = 'images/hoofdfoto/5.jpg'
var t
var j = 0
var p = Pic.length
var preLoad = new Array()
for (i = 0; i < p; i++){
preLoad = new Image()
preLoad.src = Pic
}
function runSlideShow(){
if (document.all){
document.images.SlideShow.style.filter="blendTrans(duration=2)"
document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)"
document.images.SlideShow.filters.blendTrans.Apply()
}
document.images.SlideShow.src = preLoad[j].src
if (document.all){
document.images.SlideShow.filters.blendTrans.Play()
}
j = j + 1
if (j //="======================================" ,var > (p-1)) j=0
t = setTimeout('runSlideShow()', slideShowSpeed)
}
window.onload=('runSlideShow')
//nieuw script 1
</script>


<body bgcolor="#DCE6A9">


<div ; style="width: 1277; height: 2469">
<center>
<table border="0" width="1" height="581" bordercolor="#DCEBAA" bordercolorlight="#DCEBAA" bordercolordark="#DCEBAA">
<tr>
<td width="644" height="575" valign="top" align="center">
<div align="left">
<table border="0" width="198" height="747">
<tr>
<td width="1005" colspan="3" height="147" align="center" valign="middle"><map name="FPMap0">
<area href="paarden.htm" shape="circle" coords="916, 73, 43"></map><img border="0" src="LOGO_mbf.jpg" usemap="#FPMap0" width="977" height="145"></td>
</tr>
<tr>



<img src="images/hoofdfoto/1.jpg" name='SlideShow' width=308 height=242></td>
<td width="365" valign="top" align="center" height="246"><img border="0" src="images/map_kenia.jpg" width="226" height="238"> </td>
<td width="364" valign="top" align="center" height="246">
<img src="images/hoofdfoto/1.jpg" name='SlideShow' width=308 height=242></td>
</tr>

<tr>

<td width="274" valign="top" align="center" height="1">
<p style="word-spacing: 0; margin-top: 0; margin-bottom: 0"> </p>
</td>

<td width="273" valign="top" align="center" height="1">
<a class="statcounter" href="http://www.statcounter.com/"><img class="statcounter" src="http://c38.statcounter.com/3357677/0/9ac6db3c/0/" alt="website stats" /></a>
</td>

<td width="547" valign="top" align="center" height="1">
</td>
</tr>
<tr>
<td width="1005" valign="top" align="center" height="44" colspan="3">
<p style="word-spacing: 0; margin-top: 0; margin-bottom: 0"><font face="Georgia" size="3"><span style="font-size: 12pt; font-family: Georgia;" lang="EN-US">Meadowbrook
Farms is a moderate sized efficient Company, with the ability to
cut costs, where mammoth concerns fall short.
</span></font></p>
<p style="word-spacing: 0; margin-top: 0; margin-bottom: 0"><font face="Georgia" size="3"><span style="font-size: 12pt; font-family: Georgia;" lang="EN-US">&nbsp;&nbsp;We emphasize
&nbsp;on providing personal respect and services to all customers,
whether large or small.<o:p>
&nbsp;
</span></font></td>
</tr>
<tr>
<td width="380" height="242" valign="top" align="left"><img src="images/hoofdfoto/1.jpg" name='SlideShow' width=308 height=242>
</td>
<td width="338" height="242" valign="top" align="center">
<p align="center" style="word-spacing: 0; margin-top: 0; margin-bottom: 0">&nbsp;</p>
<p align="center" style="word-spacing: 0; margin-top: 0; margin-bottom: 0"><font face="Georgia" size="3"><span style="font-size: 12pt; font-family: Georgia;" lang="EN-US">&nbsp;In
<st1:country-region w:st="on">
Kenya</st1:country-region>
, on the foothills of&nbsp; Mount Kenya&nbsp; and &nbsp;on the South Lake of Navaisha, we&nbsp; produce &nbsp;the
finest qualities semi-exotic vegetables under the label <st1:place w:st="on">
<st1:city w:st="on">
Savannah</st1:city>
</st1:place>
, on
</span></font></p>
<p align="center" style="word-spacing: 0; margin-top: 0; margin-bottom: 0"><font face="Georgia" size="3"><span style="font-size: 12pt; font-family: Georgia;" lang="EN-US">&nbsp;
+<st1:metricconverter productid="400 acres" w:st="on">
400 acres</st1:metricconverter>
of the best farm land.<o:p>
&nbsp;
</span></font></p>
<p align="center" style="word-spacing: 0; margin-top: 0; margin-bottom: 0"><font face="Georgia" size="3"><span style="font-size: 12pt; font-family: Georgia;" lang="EN-US">Ken
House packing station at <st1:place w:st="on"> Nairobi</st1:city>
</st1:place>
airport operates with the&nbsp; best cold store and packing
facilities and provides you our products conform Your personal
demands.
</span></font></p>
</td>
<th width="376" valign="top" height="267" rowspan="2"> <img src="images/hoofdfoto/1.jpg" name='SlideShow' width=308 height=242>
</th>
</tr>
<tr>
<td width="380" height="21" valign="top" align="center">
</td>
<td width="338" height="21" valign="top" align="center">
</td>
</tr>
<tr>
<td width="1005" height="185" colspan="3">
<div align="left">
<table border="0" width="974" height="152">
<tr>
<td width="331" height="148" valign="top" align="left">
<img src="images/groenten/5g.jpg" alt="images/groenten/5g_o.jpg" class="imgover" width="204" height="170">
</td>
<td width="256" height="148" valign="top" align="right">
</td>
<td width="350" height="148" valign="top" align="center"><img src="images/groenten/6g.jpg" alt="images\groenten\6g_o.jpg" class="imgover" width="204" height="170">
</td>
<td width="273" height="148" valign="top" align="center">
</td>
<td width="397" height="148" valign="top" align="center"><img src="images/groenten/7g.jpg" alt="images\groenten\7g_o.jpg" class="imgover" width="204" height="170">
</td>
<td width="264" align="right" height="148" valign="top">
</td>
<td width="378" align="right" height="148" valign="top"><img src="images/groenten/8g.jpg" alt="images\groenten\8g_o.jpg" class="imgover" width="204" height="170">
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td width="846" valign="top" align="center" height="21" colspan="3">
 
zoals je ziet heb ik in de eerste regel een rollover.js bestand geladen. dat is voor de kleine foto's. de vier andere moeten onafhankelijk van elkaar werken met een eigen script bv met een 4 of 5 foto's elk
 
Waarom zijn je plaatjes zo groot

3034.95 KB (3107784 bytes) en dat 25 keer op één pagina.

Als je een script meermaals wenst te gebruiken, moet je de bron herschrijven.
Dwz de naamgeving voor de diverse elementen in het script.
Dus hetzelfde script met andere namen erin.

Of je moet het script zelf herschrijven, dat je met img werkt
en dit kunt ophogen.
Heb zo geen voorbeeldje bij de hand.

:cool:
 
hallo peter

Volgens mij zijn de kleine foto's niet zo groot maar de 4 gif plaatjes wel
het benomen of ophogen de verschillende scripts weet ik niet. ik heb niet zo veel ervaring in html
 
peter

Ik heb dat ook geprobeerd BV overal waar slideshow staat vervangen door een andere naam maar dat werkte niet
 
Waar zijn je:
http://www.mbf.nl/images/hoofdfoto/1.jpg
etc?

Dit is ook niet goed:

<script src="rollover.js"
slideShowSpeed = 5000
var crossFadeDuration = 3
var Pic = new Array() // don't touch this
Pic[0] = 'images/hoofdfoto/1.jpg'

hoort te zijn

<script src="rollover.js" type="text/javascript">


<script type="text/javascript">

slideShowSpeed = 5000
var crossFadeDuration = 3
var Pic = new Array() // don't touch this
Pic[0] = 'http://www.mbf.nl/images/hoofdfoto/1.jpg'

:cool::
 
Hallo Peter

Hallo Peter
Ik heb de site bezocht die je had aangegeven. Dat is precies wat ik nodig heb.
Ik heb het draaiend in frontpage. Daar draait het goed in (offline)
Als ik het publiceer en de pagina oproep in IE, dan moet ik drie keer op op F5 drukken om alle plaatjes te laten Faden
Hij geeft ook aan dat er fouten op de pagina zitten.
Ik heb een bericht gestuurd naar de web site van de ontwerper maar krijg geen antwoord.
Wil jij nog eens kijken op www.mbf.nl.
Ik heb ook het path naar de foto's aangepast zoals jij eerder schreef maar dat lost het niet op.
Hij doet het wel na het indrukken van F5
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan