Avatar billede bassa Nybegynder
14. december 2004 - 14:05 Der er 6 kommentarer og
1 løsning

Image Fader virker ikke?

Hejsa,

Jeg har en imagefader aktiveret som JavaScript i denne sourcekode, problemet er bare at den ikke går igang med at fade mellem de respektive billeder.

Er der en af jer derude som kan gennemskue hvad fejlen er, og hvad der skal rettes?

På forhånd tak,
Bassa

-------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script>
// (C) 2000 www.CodeLifter.com
// http://www.codelifter.com
// Free for all users, but leave in this  header
// NS4-6,IE4-6
// Fade effect only in IE; degrades gracefully

// =======================================
// set the following variables
// =======================================

// Set slideShowSpeed (milliseconds)
var slideShowSpeed = 3000

// Duration of crossfade (seconds)
var crossFadeDuration = 3

// Specify the image files
var Pic = new Array() // don't touch this
// to add more images, just continue
// the pattern, adding to the array below

Pic[0] = 'quotes1.gif'
Pic[1] = 'quotes2.gif'
Pic[2] = 'quotes3.gif'
Pic[2] = 'images/quotes4.gif'
Pic[2] = 'images/quotes5.gif'
Pic[2] = 'images/quotes6.gif'
Pic[2] = 'images/quotes7.gif'
Pic[2] = 'images/quotes8.gif'
Pic[2] = 'images/quotes9.gif'
Pic[2] = 'images/quotes10.gif'
Pic[2] = 'images/quotes11.gif'
Pic[2] = 'images/quotes12.gif'

// =======================================
// do not edit anything below this line
// =======================================

var t
var j = 0
var p = Pic.length

var preLoad = new Array()
for (i = 0; i < p; i++){
  preLoad[i] = new Image()
  preLoad[i].src = Pic[i]
}

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 > (p-1)) j=0
  t = setTimeout('runSlideShow()', slideShowSpeed)
}
</script>
<script>
function hidestatus(){
window.status=''
return true
}

if (document.layers)
document.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT)

document.onmouseover=hidestatus
document.onmouseout=hidestatus
</script>
<SCRIPT LANGUAGE="JavaScript">
<!--
IMAGE01 = "images/on.gif" 
IMAGE02 = "images/off.gif"
IMAGE03 = "images/on.gif" 
IMAGE04 = "images/on.gif" 

function imgover(imgname){
    imgname.src = IMAGE01
}

function imgout(imgname){
    imgname.src = IMAGE02
}

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
  if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</SCRIPT>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>ufo design</title>
<style type="text/css">
<!--
body,td,th {
    font-family: Tahoma;
    font-size: 11px;
    font-weight: bold;
}
body {
    background-color: #CCCCCC;
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
}
a {
    font-family: Tahoma;
    font-size: 11px;
    color: #DCE6F0;
    font-weight: bold;
}
a:link {
    text-decoration: none;
}
a:visited {
    text-decoration: none;
    color: #DCE6F0;
}
a:hover {
    text-decoration: none;
    color: #FFFFFF;
}
a:active {
    text-decoration: none;
    color: #DCE6F0;
}
h1,h2,h3,h4,h5,h6 {
    font-family: Tahoma;
    font-weight: bold;
}
.style1 {color: #DCE6F0}
-->
</style>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</head>
<body onLoad="MM_preloadImages('images/icon_homeon.gif','images/icon_emailon.gif','images/icon_pdfon.gif','images/icon_sitemapon.gif','images/icon_bookmarkon.gif')">
<div align="center">
  <table width="1004" height="615" border="0" align="center" cellpadding="0" cellspacing="0" ID="Table1">
    <tr>
      <td align="center" valign="middle"><table width="100" border="0" cellspacing="0" cellpadding="0" ID="Table2">
        <tr>
          <td height="120"><table width="1004" height="120" border="0" cellpadding="0" cellspacing="0">
            <tr>
              <td height="47" valign="bottom" background="images/topbg.gif"><table width="1004" height="47" border="0" cellpadding="0" cellspacing="0">
                  <tr>
                    <td height="13" colspan="9" align="right">&nbsp;</td>
                    <td width="13" rowspan="2" align="right"><img src="images/topright.gif" width="13" height="47"></td>
                  </tr>
                  <tr>
                    <td width="895" height="24" align="right" valign="top"><a href="index.htm" target="_self" onMouseOver="MM_swapImage('Hjem','','images/icon_homeon.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="images/icon_homeoff.gif" alt="Hjem" name="Hjem" width="19" height="19" border="0"></a></td>
                    <td width="5" align="right" valign="top"><img src="images/topspacer.gif" width="5" height="1"></td>
                    <td width="19" align="right" valign="top"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Bogmærke','','images/icon_bookmarkon.gif',1)"><img src="images/icon_bookmarkoff.gif" alt="Bogmærke" name="Bogmærke" width="19" height="19" border="0"></a></td>
                    <td width="5" align="right" valign="top"><img src="images/topspacer.gif" width="5" height="1"></td>
                    <td width="19" align="right" valign="top"><a href="sitemap.htm" target="_self" onMouseOver="MM_swapImage('Sitemap','','images/icon_sitemapon.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="images/icon_sitemapoff.gif" alt="Sitemap" name="Sitemap" width="19" height="19" border="0"></a></td>
                    <td width="5" align="right" valign="top"><img src="images/topspacer.gif" width="5" height="1"></td>
                    <td width="19" align="right" valign="top"><a href="mailto:info@ufodesign.dk" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('e-mail','','images/icon_emailon.gif',1)"><img src="images/icon_emailoff.gif" alt="e-mail" name="e-mail" width="19" height="19" border="0"></a></td>
                    <td width="5" align="right" valign="top"><img src="images/topspacer.gif" width="5" height="1"></td>
                    <td width="19" align="right" valign="top"><a href="http://www.adobe.com/products/acrobat/readstep2.html" target="_blank" onMouseOver="MM_swapImage('PDF','','images/icon_pdfon.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="images/icon_pdfoff.gif" alt="Hent Adobe Acrobat Reader" name="PDF" width="19" height="19" border="0"></a></td>
                  </tr>
              </table></td>
            </tr>
            <tr>
              <td align="left" valign="top" background="images/logotile.gif"><a href="index.htm" target="_self"><img src="images/logo.gif" alt="Hjem" width="402" height="73" border="0"></a></td>
            </tr>
          </table></td>
        </tr>
        <tr>
          <td height="375" bgcolor="#8CAAC8"><div id="Clock" style="position:absolute; width:266px; height:15px; z-index:1; left: 865px; top: 500px;">
            <div align="center">
<body onload="runSlideShow()">
<script>
/*Current date script credit:
JavaScript Kit (www.javascriptkit.com)
Over 200+ free scripts here!
*/
var mydate=new Date()
var year=mydate.getYear()
if (year < 1000)
year+=1900
var day=mydate.getDay()
var month=mydate.getMonth()
var daym=mydate.getDate()
if (daym<10)
daym="0"+daym
var dayarray=new Array("S&oslash;ndag","Mandag","Tirsdag","Onsdag","Torsdag","Fredag","L&oslash;rdag")
var montharray=new Array("Januar","Februar","Marts","April","Maj","Juni","Juli","August","September","Oktober","November","December")
document.write("<small><font style='font-size:11px;' color='#DCE6F0' face='Tahoma'><b>"+dayarray[day]+" "+daym+". "+montharray[month]+" "+year+"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</b></font></small>")
</script>
<span id=tick2> </span>
<script>
<!--
function show2(){
if (!document.all&&!document.getElementById)
return
thelement=document.getElementById? document.getElementById("tick2"): document.all.tick2
var Digital=new Date()
var hours=Digital.getHours()
var minutes=Digital.getMinutes()
var seconds=Digital.getSeconds()
var dn=""
if (hours<24)
dn=""
if (hours>24)
hours=hours-24
if (hours==0)
hours=24
if (minutes<=9)
minutes="0"+minutes
if (seconds<=9)
seconds="0"+seconds
var ctime=hours+":"+minutes+":"+seconds+" "+dn
thelement.innerHTML="<b style='font-size:11;color:#DCE6F0;'>"+ctime+"</b>"
setTimeout("show2()",1000)
}
window.onload=show2
//-->
</script></div>
          </div></td>
        </tr>
        <tr>
          <td height="120" background="images/bottom.gif"><table width="1004" height="120" border="0" cellpadding="0" cellspacing="0" ID="Table3">
            <tr>
              <td width="43" height="13">&nbsp;</td>
              <td width="564" rowspan="2" align="left" valign="top"><br>                <IMG NAME="IMAGE01" SRC="off.gif" WIDTH=4 HEIGHT=8 BORDER=0> <A HREF="produkter.htm" onMouseOver="imgover(IMAGE01)" onMouseOut="imgout(IMAGE01)">Produkter</A><br>
                <IMG NAME="IMAGE02" SRC="off.gif" WIDTH=4 HEIGHT=8 BORDER=0> <A HREF="kompetencer.htm" onMouseOver="imgover(IMAGE02)" onMouseOut="imgout(IMAGE02)">Kompetencer</A><br>
                <IMG NAME="IMAGE03" SRC="off.gif" WIDTH=4 HEIGHT=8 BORDER=0> <A HREF="filosofi.htm" onMouseOver="imgover(IMAGE03)" onMouseOut="imgout(IMAGE03)">Filosofi</A><br>
                <IMG NAME="IMAGE04" SRC="off.gif" WIDTH=4 HEIGHT=8 BORDER=0> <A HREF="kontakt.htm" onMouseOver="imgover(IMAGE04)" onMouseOut="imgout(IMAGE04)">Kontakt</A>                           
              <td width="397" rowspan="2" align="left" valign="bottom"><table border="0" cellpadding="0" cellspacing="0">
<tr>
<td id="VU" height=75 width=397>  <img src="quotes1.gif" name='SlideShow' width=397 height=75></td>
</tr>
</table>
</tr>
            <tr>
              <td height="11">&nbsp;</td>
              </tr>
          </table></td>
        </tr>
      </table></td>
    </tr>
  </table>
</div>
</body>
</html>
---------------------------------------------------------
Avatar billede bassa Nybegynder
14. december 2004 - 14:17 #1
Jeg ville lige gøre opmærksom på, at selve imagefader scriptet virker fint når jeg laver en test-side hvor kun det script er placeret inde i.

Jeg tror, at problemet forekommer fordi der måske er flere forskellige aktive JavaScripts på selve siden? Så der måske skal skrives noget specielt for at alle scripts loader rigtigt? Eller? :)

Mvh
Bassa
Avatar billede olebole Juniormester
14. december 2004 - 14:30 #2
<ole>

1. Du har flere body-tags ... det kan man ikke.
2. du har flere onload-handlers ... det kan man ikke

window.onload = function() {
  MM_preloadImages('images/icon_homeon.gif','images/icon_emailon.gif','images/icon_pdfon.gif' ....);
  runSlideShow();
  show2();
}


... og så slet dit ene body-tag - og den onload-handler, hvor du ellers starter funktionen 'show2'

/mvh
</bole>
Avatar billede bassa Nybegynder
14. december 2004 - 19:08 #3
Phew!

Det skulle jeg lige rode lidt med før mit hovede holdt op med at snurre :)

Men jeg fik det til at virke helt perfekt, så jeg kan slet ikke holde op med at smile! :D

TUSIND tak for hjælpen, ole!


Mvh
Bassa
Avatar billede bassa Nybegynder
14. december 2004 - 19:09 #4
Øøh, hvordan gi'r jeg dig dine points, Ole? :/
Avatar billede olebole Juniormester
14. december 2004 - 21:34 #5
Hehe ... selvtak  :)
Jeg svarer, så du kan acceptere ... indtil nu har jeg kun kommenteret.
Avatar billede olebole Juniormester
14. december 2004 - 21:38 #6
PS: Håber - selvom det snurrede - at du forstår, at det, du/vi har gjort, er at samle alle de ting, der skal afvikles i én onload-handler.
Du har langt mere ud af at rode med det selv, end at jeg retter - og du copy/paste'er  ;o)
Avatar billede bassa Nybegynder
16. december 2004 - 11:50 #7
Ja, lige præcis. Jeg lagde mærke til at flere af de JavaScripts havde "samme" handlers/loaders, og klart, det er jo nemmest at samle dem på ét sted.

Bassa
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester