Creating a simple drop down box!

Mint_Sauce

Mint_Sauce

Mint_Sauce

Soldato
Joined
25 Sep 2003
Posts
3,750
Location
Manchester
I'm trying to create a simple drop down box that will then change a flash file in the center of the page but i've no idea. This is what I have so far. How can I go about passing the drop down box value to the flash file?

e.g. On The Beach would be beach.ivp

Code: 
<HTML>
<HEAD>
<TITLE>Lyme Regis Tour</TITLE>
</HEAD>
<BODY>

<center>

<font face="arial" size="2">
<H1>Lyme Regis Tour </H1>
</font>

<table width="780" border="0">
  <tr>
    <td><select name="jumpto">
      <option value="townmill_bakery_hdrblended.ivp">The Town Mill Bakery</option>
      <option>On The Beach</option>
      <option>Sandy Area</option>
      <option>The Cob</option>
      <option>The Cob end</option>
      <option>Boats</option>
            </select></td>
  </tr>
  <tr>
    <td><applet archive="PurePlayerPro.jar" code="PurePlayerPro" width="640" height="480">
      <param name="panorama" value="townmill_bakery_hdrblended.ivp">
      <param name="optimizememory" value="true">
    </applet></td>
  </tr>
</table>

</center>

</BODY>
</HTML>

My research seems to point that I should use DHTML (dynamic html??) which I guess would make sense as html is static afaik, i.e. it's read once by the browser and you'd need some kind of dynamic control?

No idea on DHTML though or how to pass around values. My programming extent is VB and although I made a few useful tools I'm certainly not an expert. Where do I start?? :D

Or would it be better to create it all in Flash and use that to create a flashy drop down box and send the values around etc?
 
Last edited:
I'm not sure exactly what your asking here...

If you want a page with a flash object in the middle which changes dynamically depending on what option is selected in the menu then you can just pass variables to the flash object...

Code: 
<OBJECT classid='clsid:XXX' codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0' id='myobject' ALIGN=''><PARAM NAME=whatever VALUE='path/to/whatever/myobject.swf?value1=a&value2=b&etc=etc'>

If you have different flash objects depending on what is selected then you will need some sort of decision statement which loads the correct object depending on what value you select in the menu

Code: 
if (value == 1) {
  <object>object1</object>
}
if (value == 2) {
  <object>object2</object>
}

You would need to use php, asp or similar for something like this.

Of course, i could be totally misreading what you want!
 
Thanks Wimnat, I'm not sure exactly what I want (helpful I know) but basically I have the following so far..

I have 5 .ivp files, these are packaged flash files that use a special flash player (a .swf file). I want to use a drop down box to change the .ivp that's loaded in to the swf file.

There are also certain variables which need to be passed to the swf file, like allowing fullscreen, eg:

"flashvars",'panorama=lyme_arcade.ivp',
"allowFullScreen","true", "allowScriptAccess","sameDomain",


Soooo, I'm not sure how to go about getting all this online and useale. I've just been learning xml and how to load it up in Flash, I think I might be going somewhere with this but like I said, I don't know much about it so could be wasting my time with xml. :rolleyes:

Here's an overview:

Load up website, shows a special image (the .ivp), user clicks on a drop down box and selects a new image. That selection is then loaded up in the same flash thing as the last, so it changes basically. :)

That's all I want.
 
Just played about with that but not getting anywhere with it... How would I link the drop down box to pass the query on to the flash file?

In fact, i'm going to start with a simple link. I'm going to try to do this first just clicking on a hyperlink, see if I can get that up and running.

Also, wouldn't that query reload the page or will it just change the flash file?
 
I'm back!

I've found a file called gallery.php, this seems to have a variable for the .ivp that's viewed. How would I tap in to this with a drop down box, does anyone know?

Code: 
<html> 
<head></head> 
<body> 

<?php 
   $pano='1'; 

   if (isset($_GET['pano'])) 
   { 
      $pano = $_GET['pano'] ; 
   } 
?> 

<center> 
<table border="0" cellspacing="1" cellpadding="0" bgcolor="#ffffff"> 
   <tr> 
      <td bgcolor="#ffffff"> 
         <APPLET archive="PurePlayerPro.jar" code="PurePlayerPro" width="640" height="480"> 
            <param name='flashvars' value='panorama=<?php echo $pano.".ivp" ; ?>' />
         </APPLET></td> 
   </tr> 
</table> 

</center> 

</body> 
</html>
 
Code: 
<?php

   $pano='1';

   if (isset($_GET['pano'])) 
   { 
      $pano = $_GET['pano'] ; 
   } 

   echo '
   <html> 
   <head>
   <script language="JavaScript" type="text/JavaScript">
	</head> 
	<body> 

	<form name="form1">
  		<select name="pano" method="get" action="oc.php")">
    	  <option value="1" selected="selected">item1</option>
    	  <option value="2">item2</option>
    	  <option value="3">item3</option>
  		</select>
  		<input type="submit" name="Submit" value="Go" />
	</form>
	

	<center> 
	<table border="0" cellspacing="1" cellpadding="0" bgcolor="#ffffff"> 
   	  <tr> 
        <td bgcolor="#ffffff"> 
         <APPLET archive="PurePlayerPro.jar" code="PurePlayerPro" width="640" height="480"> 
            <param name=\'flashvars\' value=\'panorama=$pano.ivp\' />
         </APPLET></td> 
   	  </tr> 
	</table> 

	</center> 

	</body> 
	</html>
';

?>

Save as oc.php... should work.
 
Thanks for helping so much, I tried that but I didn't do anything - probably due to my lack of skill. :/

Anyway, I've managed to bodge this together and it pretty much works exactly how I want minus the friggin drop down box!

http://www.henleyb.com/panos/phptest/

Looking at the three buttons at the bottom, how would I use that same idea but for when an item is clicked in the drop down box?

warning: can take a while for the image to load up when clicking!
 
i'm guessing you know enough html to see the typos posted above by wimnat. i notice the form action and method are in the wrong place. :p
 
marc2003 said:
i'm guessing you know enough html to see the typos posted above by wimnat. i notice the form action and method are in the wrong place. :p
Click to expand...


D'oh! :D


Code: 
<?php

   $pano='1';

   if (isset($_GET['pano'])) 
   { 
      $pano = $_GET['pano'] ; 
   } 

   echo '
   <html> 
   <head></head> 
	<body> 

<p>You selected menu option: '.$pano.'</p>

	<form name="form1" method="get" action="oc.php">
  		<select name="pano">
     	          <option value="1" selected="selected">item1</option>
              	  <option value="2">item2</option>
    	          <option value="3">item3</option>
  		</select>
  		<input type="submit" name="Submit" value="Go" />
	</form>
	

	<center> 
	<table border="0" cellspacing="1" cellpadding="0" bgcolor="#ffffff"> 
   	  <tr> 
        <td bgcolor="#ffffff"> 
         <APPLET archive="PurePlayerPro.jar" code="PurePlayerPro" width="640" height="480"> 
            <param name=\'flashvars\' value=\'panorama=$pano.ivp\' />
         </APPLET></td> 
   	  </tr> 
	</table> 

	</center> 

	</body> 
	</html>
';

?>

The above should work now. I also added in a little sentence just so you can see whats happening.

Passing variables using forms is pretty easy. Read up on the _GET and _POST methods and google for examples.

PS

I apologise for the crappy indentation but I am right in the middle of final year uni project! :o
 
Last edited:
try some javascript/innerhtml to write the html dynamically in a div. this means you don't have to reload the page. just assign the function to the onchange event on the select box. i've knocked up a crude example here...

http://marc2003.dyndns.org/ocuk.htm

Code: 
<html>
<head>
<script language="JavaScript" type="text/JavaScript">
function change() {
	document.getElementById('pano').innerHTML = '<img src="' + document.getElementById('list').value + '" />';
}
</script>

</head>
<body>

<div id="pano">
<img src="http://www.overclockers.co.uk/img/logo.jpg" />
</div>

<select id="list" name="list" onchange="change()">
<option value="http://www.overclockers.co.uk/img/logo.jpg">ocuk logo</option>
<option value="http://www.overclockers.co.uk/pimg/HD-036-SA_200.jpg">hard drive</option>
<option value="http://www.overclockers.co.uk/img/bg_thisweek.png">this week only logo</option>
</select>

</body>
</html>

the image updates without refreshing the page. i did try looking at the source for your site but i'll leave it upto how to fit it in... :p
 
Thanks for both those examples but I don't have the skill to implement let alone rejiggle the code to work with my stuff. :/

Here's what I attempted...

http://www.henleyb.com/panos/phptest/test.html

Somehow I broke the drop down box so even the ocuk images don't work and I still have no idea how to pass them to the flash player. I'm like a heart surgeon with parkinsons. :/
 
you've got 2 opening body statements in your html. if you post the shortest amount of code possible just to embed the flash by itself, i'll have a look at sorting this later but i'm off out for my sunday lunch for a few hours now.... :p
 
marc2003 said:
you've got 2 opening body statements in your html. if you post the shortest amount of code possible just to embed the flash by itself, i'll have a look at sorting this later but i'm off out for my sunday lunch for a few hours now.... :p
Click to expand...

Thanks, I've just been reading through a 1000 page book on html, at page 500 now. :D

Still not got to the more code side of things and really appreciate the help!

Here's the plain webpage

http://www.henleyb.com/panos/phptest/plain.html

and here's the code from that (for ease)

Code: 
<!-- saved from url=(0014)about:internet -->
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<TITLE></TITLE>

<script language="JavaScript" type="text/javascript"></script>

</head>

<center>
<table border="0" cellspacing="1" cellpadding="0" bgcolor="#000099" width="404">

	<tr bgcolor="#FFFFFF">
	<td width="402">
   	<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
			id="PurePlayer" width="400" height="300"
			codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab#version=9,0,0,0">
			<param name="movie" value="PurePlayer.swf" />
			<param name="allowScriptAccess" value="sameDomain" />
			<param name="allowFullScreen" value="true" />
			<param name='flashvars' value='panorama=lyme_beach1.ivp' />
			
			<embed src="PurePlayer.swf" 
				width="400" height="300" name="PurePlayer" align="middle"
				play="true"
				loop="false"
				quality="high"
				allowScriptAccess="sameDomain"
				allowFullScreen="true"
				flashvars="panorama=panorama.ivp"
				type="application/x-shockwave-flash"
				pluginspage="http://www.adobe.com/go/getflashplayer">
			</embed>
	</object>
	</td>

	</tr>
</table>
</center>

</body>
</html>

With my new found knowledge I've tidied up the code so hope that makes it easier. :p Thanks.
 
Well, I've learnt some php now! Managed to send things backwards and forwards from html to a php file and back. Also understanding the syntax etc more so although I still can't solve my problem at least I'm slowly getting there. If you do have a chance to have a look marc2003 i'd be very grateful!! :D

Think I might keep learning php, quite enjoying it! :)
 
here you go, fully tested and working. :)

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script language="JavaScript" type="text/javascript">
function change() {
	document.getElementById('one').innerHTML = 
	'<object width="400" height="300" type="application/x-shockwave-flash" data="PurePlayer.swf">' +
	'<param name="movie" value="PurePlayer.swf" />' +
	'<param name="allowScriptAccess" value="sameDomain" />' +
	'<param name="allowFullScreen" value="true" />' +
	'<param name="flashvars" value="panorama=' +
	document.getElementById('list').value +
	'" /></object>';
}
</script>
</head>
<body>
<center>
<table>
	<tr bgcolor="#FFFFFF">
	<td>
	<div id="one">
	<object width="400" height="300" type="application/x-shockwave-flash" data="PurePlayer.swf">
	<param name="movie" value="PurePlayer.swf" />
	<param name="allowScriptAccess" value="sameDomain" />
	<param name="allowFullScreen" value="true" />
	<param name="flashvars" value="panorama=lyme_beach1.ivp" />
	</object>
	</div>
	</td>
	</tr>
	<tr bgcolor="#FFFFFF">
	<td align="center">
		<select id="list" onchange="change()">
		<option value="lyme_beach1.ivp">beach</option>
		<option value="lyme_pier_end.ivp">pier end</option>
		<option value="townmill_bakery_hdrblended.ivp">bakery</option>
		</select>
	</td>
	</tr>
</table>
</center>
</body>
</html>
 
Last edited:
You must log in or register to reply here.
Back
Top Bottom