My website I'm building has various image Arrays, I have JS code passing data so an image in 1st page exp:[image5] loads into 2nd pages Array as [image5], it works in all browsers except Firefox where 1st page reloads to [image1] in 1st page Array. Being a newbie I can't seem to work around issue any suggestions are greatly appreciated!
darkRoom 0 Newbie Poster
Airshow 416 WiFi Lounge Lizard Team Colleague
DarkRoom,
There's not a lot to go on there.
For a diagnosis, you will have to post some actual code.
Airshow
darkRoom 0 Newbie Poster
DarkRoom,
There's not a lot to go on there.
For a diagnosis, you will have to post some actual code.
Airshow
Thank you for replying being new not really sure how much or which parts of code to submit for you to get an idea of the issue.
darkRoom 0 Newbie Poster
Hope this is what your looking for.
<head>
<script type="javascript/text">
function zoom()
{
document.location.replace("stevenbroadypfpaexl4.html?jss="+jss);
}
</script>
</head>
<body>
<FORM NAME="passed">
<INPUT TYPE="hidden" NAME="variable" SIZE="35">
</FORM>
<div id="apDiv1"><img src="images/P1s.jpg" name=PictureBox width=656 height=429 /></div>
<script type="text/javascript">
document.passed.variable.value = window.location
var number = document.passed.variable.value
function delineate(str){
theleft = str.indexOf("=") + 1;
theright = str.length;
if(theleft)
{
return Number(str.substring(theleft, theright));
}
else
{
return(1);
}
}
jss=delineate(number);
PictureBox.src=Picture[jss]
</script>
Airshow 416 WiFi Lounge Lizard Team Colleague
darkRoom,
Put this in document head (replacing current script):
<script type="javascript/text">
function QueryParser(str) {
/******************** Query Parser *********************
***** A general purpose querysrting parser/builder ****
********************* by Airshow **********************
********* Please keep this attribution intact *********/
if (str) {
str = unescape(str);
if (str.indexOf("?") === 0) { str = str.substring(1); }
var args = str.split("&");
for (var i = 0; i < args.length; i++) {
var pair = args[i].split("=");
if (pair.length >= 1) {
var prop = pair.shift();
this[prop] = (pair.length == 1) ? pair[0] : (pair.length > 1) ? pair.join('=') : '';
}
}
}
this.set = function (prop, value) { return this[prop] = value; };
this.clear = function (prop) {
if(typeof this[prop] !== 'undefined') {
this.set(prop, null);
return true;
}
else { return false; }
};
this.build = function (baseURL) {
baseURL = (!baseURL || typeof baseURL !== 'string') ? '' : (baseURL.indexOf("?") === -1) ? (baseURL + '?') : baseURL;
var strArray = [];
for (var prop in this) {
if (typeof this[prop] !== 'undefined' && typeof this[prop] !== 'function' && this[prop] !== null) { strArray.push([prop, '=', this[prop]].join('')); }
}
return baseURL + strArray.join('&');
};
this.buildLink = function (baseURL, linkTxt) {
var url = this.build(baseURL);
return [ '<a href="', url, '">', ((!linkTxt) ? url : linkTxt), '</a>' ].join('');
};
}
var $q = new QueryParser(location.search);
function zoom(jss){
// jss argumant is optional;
// if not passed, the existing value of $q.jss is used to build the new url
// if passed, the value of $q.jss is set to this value and used to build the new url
if(jss) { $q.set('jss', jss); }
document.location.replace($q.build('stevenbroadypfpaexl4.html');
}
onload = function(){
//This will run as soon as the page is loaded
var p = document.getElementById('PictureBox');
if(p && $q.jss){ PictureBox.src = Picture[$q.jss]; }
}
</script>
Then delete the script in the document body.
Then, in the document body:
//-- change
<div id="apDiv1"><img src="images/P1s.jpg" name="PictureBox" width="656" height="429" /></div>
//-- to
<div id="apDiv1"><img src="images/P1s.jpg" id="PictureBox" width="656" height="429" /></div>
The code centres around $q, an instance of my QueryParser
object, which automatically parses the querystring of the page's url and makes each parameter available as $q.paramX
, $q.paramY
, $q.paramZ
(fictitious param names). $q
also has methods to set and clear parameters individually prior to either building a url or HTML link, with querystring composed from its current properties.
If you need to build url(s)/link(s) which is comletely independent of the current page's url, then you can create further instance(s) of QueryParser
.
Enjoy.
Airshow
darkRoom 0 Newbie Poster
Well I reworked document but maybe I'm missing or not understanding something, or maybe you need to see whole document to make it work. At this point with your script which seems amazing and somewhat unintelligible to this novice, I get no reaction from the button that replaces page(zoom)using onclick="QueryParser()". What I don't grasp in all of this is why in all other browsers url gets passed through <Form> but Firefox doesn't. Sorry don't mean to be a pain in the ass asking silly questions, but I really would like to understand, learn so I can do JS properly.
Airshow 416 WiFi Lounge Lizard Team Colleague
darkRoom,
Please don't worry about asking questions. Javascript is superficialy simple but hides a multidude of complexity.
The script I posted above is designed to go in your 2nd page(s) in order to receive and act on parameter(s) passed from 1st page. You may leave your 1st page as it was.
You don't need to call QueryParser
as it is called by the line var $q = new QueryParser(location.search);
thus making the global object $q with properties reflecting the parameters passed in the url's querystring.
For example:
Page URL: myPage2.html?name=Fred&birthday=01/01/1985&iq=110
With QueryParser, the parameters name
, birthday
, iq
become accessible in Javascript as:
$q.name
: Fred$q.birthday
: 01/01/1985$q.iq
: 110
So this is a way to pass values from one page to another. (Other methods involve cookies or server-side scripting).
I hope this better explains how to use my code.
Airshow
Edited by mike_2000_17 because: Fixed formatting
darkRoom 0 Newbie Poster
I placed your script in 2 test pages (orig and enlarge) of my site so in theory it should work. I may be overreaching on construction my first site but being a retouching site it has to be technically and graphically engaging. It has 4 image example pages (about 10 images in each Array) each being able to zoom in and out (switching pages) by pressing a button(image) to allow visitors to better examine my work (it also has flash pages those I'm not worried about) by pressing zoom button new page loads either enlarged or reduced depending where you are at. I don't have my site up yet otherwise I would send a visual which may help not sure how else to facilitate your trying to solve my problem.
darkRoom 0 Newbie Poster
Ok so I got half my problem solved by adding return false; in the head script and return before onclick to the button .it will open proper page but won't pass array data
Airshow 416 WiFi Lounge Lizard Team Colleague
darkRoom,
I will see if I can find time to make a two-page demo showing how to use the code.
Airshow
darkRoom 0 Newbie Poster
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="creator" content="Steven Broady-stevenbroady.com" />
<meta name="keywords" content="retoucher, retouching, digital, photographic, ; Beauty, Fashion, Product, Composite, Design, Color Correction, Output" />
<meta name="description" content="This site is dedicated to the Retouching of digital media for Print and Web." />
<title>Steven Broady Portfolio Propery & Assets</title>
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
<script src="Scripts/buttons.js" type="text/javascript"></script>
<script type="text/javascript">
// (C) 2003 by CodeLifter.com
// Free for all users, but leave in this header.
// Edits by Steve Broady & Chris Mondok.
var Picture = new Array();
var Zipfile = new Array();
var showHot = false;
Picture[1] = 'images/P1s.jpg';
Picture[2] = 'images/P2s.jpg';
Picture[3] = 'images/P3s.jpg';
Picture[4] = 'images/P4s.jpg';
Picture[5] = 'images/P5s.jpg';
Picture[6] = 'images/P6s.jpg';
Picture[7] = 'images/P7s.jpg';
Picture[8] = 'images/P8s.jpg';
Picture[9] = 'images/P9s.jpg';
Picture[10] = 'images/P10s.jpg';
Zipfile[1] = 'images/P1.zip';
Zipfile[2] = 'images/P2.zip';
Zipfile[3] = 'images/P3.zip';
Zipfile[4] = 'images/P4.zip';
Zipfile[5] = 'images/P5.zip';
Zipfile[6] = 'images/P6.zip';
Zipfile[7] = 'images/P7.zip';
Zipfile[8] = 'images/P8.zip';
Zipfile[9] = 'images/P9.zip';
Zipfile[10] = 'images/P10.zip';
var tss;
var iss;
var jss = 1;
var pss = Picture.length-1;
var preLoad = new Array();
for (iss = 1; iss < pss+1; iss++){
preLoad[iss] = new Image();
preLoad[iss].src = Picture[iss];}
function download() {
newwindow=window.open(Zipfile[jss],'Download zipped file');
if (window.focus) {newwindow.focus()}
return false;
}
function zoom()
{
window.location.replace("stevenbroadypfpaexl2.html?jss="+jss);
return false;
}
function control(how){
if (showHot){
if (how=="H") jss = 1;
if (how=="F") jss = jss + 1;
if (how=="B") jss = jss - 1;
if (jss > (pss)) jss=1;
if (jss < 1) jss = pss;
document.images.PictureBox.src = preLoad[jss].src;
}}
</script>
<link href="Scripts/SBsmFL.css" rel="stylesheet" type="text/css" />
</head>
<div id="apDiv18"><body onload='showHot=true;self.focus();' bgcolor=#000000'>"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')"
</div>
<!--MAIN -->
<!--this form allows variables to be passed-->
<FORM NAME="passed">
<INPUT TYPE="hidden" NAME="variable" SIZE="35">
</FORM>
<div id="apDiv1"><img id="PictureBox" src="images/P1s.jpg" value="PictureBox" width=656 height=429 /></div>
<script type="text/javascript">
document.passed.variable.value = window.location
var number = document.passed.variable.value
function delineate(str){
theleft = str.indexOf("=") + 1;
theright = str.length;
if(theleft)
{
return(Number(str.substring(theleft, theright)));
}
else
{
return(1);
}
}
jss=delineate(number);
PictureBox.src=Picture[jss]
</script>
<div id="apDiv3"><img src="images/CP.png" width="977" height="768" alt="CP" /></div>
<div id="apDiv4"><img src="images/portfolio.png" width="977" height="768" alt="pfmenu" /></div>
<!--BUTTONS -->
<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>
</div>
<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>
<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>
<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>
<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>
<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>
<!--CONTROLLER -->
<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>
<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>
<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>
<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>
<!--SOUND & DL -->
<div id="apDiv15"></div>
<div id="apDiv16">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="54" height="173" id="FlashID" title="VOLUME">
<param name="movie" value="soundSlider3.swf" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="6.0.65.0" />
<!-- 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. -->
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="soundSlider3.swf" width="54" height="173">
<!--<![endif]-->
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="6.0.65.0" />
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
<div>
<h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
<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>
</div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>
<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>
<script type="text/javascript">
<!--
swfobject.registerObject("FlashID");
//-->
</script>
</body>
</html>
P2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="creator" content="Steven Broady-stevenbroady.com" />
<meta name="keywords" content="retoucher, retouching, digital, photographic, ; Beauty, Fashion, Product, Composite, Design, Color Correction, Output" />
<meta name="description" content="This site is dedicated to the Retouching of digital media for Print and Web." />
<title>Steven Broady Property & Assets Lg</title>
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
<script src="Scripts/LGcon.js" type="text/javascript"></script>
<script type="text/javascript">
// (C) 2003 by CodeLifter.com
// Free for all users, but leave in this header.
//Edited by Steven Broady.
var Picture = new Array();
var Caption = new Array();
var showHot = false;
Picture[1] = 'images/P1.jpg';
Picture[2] = 'images/P2.jpg';
Picture[3] = 'images/P3.jpg';
Picture[4] = 'images/P4.jpg';
Picture[5] = 'images/P5.jpg';
Picture[6] = 'images/P6.jpg';
Picture[7] = 'images/P7.jpg';
Picture[8] = 'images/P8.jpg';
Picture[9] = 'images/P9.jpg';
Picture[10] = 'images/P10.jpg';
var tss;
var iss;
var jss = 1;
var pss = Picture.length-1;
var preLoad = new Array();
for (iss = 1; iss < pss+1; iss++){
preLoad[iss] = new Image();
preLoad[iss].src = Picture[iss];}
function control(how){
if (showHot){
if (how=="H") jss = 1;
if (how=="F") jss = jss + 1;
if (how=="B") jss = jss - 1;
if (jss > (pss)) jss=1;
if (jss < 1) jss = pss;
document.images.PictureBox.src = preLoad[jss].src;
}}
function zoom()
{
document.location.replace("stevenbroadypfpaex1.html?jss="+jss);
return false;
}
</script>
<link href="Scripts/SBlgFL.css" rel="stylesheet" type="text/css" />
</head>
<div id="apDiv8"><body onload='showHot=true;self.focus();' bgcolor=#000000'>
<!--
"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')"
-->
</div>
<!--MAIN -->
<!--this form allows variables to be passed-->
<FORM NAME="passed">
<INPUT TYPE="hidden" NAME="variable" SIZE="35">
</FORM>
<div id='apDiv1'><img src=images/P1.jpg name=PictureBox width=970 height=629 /></div>
<script type="text/javascript">
document.passed.variable.value = window.location
var number = document.passed.variable.value
function delineate(str){
theleft = str.indexOf("=") + 1;
theright = str.length;
if(theleft)
{
return(Number(str.substring(theleft, theright)));
}
else
{
return(1);
}
}
jss=delineate(number);
PictureBox.src=Picture[jss]
</script>
<div id="apDiv2"><img src="images/CP_L.png" width="1024" height="768" alt="cpl" /></div>
<!--CONTROLLER -->
<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>
<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>
<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>
<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>
<!--SOUND & DL -->
<div id="apDiv7">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="38" height="127" id="FlashID" title="VOLUME">
<param name="movie" value="soundSlider3L.swf" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="6.0.65.0" />
<!-- 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. -->
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="soundSlider3L.swf" width="38" height="127">
<!--<![endif]-->
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="6.0.65.0" />
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
<div>
<h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
<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>
</div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>
<script type="text/javascript">
<!--
swfobject.registerObject("FlashID");
//-->
</script>
</body>
</html>
Airshow 416 WiFi Lounge Lizard Team Colleague
darkRoom,
Firstly, in both files there is a problem at the <body>
tag. You should change:
<div id="apDiv8"><body onload='showHot=true;self.focus();' bgcolor=#000000'>
......
</div>
to
<body onload='showHot=true;self.focus();' bgcolor=#000000'>
<div id="apDiv8">......</div>
Secondly, in p2 there is a problem with the line:
<div id='apDiv1'><img src=images/P1.jpg name=PictureBox width=970 height=629 /></div>
Change it to :
<div id='apDiv1'><img src="images/P1.jpg" id="PictureBox" name="PictureBox" width="970" height="629" /></div>
Then in javascript, you need to change:
PictureBox.src=Picture[jss]
to
document.getElementById('PictureBox').src = Picture[jss];
That will at least give you a fighting chance.
Airshow
Edited by Airshow because: n/a
Airshow 416 WiFi Lounge Lizard Team Colleague
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
This attachment is potentially unsafe to open. It may be an executable that is capable of making changes to your file system, or it may require specific software to open. Use caution and only open this attachment if you are comfortable working with x-rar files.
darkRoom commented: He's the man your patience and thoroughness helped me greatly! THANKS!! +1
Be a part of the DaniWeb community
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.