Dropdownmenu / Iframe code needed urgent please

**Sergio_Belgium** · Feb 3, 2005, 04:04

Hi i need to make a presentation with lots of picture's.
So i created a simple setup, one index.htm page with 2 page in leftframe rightframe setup, these pages are called left.htm and home.htm
All pics are in a subfolder pics
Now comes the problem in the left.htm i created dropdownbuttons in plain html, in every button i have about 25 choices.
In the home.htm i created 5 iframe's called "1", "2", till "5"

Now i want some java code that allows me to select one option in every dropdown menu, then submit and it should show 5 pictures in the iframe's making 1 picture in total

second problem that i have is that my iframe's are cutting a border of my pictures, and i made them exactly the same size with no borders

Can anyone help please?

It would help me a lot?
If anymore questions please ask, if needed i can send the files in zipfile to anuy who like to check my code, i have allready some script but it doesen't seem to work
please post your e-mail if you would like the files, it's only 20k or so

Thanks in advance for ALL your quick responses, i'm really desperate

Hi guys i managed to upload the zip file here, so please download and have a look

**vwphillips** · Feb 3, 2005, 06:05

show 5 pictures in the iframe's making 1 picture in total

I would not have thought that iframes were the best way of achieveing this.

If you are looking for somthing like an image split then that would be the best way of approaching the problem and change the src's of an existing images on home.htm

please explain why you are using iframes

**Sergio_Belgium** · Feb 3, 2005, 06:34

If you have another solution, please tell me. i whas thinking on iframe to have fields.
hwat i actually need is that it makes 1 complete picture with no spaces in between like i have now

The first dropdown, should give one of thos pictures in the upper iframe
and so on, so every dropdown stands for 1 iframe

but the trick is that it should only show once you selected all dropdown menu and then submit

so it's not allowed to show the pictures immidiately when you select it in the dropdowns.

That's why i needed the javascript.

Anyway, any other solution is ok, it's even allowed to be in 1 file instead of 2 like i have now. Dropdowns are also allowed to be on top, so maybe that's easier to center everything, what is shure, is that there will be at least 4 dropdowns, maybe 5 (like now) and eventually (this whas only test) 25 choices per menu, which stands for 25 pictures per menu. and the 4 or 5 menu's will make 1 complete picture.

I hope somebody can help me with such files, or code.

Thanks allready for your quick reply, that's really kind of you.

**vwphillips** · Feb 3, 2005, 12:12

Frameset

PHP Code:


<html>

<head>

<title>No title</title>

<meta name="description" content="Makes a menu frame in the left. Hyperlinks in the menu frame are targeted to the main frame.">

</head>

<frameset rows="1*" cols="20%, 80%">

<frame name="LHPage" src="LHPage.htm" scrolling="auto" marginwidth="10" marginheight="14" namo_target_frame="detail">

<frame name="RHPage" id="detail" src="RHPage.htm"  scrolling="no" marginwidth="10" marginheight="14">

<noframes>

<body bgcolor="#FFFFFF" text="#000000" link="#0000FF" vlink="#800080" alink="#FF0000">



<p>You need a browser that supports frame to veiw this page.</p>

</body>

</noframes>

</frameset>

</html>

LHPage

PHP Code:




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

    "http://www.w3.org/TR/html4/strict.dtd">



<html>



<head>

  <title></title>

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

<!--

var ImgPath='http://www.vicsjavascripts.org.uk/StdImages/';

var SelectsSet='';

var SelAry=new Array();



function Selects(){

 Sels=document.getElementsByTagName('BODY')[0].document.getElementsByTagName('SELECT')

}





function ChangeImageDo(){

 for (i=0;i<Sels.length;i++){

  if (Sels[i].selectedIndex<1){

   alert("All Images must be selected");

   return;

  }

 }

 for (i=0;i<Sels.length;i++){

  if (Sels[i].selectedIndex){

   window.top['RHPage'].Imgs[i].src=ImgPath+Sels[i].options[Sels[i].selectedIndex].value;

  }

 }

}





//-->

</script>



</head>



<body onload="Selects();" >



LH Frame<br>

<select size="1">

<option value="">Select Image</option>

<option value="Zero.gif">Zero.gif</option>

<option value="One.gif">One.gif</option>

<option value="Two.gif">Two.gif</option>

<option value="Three.gif">Three.gif</option>

<option value="Four.gif">Four.gif</option>

<option value="Five.gif">Five.gif</option>

</select>

<br>

<br>

<select size="1">

<option value="">Select Image</option>

<option value="Zero.gif">Zero.gif</option>

<option value="One.gif">One.gif</option>

<option value="Two.gif">Two.gif</option>

<option value="Three.gif">Three.gif</option>

<option value="Four.gif">Four.gif</option>

<option value="Five.gif">Five.gif</option>

</select>

<br>

<br>

<select size="1">

<option value="">Select Image</option>

<option value="Zero.gif">Zero.gif</option>

<option value="One.gif">One.gif</option>

<option value="Two.gif">Two.gif</option>

<option value="Three.gif">Three.gif</option>

<option value="Four.gif">Four.gif</option>

<option value="Five.gif">Five.gif</option>

</select>

<br>

<br>

<select size="1">

<option value="">Select Image</option>

<option value="Zero.gif">Zero.gif</option>

<option value="One.gif">One.gif</option>

<option value="Two.gif">Two.gif</option>

<option value="Three.gif">Three.gif</option>

<option value="Four.gif">Four.gif</option>

<option value="Five.gif">Five.gif</option>

</select>

<br>

<br>

<select size="1">

<option value="">Select Image</option>

<option value="Zero.gif">Zero.gif</option>

<option value="One.gif">One.gif</option>

<option value="Two.gif">Two.gif</option>

<option value="Three.gif">Three.gif</option>

<option value="Four.gif">Four.gif</option>

<option value="Five.gif">Five.gif</option>

</select>

<br>

<br>

<input type="button" name="" value="Change Images" onclick="javascript:ChangeImageDo();" >

<br>

<br>



</TABLE>

</body>



</html>

RHPage

PHP Code:




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

    "http://www.w3.org/TR/html4/strict.dtd">



<html>



<head>

  <title></title>

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

<!--

var ImgPath='http://www.vicsjavascripts.org.uk/StdImages/';

var SelectsSet='';

var SelAry=new Array();



function Images(){

 Imgs=document.getElementsByTagName('BODY')[0].document.getElementsByTagName('IMG')

}







//-->

</script>



</head>



<body onload=" Images();" >

RH Frame<br>

<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" WIDTH="150" HEIGHT="150">



<TR>

<TD ROWSPAN="1" COLSPAN="1" WIDTH="50" HEIGHT="150">

    <IMG  SRC="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" WIDTH="50" HEIGHT="50" BORDER="0"></TD>

<TD ROWSPAN="1" COLSPAN="1" WIDTH="50" HEIGHT="150">

    <IMG SRC="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" WIDTH="50" HEIGHT="50" BORDER="0"></TD>

<TD ROWSPAN="1" COLSPAN="1" WIDTH="50" HEIGHT="150">

    <IMG SRC="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" WIDTH="50" HEIGHT="50" BORDER="0"></TD>

<TD ROWSPAN="1" COLSPAN="1" WIDTH="50" HEIGHT="150">

    <IMG SRC="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" WIDTH="50" HEIGHT="50" BORDER="0"></TD>

<TD ROWSPAN="1" COLSPAN="1" WIDTH="50" HEIGHT="150">

    <IMG SRC="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" WIDTH="50" HEIGHT="50" BORDER="0"></TD>

</TR>



</TABLE>

</body>



</html>

**Sergio_Belgium** · Feb 7, 2005, 06:54

ok the code is less or more what i want, but can you make the code so it takes the photo's from under the pics folder? i changed some parameters and it doesen't seem to work.
Can you make the right frame so that it shows all images under each other?

Does the code that you titled PHP code , needs to be copied in the index page, i think i'm right here

Then i ow you a very big thank you

**vwphillips** · Feb 7, 2005, 10:36

Originally Posted by Sergio_Belgium

so it takes the photo's from under the pics folder?

I do not understand this!

Originally Posted by Sergio_Belgium

i changed some parameters and it doesen't seem to work.

Post your code so I can look at it

Originally Posted by Sergio_Belgium

Can you make the right frame so that it shows all images under each other?

Yes, but that is just how the HTML table making the image slice is constructed
Images could be positioned by style positioning if you prefer.

Originally Posted by Sergio_Belgium

Does the code that you titled PHP code , needs to be copied in the index page,

PHP Code is added by the forum
The framset Code can be the index.html but can be any legal name.

I will wait until you explain you first request(quote) above and/or post your current code to be fixed.

**Sergio_Belgium** · Feb 7, 2005, 10:51

hi,

Well it's simple, i use a folder in the root of my website wish is called pics, there i store all my pictures. all numbered

i would like to have the code written that way that it gets the pictures in there.

so in the root i have index.htm, left.htm, home.htm and pics (folder)

I hope you see it clear now, i checked the dropdowns they are working great.

the pictures in the right frame are showing behind each other, what is the html code that i can use to let it show under each other without any space between?

One more question is it possible to define the wide of the dropdowns, because my list is not equal in caracters, so it take's the longest word.
and i would like to make all dropdowns the same size?

Thanks for your quick replys

**vwphillips** · Feb 7, 2005, 13:53

PHP Code:


index.htm



<html>

<head>

<title>No title</title>

<meta name="description" content="Makes a menu frame in the left. Hyperlinks in the menu frame are targeted to the main frame.">

</head>

<frameset rows="1*" cols="20%, 80%">

<frame name="LHPage" src="left.htm" scrolling="auto" marginwidth="10" marginheight="14" namo_target_frame="detail">

<frame name="RHPage" id="detail" src="home.htm"  scrolling="no" marginwidth="10" marginheight="14">

<noframes>

<body bgcolor="#FFFFFF" text="#000000" link="#0000FF" vlink="#800080" alink="#FF0000">



<p>You need a browser that supports frame to veiw this page.</p>

</body>

</noframes>

</frameset>

</html>

PHP Code:


left.htm



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

    "http://www.w3.org/TR/html4/strict.dtd">



<html>



<head>

  <title></title>

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

<!--



var ImgPath='pics/';

var SelectsSet='';

var SelAry=new Array();

var SelWidth='150';

// enter all images in this array or use the Add Image Facility

var ImgAry=new Array('Zero.gif','One.gif');

var SRCAry=new Array();



function PreloadImages(){

 for (i=0;i<ImgAry.length;i++){

  SRCAry=new Array();

  SRCAry[i]=new Image();

  SRCAry[i].src=ImgPath+ImgAry[i];

 }

 Selects();

}





// remove this function if you dont need it

function AddImage(){

 if (!document.getElementById('ImageAdd').value.match(ImgPath.substring(0,ImgPath.length-1))){

  alert('Incorrect Image Path');

  return

 }

 img=document.getElementById('ImageAdd').value.substring(document.getElementById('ImageAdd').value.lastIndexOf('\\')+1,document.getElementById('ImageAdd').value.length);

 img=img.substring(img.lastIndexOf('/')+1,img.length);

 document.getElementById('ImageAddTB').value=img;

 if (img.length<4){ return; }

 for (i=0;i<ImgAry.length;i++){

  if (img==ImgAry[i]){

   alert('This Image is already available');

   return;

  }

 }

 ImgAry[ImgAry.length]=img;

 PreloadImages();

}



function Selects(){

  Sels=document.getElementsByTagName('BODY')[0].document.getElementsByTagName('SELECT')

 for (i=0;i<Sels.length;i++){

  Sels[i].style.width=SelWidth+'px';

  Sels[i].options.length=1;

  for (i1=0;i1<ImgAry.length;i1++){

   Sels[i].options[i1+1]=new Option(ImgAry[i1],ImgAry[i1],true,true);

  }

  Sels[i].selectedIndex=0;

 }

}



function ChangeImageDo(){

for (i=0;i<Sels.length;i++){

  if (Sels[i].selectedIndex<1){

   alert("All Images must be selected");

   return;

  }

}

for (i=0;i<Sels.length;i++){

  if (Sels[i].selectedIndex){

   window.top['RHPage'].Imgs[i].src=ImgPath+Sels[i].options[Sels[i].selectedIndex].value;

  }

}

}





//-->

</script>

</head>



<body onload="PreloadImages();" >



LH Frame<br>

<select size="1" >

<option value="">Select Image</option>

</select>

<br>

<br>

<select size="1">

<option value="">Select Image</option>

</select>

<br>

<br>

<select size="1">

<option value="">Select Image</option>

</select>

<br>

<br>

<select size="1">

<option value="">Select Image</option>

</select>

<br>

<br>

<select size="1">

<option value="">Select Image</option>

</select>

<br>

<br>

<input type="button" name="" value="Change Images" onclick="javascript:ChangeImageDo();" >

<br>

<br>

Remove code below if you dont need it

<br>

Add an Image <input type="file" id="ImageAdd" value="Add Image" style="width:40px;" onchange="javascript:AddImage();">

<br>

<input id="ImageAddTB" style="width:150px;">

<br>

<br>





</body>



</html>

PHP Code:


home.htm



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

    "http://www.w3.org/TR/html4/strict.dtd">



<html>



<head>

  <title></title>

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

<!--

var ImgPath='http://www.vicsjavascripts.org.uk/StdImages/';

var SelectsSet='';

var SelAry=new Array();



function Images(){

Imgs=document.getElementsByTagName('BODY')[0].document.getElementsByTagName('IMG')

}







//-->

</script>



</head>



<body onload=" Images();" >

<center>

RH Frame<br>

<table cellpadding="0" cellspacing="0" border="0">

  <tr>

    <td><img src="pics/Blank.gif" width="50" height="50"></td>

  </tr>

  <tr>

    <td><img src="pics/Blank.gif" width="50" height="50"></td>

  </tr>

  <tr>

    <td><img src="pics/Blank.gif" width="50" height="50"></td>

  </tr>

  <tr>

    <td><img src="pics/Blank.gif" width="50" height="50"></td>

  </tr>

  <tr>

    <td><img src="pics/Blank.gif" width="50" height="50"></td>

  </tr>

</table>

</center>

</body>



</html>

The SitePoint Forums have moved.

User Tag List

Thread: Dropdownmenu / Iframe code needed urgent please

Thread Tools

Display

Dropdownmenu / Iframe code needed urgent please

I don't really know

pics folder

Bookmarks

Bookmarks

Posting Permissions