By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,939 Members | 1,623 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,939 IT Pros & Developers. It's quick & easy.

dhtml conflict?

P: 1
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
__________________________________________________
_____
Expand|Select|Wrap|Line Numbers
  1.  
  2. <html>
  3.  
  4. <head>
  5. <title>imgPress - Interactive DHTML art-demos</title>
  6. <meta name="author" content="Gerard Ferrandez at http://www.dhteumeuleu.com">
  7. <meta http-equiv="imagetoolbar" content="no">
  8. <style type="text/css">
  9. body {margin:0; padding:0; position:absolute; overflow:hidden; background:#e8e8e8; left:0; top:0; width:1000%; height:100%;}
  10. img {position:absolute; border:gray solid 1px; cursorointer; width:257px; }
  11. span {position:absolute; color:#ccc; font-family:verdana; font-size: 12px; width:200px;}
  12. </style>
  13. <script type="text/javascript">
Expand|Select|Wrap|Line Numbers
  1. <!--
  2. // ==================================================
  3. ==
  4. // script: Gerard Ferrandez - Ge-1-doot - JANUARY 2005
  5. // news://news.leibowitz.org/nzn.fr.html
  6. // http://www.dhteumeuleu.com/
  7. // crossbrowser DOM
  8. // ==================================================
  9. ==
  10.  
  11. window.onerror = new Function("return true");
  12. document.onselectstart = new Function("return false");
  13. screen.bufferDepth = 16;
  14. O = new Array();
  15. box = 0;
  16. img = 0;
  17. txt = 0;
  18. tit = 0;
  19. W = 0;
  20. H = 0;
  21. nI = 0;
  22. sel = 0;
  23. si = 0;
  24.  
  25. //////////////////
  26. ZOOM = 4;
  27. rImg = 1.33;
  28. speed = .1;
  29. //////////////////
  30.  
  31. function dText(){
  32. txt.style.textAlign = tit.style.textAlign = (sel<nI/2)?"left":"right";
  33. txt.innerHTML = O[sel].tx;
  34. tit.innerHTML = O[sel].ti;
  35. }
  36.  
  37. function CObj(n, s, x, tx, ti){
  38. this.n = n;
  39. this.dim = s;
  40. this.tx = tx;
  41. this.ti = ti;
  42. this.is = img[n];
  43. this.vz = 0;
  44. this.sx = 0;
  45. this.x0 = x;
  46. this.x1 = 0;
  47. this.zo = 0;
  48.  
  49. this.clic = function(hlink) {
  50. with(this){
  51. if(n!=sel){
  52. O[sel].is.style.cursor = "pointer";
  53. if(!hlink)O[n].is.style.cursor = "default";
  54. O[sel].dim = 100;
  55. O[n].dim = ZOOM * 100;
  56. sel = n;
  57. l = 0;
  58. for(k=0; k<nI; k++){
  59. O[k].x0 = l;
  60. l += O[k].dim;
  61. }
  62. txt.innerHTML = tit.innerHTML = "";
  63. setTimeout("dText()", 32);
  64. } else {
  65. // ==== open hyperlink window
  66. if(hlink)window.open(hlink,"_blank");
  67. }
  68. }
  69. }
Expand|Select|Wrap|Line Numbers
  1.  
  2. this.anim = function () {
  3. with(this){
  4. vz = speed*(vz+(x1-sx)*.5);
  5. x1 -= vz;
  6. sx = (n==0)?0:O[n-1].x0+O[n-1].dim;
  7. zo -= (zo-dim)*speed;
  8. l = Math.round((x1*si)+6*(n+1));
  9. w = Math.round(zo*si);
  10. is.style.left = l;
  11. is.style.top = (H-w*rImg)*.5;
  12. is.style.width = w;
  13. is.style.height = w*rImg;
  14. if(sel == n){
  15. if(sel<nI*.5)tit.style.left = txt.style.left = l+w+6;
  16. else tit.style.left = txt.style.left = l-(nx*.25)-6;
  17. txt.style.top = -(w*rImg)*.25;
  18. tit.style.top = (w*rImg)*.33;
  19. }
  20. }
  21. }
  22. }
  23.  
  24. function run(){
  25. for(j in O)O[j].anim();
  26. setTimeout("run()", 16);
  27. }
  28.  
  29. function doResize(){
  30. tit.style.width = nx*.25;
  31. txt.style.width = nx*.25;
  32. tit.style.fontSize = (nx / 30) + "px";
  33. txt.style.fontSize = (nx / 70) + "px";
  34. with(box.style){
  35. width = W;
  36. height = H;
  37. left = nx / 2 - W / 2;
  38. top = ny / 2 - H / 2;
  39. }
  40. }
Expand|Select|Wrap|Line Numbers
  1. function resize(){
  2. nx = document.body.offsetWidth;
  3. ny = document.body.offsetHeight;
  4. W = nx * 90 / 100;
  5. si = (W-((nI+1)*6))/((ZOOM*100)+((nI-1)*100));
  6. H = (100 * si * rImg) + 14;
  7. setTimeout("doResize()", 16);
  8. }
  9. onresize = resize;
  10.  
  11. onload = function(){
  12. box = document.getElementById("box");
  13. tit = document.getElementById("tit");
  14. txt = document.getElementById("txt");
  15. img = box.getElementsByTagName("img");
  16. nI = img.length;
  17. resize();
  18. s = ZOOM * 100;
  19. x = 0;
  20. tit.innerHTML = img[0].title;
  21. txt.innerHTML = img[0].alt;
  22. for(i=0; i<nI; i++) {
  23. O[i] = new CObj(i, s, x, img[i].alt, img[i].title);
  24. img[i].alt = "";
  25. img[i].title = "";
  26. img[i].onmousedown = new Function("return false;");
  27. x += s;
  28. s = 100;
  29. }
  30. O[0].is.style.cursor = "default";
  31. setTimeout("box.style.visibility='visible';",100);
  32. run();
  33. }
  34.  
  35. function MM_swapImgRestore() { //v3.0
  36. var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
  37. }
  38.  
  39. function MM_preloadImages() { //v3.0
  40. var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
  41. var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
  42. if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
  43. }
  44.  
  45. function MM_findObj(n, d) { //v4.01
  46. var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
  47. d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  48. if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  49. for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  50. if(!x && d.getElementById) x=d.getElementById(n); return x;
  51. }
  52.  
  53. function MM_swapImage() { //v3.0
  54. var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
  55. if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
  56. }
  57. //-->
Expand|Select|Wrap|Line Numbers
  1. </script>
  2. </head>
  3.  
  4. <body onLoad="MM_preloadImages('images/legion1.png')">
  5. <table width="950" border="0" cellspacing="0" cellpadding="0">
  6. <tr>
  7. <th scope="col"><a href="index.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image8','','images/legion1.png',1)"><img src="images/legion.png" name="Image8" width="257" height="57" border="0"></a></th>
  8. <th scope="col"> </th>
  9. <th scope="col"> </th>
  10. </tr>
  11. </table>
  12. <table width="950" border="0" cellspacing="0" cellpadding="0">
  13. <tr>
  14. <th scope="col"> </th>
  15. <div id="box" style="position:absolute; border:gray solid 1px;visibility:hidden;">
  16. <img onClick="O[0].clic();" src="newborn.jpg" title="The MusicRoom Series" alt="They explained a little about what they were doing.">
  17. <img onClick="O[1].clic();" src="majesty.jpg" title="The MusicRoom Series" alt="I hoped I wouldn´t crack under the strain.">
  18. <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.">
  19. <img onClick="O[3].clic();" src="gazebo2k3.jpg" title="The MusicRoom Series" alt="I observed the face of power at its most mundane.">
  20. <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.">
  21. <img onClick="O[5].clic();" src="singularity.jpg" title="disdain" alt="They showed their utter, complete disdain for justice.">
  22. <img onClick="O[6].clic('http://www.dhteumeuleu.com');" src="spellcraft.jpg" title="never again" alt="Never more. Never again.">
  23. <span id="txt"></span>
  24. <span id="tit"></span>
  25. </div>
  26.  
  27. <!-- crossbrowser images_loading_bar - Gerard Ferrandez - www.dhteumeuleu.com - Feb 2005 -->
  28. <span id=LB0 style="position:absolute;left:50%;top:50%;"><span style="position:absolute;font-family:arial;font-size:10px;color:#FFFFFF;left:-50;top:-18">Loading...</span>
  29. <span style="position:absolute;left:-50;top:-5;font-size:1px;width:100;height:10px;background:#333"><span id=LB1 style="position:absolute;left:0;top:0;font-size:1px;width:0;height:10px;background:#FFFFFF"></span></span></span>
  30. <script>m00=document.getElementById("box").getElementsByTagName("img");m01=m00.length; function images_loading_bar(){m02=0;for(i=0;i<m01;i++)m02+=(m00[i].complete)?1:0; document.getElementById("LB1").style.width=Math.round(m02/m01*100); if(m02==m01)setTimeout("document.getElementById('LB0').style.display='none'",128); else setTimeout("images_loading_bar()", 64);};images_loading_bar();</script>
  31. <!-- end of images_loading_bar code -->
  32. </tr>
  33. </table>
  34. <table width="950" border="0" cellspacing="0" cellpadding="0">
  35. <tr>
  36. <th scope="col"> </th>
  37. </tr>
  38. </table>
  39. <p> </p>
  40. <table width="950" border="0" cellspacing="0" cellpadding="0">
  41. <tr>
  42. <th height="201" bgcolor="d8d8d8" scope="col"> </th>
  43. </tr>
  44. </table>
  45. <p> </p>
  46. </body>
  47. </html>
  48.  
  49. ____
___________________________________________
Oct 2 '06 #1
Share this Question
Share on Google+
2 Replies


acoder
Expert Mod 15k+
P: 16,027
Probably caused by overwriting an event handler, so you should add events using the advanced event registration models as described here.
May 24 '08 #2

gits
Expert Mod 5K+
P: 5,390
:) ... 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
May 25 '08 #3

Post your reply

Sign in to post your reply or Sign up for a free account.