dhtml conflict?

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • kae
    New Member
    • Oct 2006
    • 1

    dhtml conflict?

    Hi there,
    this may not be an advanced problem but to me it is
    i got a great looking slide show script from this site (http://www.dhteumeuleu.com) but am having a lot of trouble adapting it to my needs. the problem is that when i add a rollover hyperlink to/in the page the slide show ceases to work. i hope somebody can help me with this. i have included the code with the rollover so you can see where i'm going wrong, to see the slideshow as it should look go to the website above
    _______________ _______________ _______________ _____
    _____[code=html]

    <html>

    <head>
    <title>imgPre ss - Interactive DHTML art-demos</title>
    <meta name="author" content="Gerard Ferrandez at http://www.dhteumeuleu .com">
    <meta http-equiv="imagetoo lbar" content="no">
    <style type="text/css">
    body {margin:0; padding:0; position:absolu te; overflow:hidden ; background:#e8e 8e8; left:0; top:0; width:1000%; height:100%;}
    img {position:absol ute; border:gray solid 1px; cursorointer; width:257px; }
    span {position:absol ute; color:#ccc; font-family:verdana; font-size: 12px; width:200px;}
    </style>
    <script type="text/javascript">[/code][code=javascript]
    <!--
    // =============== =============== =============== =====
    ==
    // script: Gerard Ferrandez - Ge-1-doot - JANUARY 2005
    // news://news.leibowitz.org/nzn.fr.html
    // http://www.dhteumeuleu.com/
    // crossbrowser DOM
    // =============== =============== =============== =====
    ==

    window.onerror = new Function("retur n true");
    document.onsele ctstart = new Function("retur n false");
    screen.bufferDe pth = 16;
    O = new Array();
    box = 0;
    img = 0;
    txt = 0;
    tit = 0;
    W = 0;
    H = 0;
    nI = 0;
    sel = 0;
    si = 0;

    //////////////////
    ZOOM = 4;
    rImg = 1.33;
    speed = .1;
    //////////////////

    function dText(){
    txt.style.textA lign = tit.style.textA lign = (sel<nI/2)?"left":"righ t";
    txt.innerHTML = O[sel].tx;
    tit.innerHTML = O[sel].ti;
    }

    function CObj(n, s, x, tx, ti){
    this.n = n;
    this.dim = s;
    this.tx = tx;
    this.ti = ti;
    this.is = img[n];
    this.vz = 0;
    this.sx = 0;
    this.x0 = x;
    this.x1 = 0;
    this.zo = 0;

    this.clic = function(hlink) {
    with(this){
    if(n!=sel){
    O[sel].is.style.curso r = "pointer";
    if(!hlink)O[n].is.style.curso r = "default";
    O[sel].dim = 100;
    O[n].dim = ZOOM * 100;
    sel = n;
    l = 0;
    for(k=0; k<nI; k++){
    O[k].x0 = l;
    l += O[k].dim;
    }
    txt.innerHTML = tit.innerHTML = "";
    setTimeout("dTe xt()", 32);
    } else {
    // ==== open hyperlink window
    if(hlink)window .open(hlink,"_b lank");
    }
    }
    }[/code][code=javascript]

    this.anim = function () {
    with(this){
    vz = speed*(vz+(x1-sx)*.5);
    x1 -= vz;
    sx = (n==0)?0:O[n-1].x0+O[n-1].dim;
    zo -= (zo-dim)*speed;
    l = Math.round((x1* si)+6*(n+1));
    w = Math.round(zo*s i);
    is.style.left = l;
    is.style.top = (H-w*rImg)*.5;
    is.style.width = w;
    is.style.height = w*rImg;
    if(sel == n){
    if(sel<nI*.5)ti t.style.left = txt.style.left = l+w+6;
    else tit.style.left = txt.style.left = l-(nx*.25)-6;
    txt.style.top = -(w*rImg)*.25;
    tit.style.top = (w*rImg)*.33;
    }
    }
    }
    }

    function run(){
    for(j in O)O[j].anim();
    setTimeout("run ()", 16);
    }

    function doResize(){
    tit.style.width = nx*.25;
    txt.style.width = nx*.25;
    tit.style.fontS ize = (nx / 30) + "px";
    txt.style.fontS ize = (nx / 70) + "px";
    with(box.style) {
    width = W;
    height = H;
    left = nx / 2 - W / 2;
    top = ny / 2 - H / 2;
    }
    }[/code][code=javascript]
    function resize(){
    nx = document.body.o ffsetWidth;
    ny = document.body.o ffsetHeight;
    W = nx * 90 / 100;
    si = (W-((nI+1)*6))/((ZOOM*100)+((n I-1)*100));
    H = (100 * si * rImg) + 14;
    setTimeout("doR esize()", 16);
    }
    onresize = resize;

    onload = function(){
    box = document.getEle mentById("box") ;
    tit = document.getEle mentById("tit") ;
    txt = document.getEle mentById("txt") ;
    img = box.getElements ByTagName("img" );
    nI = img.length;
    resize();
    s = ZOOM * 100;
    x = 0;
    tit.innerHTML = img[0].title;
    txt.innerHTML = img[0].alt;
    for(i=0; i<nI; i++) {
    O[i] = new CObj(i, s, x, img[i].alt, img[i].title);
    img[i].alt = "";
    img[i].title = "";
    img[i].onmousedown = new Function("retur n false;");
    x += s;
    s = 100;
    }
    O[0].is.style.curso r = "default";
    setTimeout("box .style.visibili ty='visible';", 100);
    run();
    }

    function MM_swapImgResto re() { //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_preloadImage s() { //v3.0
    var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.leng th,a=MM_preload Images.argument s; 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&&paren t.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.fo rms.length;i++) x=d.forms[i][n];
    for(i=0;!x&&d.l ayers&&i<d.laye rs.length;i++) x=MM_findObj(n, d.layers[i].document);
    if(!x && d.getElementByI d) x=d.getElementB yId(n); return x;
    }

    function MM_swapImage() { //v3.0
    var i,j=0,x,a=MM_sw apImage.argumen ts; document.MM_sr= new Array; for(i=0;i<(a.le ngth-2);i+=3)
    if ((x=MM_findObj( a[i]))!=null){docum ent.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    }
    //-->[/code][code=html]
    </script>
    </head>

    <body onLoad="MM_prel oadImages('imag es/legion1.png')">
    <table width="950" border="0" cellspacing="0" cellpadding="0" >
    <tr>
    <th scope="col"><a href="index.htm l" onMouseOut="MM_ swapImgRestore( )" onMouseOver="MM _swapImage('Ima ge8','','images/legion1.png',1) "><img src="images/legion.png" name="Image8" width="257" height="57" border="0"></a></th>
    <th scope="col"> </th>
    <th scope="col"> </th>
    </tr>
    </table>
    <table width="950" border="0" cellspacing="0" cellpadding="0" >
    <tr>
    <th scope="col"> </th>
    <div id="box" style="position :absolute; border:gray solid 1px;visibility: hidden;">
    <img onClick="O[0].clic();" src="newborn.jp g" title="The MusicRoom Series" alt="They explained a little about what they were doing.">
    <img onClick="O[1].clic();" src="majesty.jp g" title="The MusicRoom Series" alt="I hoped I wouldn´t crack under the strain.">
    <img onClick="O[2].clic();" src="whitemagic .jpg" title="The MusicRoom series" alt="Clearly they were ready to do almost anything to retain their position.">
    <img onClick="O[3].clic();" src="gazebo2k3. jpg" title="The MusicRoom Series" alt="I observed the face of power at its most mundane.">
    <img onClick="O[4].clic();" src="pyre.jpg" title="The MusicRoom Series" alt="But they couldn´t hide the very worst of their inhumane undertakings from the people.">
    <img onClick="O[5].clic();" src="singularit y.jpg" title="disdain" alt="They showed their utter, complete disdain for justice.">
    <img onClick="O[6].clic('http://www.dhteumeuleu .com');" src="spellcraft .jpg" title="never again" alt="Never more. Never again.">
    <span id="txt"></span>
    <span id="tit"></span>
    </div>

    <!-- crossbrowser images_loading_ bar - Gerard Ferrandez - www.dhteumeuleu.com - Feb 2005 -->
    <span id=LB0 style="position :absolute;left: 50%;top:50%;">< span style="position :absolute;font-family:arial;fo nt-size:10px;color :#FFFFFF;left:-50;top:-18">Loading.. .</span>
    <span style="position :absolute;left:-50;top:-5;font-size:1px;width: 100;height:10px ;background:#33 3"><span id=LB1 style="position :absolute;left: 0;top:0;font-size:1px;width: 0;height:10px;b ackground:#FFFF FF"></span></span></span>
    <script>m00=doc ument.getElemen tById("box").ge tElementsByTagN ame("img");m01= m00.length; function images_loading_ bar(){m02=0;for (i=0;i<m01;i++) m02+=(m00[i].complete)?1:0; document.getEle mentById("LB1") .style.width=Ma th.round(m02/m01*100); if(m02==m01)set Timeout("docume nt.getElementBy Id('LB0').style .display='none' ",128); else setTimeout("ima ges_loading_bar ()", 64);};images_lo ading_bar();</script>
    <!-- end of images_loading_ bar code -->
    </tr>
    </table>
    <table width="950" border="0" cellspacing="0" cellpadding="0" >
    <tr>
    <th scope="col"> </th>
    </tr>
    </table>
    <p> </p>
    <table width="950" border="0" cellspacing="0" cellpadding="0" >
    <tr>
    <th height="201" bgcolor="d8d8d8 " scope="col"> </th>
    </tr>
    </table>
    <p> </p>
    </body>
    </html>

    ____[/code]_______________ _______________ _____________
  • acoder
    Recognized Expert MVP
    • Nov 2006
    • 16032

    #2
    Probably caused by overwriting an event handler, so you should add events using the advanced event registration models as described here.

    Comment

    • gits
      Recognized Expert Moderator Expert
      • May 2007
      • 5390

      #3
      :) ... and avoid to use any of that dreamweaver-built-in javascript code that just always raise problems - except you know in depth what they have included here ... just use only one js-lib unless you know for certain that another will not interfer with each other ... or even your own code ... typical problems with interferences of libs are event-handlers, as acoder mentioned, often overwriting of extended array-methods, some dom-handling etc. ... so a good hint: 'just use and rely on one consistent js code (a lib or your own - or combine them to extend each other)' ...

      kind regards

      Comment

      Working...