SitePoint Sponsor |
|
User Tag List
Results 1 to 8 of 8
-
Feb 3, 2005, 05:04 #1
- Join Date
- Feb 2005
- Posts
- 4
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Dropdownmenu / Iframe code needed urgent please
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
-
Feb 3, 2005, 07:05 #2
- Join Date
- Nov 2004
- Location
- Portsmouth UK
- Posts
- 1,499
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
show 5 pictures in the iframe's making 1 picture in total
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
-
Feb 3, 2005, 07:34 #3
- Join Date
- Feb 2005
- Posts
- 4
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I don't really know
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.
-
Feb 3, 2005, 13:12 #4
- Join Date
- Nov 2004
- Location
- Portsmouth UK
- Posts
- 1,499
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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>
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>
-
Feb 7, 2005, 07:54 #5
- Join Date
- Feb 2005
- Posts
- 4
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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 youLast edited by Sergio_Belgium; Feb 7, 2005 at 08:49.
-
Feb 7, 2005, 11:36 #6
- Join Date
- Nov 2004
- Location
- Portsmouth UK
- Posts
- 1,499
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally Posted by Sergio_Belgium
Originally Posted by Sergio_Belgium
Originally Posted by Sergio_Belgium
Images could be positioned by style positioning if you prefer.
Originally Posted by Sergio_Belgium
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.
-
Feb 7, 2005, 11:51 #7
- Join Date
- Feb 2005
- Posts
- 4
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
pics folder
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
-
Feb 7, 2005, 14:53 #8
- Join Date
- Nov 2004
- Location
- Portsmouth UK
- Posts
- 1,499
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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>
Bookmarks