944,051 Members | Top Members by Rank

Web Development > JavaScript / DHTML / AJAX > Passing from image Array in url
Ad:
You are currently viewing page 2 of this multi-page discussion thread; Jump to the first page
Permalink
Oct 23rd, 2009
0
Re: Passing from image Array in url
Airshow here is all the code fo both pages. I'm getting in message Error Console PictureBox is not defined indicating this is problem PictureBox.src=Picture[jss]
P1
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5. <meta name="creator" content="Steven Broady-stevenbroady.com" />
  6. <meta name="keywords" content="retoucher, retouching, digital,  photographic, ; Beauty, Fashion, Product, Composite, Design, Color Correction, Output" />
  7. <meta name="description" content="This site is dedicated to the Retouching of digital media for Print and Web." />
  8. <title>Steven Broady Portfolio Propery & Assets</title>
  9.  
  10.  
  11. <script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
  12.  
  13. <script src="Scripts/buttons.js" type="text/javascript"></script>
  14.  
  15.  
  16. <script type="text/javascript">
  17.  
  18. // (C) 2003 by CodeLifter.com
  19. // Free for all users, but leave in this header.
  20. // Edits  by Steve Broady & Chris Mondok.
  21.  
  22.  
  23.  
  24. var Picture = new Array(); 
  25. var Zipfile = new Array(); 
  26. var showHot = false; 
  27.  
  28. Picture[1]  = 'images/P1s.jpg';
  29. Picture[2]  = 'images/P2s.jpg';
  30. Picture[3]  = 'images/P3s.jpg';
  31. Picture[4]  = 'images/P4s.jpg';
  32. Picture[5]  = 'images/P5s.jpg';
  33. Picture[6]  = 'images/P6s.jpg';
  34. Picture[7]  = 'images/P7s.jpg';
  35. Picture[8]  = 'images/P8s.jpg';
  36. Picture[9]  = 'images/P9s.jpg';
  37. Picture[10] = 'images/P10s.jpg';
  38.  
  39.  
  40. Zipfile[1]  = 'images/P1.zip';
  41. Zipfile[2]  = 'images/P2.zip';
  42. Zipfile[3]  = 'images/P3.zip';
  43. Zipfile[4]  = 'images/P4.zip';
  44. Zipfile[5]  = 'images/P5.zip';
  45. Zipfile[6]  = 'images/P6.zip';
  46. Zipfile[7]  = 'images/P7.zip';
  47. Zipfile[8]  = 'images/P8.zip';
  48. Zipfile[9]  = 'images/P9.zip';
  49. Zipfile[10] = 'images/P10.zip';
  50.  
  51.  
  52. var tss;
  53. var iss;
  54. var jss = 1;
  55. var pss = Picture.length-1;
  56.  
  57. var preLoad = new Array();
  58. for (iss = 1; iss < pss+1; iss++){
  59. preLoad[iss] = new Image();
  60. preLoad[iss].src = Picture[iss];}
  61.  
  62. function download() {
  63. newwindow=window.open(Zipfile[jss],'Download zipped file');
  64. if (window.focus) {newwindow.focus()}
  65. return false;
  66. }
  67.  
  68. function zoom()
  69.   {
  70.  
  71.   window.location.replace("stevenbroadypfpaexl2.html?jss="+jss);
  72.  
  73. return false;
  74.  
  75.   }
  76.  
  77. function control(how){
  78. if (showHot){
  79. if (how=="H") jss = 1;
  80. if (how=="F") jss = jss + 1;
  81. if (how=="B") jss = jss - 1;
  82. if (jss > (pss)) jss=1;
  83. if (jss < 1) jss = pss;
  84.  
  85. document.images.PictureBox.src = preLoad[jss].src;
  86. }}
  87.  
  88. </script>
  89.  
  90. <link href="Scripts/SBsmFL.css" rel="stylesheet" type="text/css" />
  91.  
  92. </head>
  93.  
  94. <div id="apDiv18"><body onload='showHot=true;self.focus();' bgcolor=#000000'>&quot;MM_preloadImages('soundSlider3.swf','images/controller_diskback.png','images/button_3.png','images/button_2.png','images/button_4.png','images/button_1','images/controller_zoomover.png','images/controller_diskzoom.png','images/controller_playover.png','images/controller_diskplay.png','images/controller_backover.png','images/controller_diskback.png','images/controller_fwrdover.png','images/controller_diskfwrd.png','images/dlover.png','images/dl.png','images/F1s.jpg','images/F2s.jpg','images/F3s.jpg','images/F4s.jpg','images/F5s.jpg','images/F6s.jpg','images/F7s.jpg','images/F8s.jpg','images/F9s.jpg','images/F10s.jpg','images/F11s.jpg','images/F12s.jpg','images/F13s.jpg','images/F14s.jpg','images/F15s.jpg')&quot;
  95. </div>
  96.  
  97.  
  98.  
  99. <!--MAIN -->
  100. <!--this form allows variables to be passed-->
  101. <FORM NAME="passed">
  102. <INPUT TYPE="hidden" NAME="variable" SIZE="35">
  103. </FORM>
  104. <div id="apDiv1"><img id="PictureBox" src="images/P1s.jpg"  value="PictureBox" width=656 height=429 /></div>
  105. <script type="text/javascript">
  106.  
  107. document.passed.variable.value = window.location
  108. var number = document.passed.variable.value
  109.  
  110. function delineate(str){
  111. theleft = str.indexOf("=") + 1;
  112. theright = str.length;
  113. if(theleft)
  114. 	{
  115. 	return(Number(str.substring(theleft, theright)));
  116. 	}
  117. else
  118. 	{
  119. 	return(1);
  120. 	}
  121. }
  122. jss=delineate(number);
  123. PictureBox.src=Picture[jss]
  124.  
  125. </script>
  126.  
  127.  
  128. <div id="apDiv3"><img src="images/CP.png" width="977" height="768" alt="CP" /></div>
  129.  
  130.  
  131. <div id="apDiv4"><img src="images/portfolio.png" width="977" height="768" alt="pfmenu" /></div>
  132.  
  133.  
  134.  
  135. <!--BUTTONS -->
  136.  
  137. <div id="apDiv5"></a><a href="stevenbroadymm.html" onclick="MM_swapImage('PM','','images/button_4.png',1)" onmousedown="MM_swapImage('PM','','images/button_3.png',1)" onmouseover="MM_swapImage('PM','','images/button_2.png',1)" onmouseout="MM_swapImgRestore()"><img src="images/button_1.png" name="PM" width="125" height="125" border="0" id="PM" /></a>
  138. </div>
  139.  
  140. <div id="apDiv6"><a href="stevenbroadypffbex.html" onclick="MM_swapImage('Image6','','images/button_4.png',1)" onmousedown="MM_swapImage('Image6','','images/button_3.png',1)" onmouseover="MM_swapImage('Image6','','images/button_2.png',1)" onmouseout="MM_swapImgRestore()"><img src="images/button_1.png" name="Image6" width="125" height="125" border="0" id="Image6" /></a></div>
  141.  
  142. <div id="apDiv7" title="DISABLED"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image3','','images/button_4.png',1)"><img src="images/button_1.png" name="Image19" width="125" height="125" border="0" id="Image3" /></a></div>
  143.  
  144. <div id="apDiv8"><a href="stevenbroadypfdcex.html" onclick="MM_swapImage('Image8','','images/button_4.png',1)" onmousedown="MM_swapImage('Image8','','images/button_3.png',1)" onmouseover="MM_swapImage('Image8','','images/button_2.png',1)" onmouseout="MM_swapImgRestore()"><img src="images/button_1.png" name="Image8" width="125" height="125" border="0" id="Image6" /></a></div>
  145.  
  146. <div id="apDiv9"><a href="stevenbroadypfccex.html" onclick="MM_swapImage('Image9','','images/button_4.png',1)" onmousedown="MM_swapImage('Image9','','images/button_3.png',1)" onmouseover="MM_swapImage('Image9','','images/button_2.png',1)" onmouseout="MM_swapImgRestore()"><img src="images/button_1.png" name="Image9" width="125" height="125" border="0" id="Image6" /></a></div>
  147.  
  148. <div id="apDiv10"><a href="stevenbroadypfpaex.html" onclick="MM_swapImage('Image10','','images/button_4.png',1)" onmousedown="MM_swapImage('Image10','','images/button_3.png',1)" onmouseover="MM_swapImage('Image10','','images/button_2.png',1)" onmouseout="MM_swapImgRestore()"><img src="images/button_1.png" name="Image10" width="125" height="125" border="0" id="Image6" /></a></div>
  149.  
  150.  
  151.  
  152. <!--CONTROLLER -->
  153.  
  154. <div id="apDiv11" title="ZOOM"><a href="#" onclick="return zoom()" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image11','','images/controller_zoomover.png',1)"><img src="images/controller_diskzoom.png" name="Image11" width="34" height="26" border="0" id="Image11" /></a></div>
  155.  
  156. <div id="apDiv12" title="PLAY"><a href="stevenbroadypfpa.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image12','','images/controller_playover.png',1)"><img src="images/controller_diskplay.png" name="Image12" width="34" height="26" border="0" id="Image12" /></a></div>
  157.  
  158. <div id="apDiv13" title="BACKWARD"><a class=Controls href="#" onclick="javascript:control('B');"onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image13','','images/controller_backover.png',1)"><img src="images/controller_diskback.png" name="Image13" width="34" height="26" border="0" id="Image13" /></a></div>
  159.  
  160. <div id="apDiv14" title="FORWARD"><a class=Controls href="#" onclick="javascript:control('F');"onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image14','','images/controller_fwrdover.png',1)"><img src="images/controller_diskfwrd.png" name="Image14" width="34" height="26" border="0" id="Image14" /></a></div>
  161.  
  162.  
  163. <!--SOUND & DL -->
  164.  
  165. <div id="apDiv15"></div>
  166.  
  167. <div id="apDiv16">
  168.   <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="54" height="173" id="FlashID" title="VOLUME">
  169.     <param name="movie" value="soundSlider3.swf" />
  170.     <param name="quality" value="high" />
  171.     <param name="wmode" value="opaque" />
  172.     <param name="swfversion" value="6.0.65.0" />
  173.     <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
  174.     <param name="expressinstall" value="Scripts/expressInstall.swf" />
  175.     <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
  176.     <!--[if !IE]>-->
  177.     <object type="application/x-shockwave-flash" data="soundSlider3.swf" width="54" height="173">
  178.       <!--<![endif]-->
  179.       <param name="quality" value="high" />
  180.       <param name="wmode" value="opaque" />
  181.       <param name="swfversion" value="6.0.65.0" />
  182.       <param name="expressinstall" value="Scripts/expressInstall.swf" />
  183.       <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
  184.       <div>
  185.         <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
  186.         <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
  187.       </div>
  188.       <!--[if !IE]>-->
  189.     </object>
  190.     <!--<![endif]-->
  191.   </object>
  192. </div>
  193.  
  194. <div id="apDiv17" title="DOWNLOAD"><a href="#" onclick="return download()" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image17','','images/dlover.png',1)"><img src="images/dl.png" name="Image17" width="76" height="76" border="0" id="Image17" /></a></div>
  195. <script type="text/javascript">
  196. <!--
  197. swfobject.registerObject("FlashID");
  198. //-->
  199. </script>
  200. </body>
  201. </html>
  202. P2
  203. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  204. <html xmlns="http://www.w3.org/1999/xhtml">
  205. <head>
  206. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  207. <meta name="creator" content="Steven Broady-stevenbroady.com" />
  208. <meta name="keywords" content="retoucher, retouching, digital,  photographic, ; Beauty, Fashion, Product, Composite, Design, Color Correction, Output" />
  209. <meta name="description" content="This site is dedicated to the Retouching of digital media for Print and Web." />
  210. <title>Steven Broady Property & Assets Lg</title>
  211.  
  212. <script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
  213.  
  214. <script src="Scripts/LGcon.js" type="text/javascript"></script>
  215. <script type="text/javascript">
  216.  
  217. // (C) 2003 by CodeLifter.com
  218. // Free for all users, but leave in this header.
  219. //Edited by Steven Broady.
  220.  
  221. var Picture = new Array();
  222. var Caption = new Array();
  223. var showHot = false;      
  224.  
  225. Picture[1]  = 'images/P1.jpg';
  226. Picture[2]  = 'images/P2.jpg';
  227. Picture[3]  = 'images/P3.jpg';
  228. Picture[4]  = 'images/P4.jpg';
  229. Picture[5]  = 'images/P5.jpg';
  230. Picture[6]  = 'images/P6.jpg';
  231. Picture[7]  = 'images/P7.jpg';
  232. Picture[8]  = 'images/P8.jpg';
  233. Picture[9]  = 'images/P9.jpg';
  234. Picture[10] = 'images/P10.jpg';
  235.  
  236. var tss;
  237. var iss;
  238. var jss = 1;
  239. var pss = Picture.length-1;
  240.  
  241. var preLoad = new Array();
  242. for (iss = 1; iss < pss+1; iss++){
  243. preLoad[iss] = new Image();
  244. preLoad[iss].src = Picture[iss];}
  245.  
  246. function control(how){
  247. if (showHot){
  248. if (how=="H") jss = 1;
  249. if (how=="F") jss = jss + 1;
  250. if (how=="B") jss = jss - 1;
  251. if (jss > (pss)) jss=1;
  252. if (jss < 1) jss = pss;
  253.  
  254.  
  255.  
  256. document.images.PictureBox.src = preLoad[jss].src;
  257. }}
  258.  
  259. function zoom()
  260.   {
  261.   document.location.replace("stevenbroadypfpaex1.html?jss="+jss);
  262.  
  263.   return false;
  264.   }
  265.  
  266. </script>
  267.  
  268. <link href="Scripts/SBlgFL.css" rel="stylesheet" type="text/css" />
  269.  
  270. </head>
  271.  
  272. <div id="apDiv8"><body onload='showHot=true;self.focus();' bgcolor=#000000'>
  273. <!--
  274. &quot;MM_preloadImages('soundSlider3L.swf','images/CP_L.png','images/controller_zoomoverL2.png','images/controller_diskzoomL2.png','images/controller_playoverL2.png','images/controller_diskplayL2.png','images/controller_backoverL2.png','images/controller_diskbackL2.png','images/controller_diskfwrdL2.png','images/controller_fwrdoverL2.png','images/P1.jpg','images/P2.jpg','images/P3.jpg','images/P4.jpg','images/P5.jpg','images/P6.jpg','images/F7.jpg','images/P8.jpg','images/P9.jpg','images/P10.jpg')&quot;
  275. -->
  276. </div>
  277.  
  278.  
  279. <!--MAIN -->
  280. <!--this form allows variables to be passed-->
  281. <FORM NAME="passed">
  282. <INPUT TYPE="hidden" NAME="variable" SIZE="35">
  283. </FORM>
  284. <div id='apDiv1'><img src=images/P1.jpg name=PictureBox width=970 height=629 /></div>
  285. <script type="text/javascript">
  286. document.passed.variable.value = window.location
  287. var number = document.passed.variable.value
  288.  
  289. function delineate(str){
  290. theleft = str.indexOf("=") + 1;
  291. theright = str.length;
  292. if(theleft)
  293. 	{
  294. 	return(Number(str.substring(theleft, theright)));
  295. 	}
  296. else
  297. 	{
  298. 	return(1);
  299. 	}
  300. }
  301. jss=delineate(number);
  302. PictureBox.src=Picture[jss]
  303.  
  304. </script>
  305.  
  306. <div id="apDiv2"><img src="images/CP_L.png" width="1024" height="768" alt="cpl" /></div>
  307.  
  308.  
  309.  
  310. <!--CONTROLLER -->
  311.  
  312. <div id="apDiv3" title="ZOOM OUT"><a href="#" onclick="return zoom()" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image3','','images/controller_zoomoverL2.png',1)"><img src="images/controller_diskzoomL2.png" name="Image3" width="30" height="23" border="0" id="Image3" /></a></div>
  313.  
  314. <div id="apDiv4" title="PLAY"><a href="stevenbroadypfpal.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image4','','images/controller_playoverL2.png',1)"><img src="images/controller_diskplayL2.png" name="Image4" width="30" height="23" border="0" id="Image4" /></a></div>
  315.  
  316. <div id="apDiv5" title="BACKWARD"><a class=Controls href="#" onclick="javascript:control('B');"onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image13','','images/controller_backover.png',1)"><img src="images/controller_diskback.png" name="Image13" width="34" height="26" border="0" id="Image13" /></a></div>
  317.  
  318. <div id="apDiv6" title="FORWARD"><a class=Controls href="#" onclick="javascript:control('F');"onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image14','','images/controller_fwrdover.png',1)"><img src="images/controller_diskfwrd.png" name="Image14" width="34" height="26" border="0" id="Image14" /></a></div>
  319.  
  320.  
  321.  
  322. <!--SOUND & DL -->
  323.  
  324. <div id="apDiv7">
  325.   <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="38" height="127" id="FlashID" title="VOLUME">
  326.     <param name="movie" value="soundSlider3L.swf" />
  327.     <param name="quality" value="high" />
  328.     <param name="wmode" value="opaque" />
  329.     <param name="swfversion" value="6.0.65.0" />
  330.     <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
  331.     <param name="expressinstall" value="Scripts/expressInstall.swf" />
  332.     <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
  333.     <!--[if !IE]>-->
  334.     <object type="application/x-shockwave-flash" data="soundSlider3L.swf" width="38" height="127">
  335.       <!--<![endif]-->
  336.       <param name="quality" value="high" />
  337.       <param name="wmode" value="opaque" />
  338.       <param name="swfversion" value="6.0.65.0" />
  339.       <param name="expressinstall" value="Scripts/expressInstall.swf" />
  340.       <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
  341.       <div>
  342.         <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
  343.         <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
  344.       </div>
  345.       <!--[if !IE]>-->
  346.     </object>
  347.     <!--<![endif]-->
  348.   </object>
  349. </div>
  350. <script type="text/javascript">
  351. <!--
  352. swfobject.registerObject("FlashID");
  353. //-->
  354. </script>
  355. </body>
  356. </html>
Reputation Points: 10
Solved Threads: 0
Newbie Poster
darkRoom is offline Offline
8 posts
since Oct 2009
Permalink
Oct 23rd, 2009
0
Re: Passing from image Array in url
darkRoom,

Firstly, in both files there is a problem at the <body> tag. You should change:
HTML Syntax (Toggle Plain Text)
  1. <div id="apDiv8"><body onload='showHot=true;self.focus();' bgcolor=#000000'> 
  2. ......
  3. </div>
to
HTML Syntax (Toggle Plain Text)
  1. <body onload='showHot=true;self.focus();' bgcolor=#000000'> 
  2. <div id="apDiv8"> ......</div>
Secondly, in p2 there is a problem with the line:
HTML Syntax (Toggle Plain Text)
  1. <div id='apDiv1'><img src=images/P1.jpg name=PictureBox width=970 height=629 /></div>
Change it to :
HTML Syntax (Toggle Plain Text)
  1. <div id='apDiv1'><img src="images/P1.jpg" id="PictureBox" name="PictureBox" width="970" height="629" /></div>
Then in javascript, you need to change:
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. PictureBox.src=Picture[jss]
to
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. document.getElementById('PictureBox').src = Picture[jss];
That will at least give you a fighting chance.

Airshow
Last edited by Airshow; Oct 23rd, 2009 at 7:37 pm.
Sponsor
Reputation Points: 318
Solved Threads: 358
WiFi Lounge Lizard
Airshow is offline Offline
2,527 posts
since Apr 2009
Permalink
Oct 23rd, 2009
1
Re: Passing from image Array in url
darkRoom,

Here's a demo showing how to use my QueryParser object for passing parameters from page to page.

Three files attached (zipped together) - save all to same directory then browse demo_1.html.

Rest should be self-explanatory.

View source to see how it works.

Airshow
Attached Files
File Type: zip darkroom.zip (2.1 KB, 11 views)
Sponsor
Reputation Points: 318
Solved Threads: 358
WiFi Lounge Lizard
Airshow is offline Offline
2,527 posts
since Apr 2009

This thread is solved

Either the thread starter or a moderator has marked this thread as solved. You can most likely trust the responses and answers given. There is most likely no reason for any further responses to be posted here. If you have a related question, please start a new thread in this forum instead.

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: Save real-time data in client PC
Next Thread in JavaScript / DHTML / AJAX Forum Timeline: Is it possible detect browser process termination?





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC