select picture menu

[tryangle]

Hi, I'm using a <select> as a menu to display pictures of different sizes in a table. What I'm having difficulty with, is that the table somehow gets set to the size of the first picture displayed, then all the rest of them are being displayed (distorted mostly) at the same size. They're mostly different lengths, and it's like at the bottom of a page so I don't think it's gonna mess up the page when I get this figured out... but who knows? %-)
OK, Who stopped payment on my reality check?

 

[baad]

culd u plz show us some of ur code? Victor

 

[tryangle]

Sure...

current = 0;
function nextPic() {
if (document.controls.pic[current+1]) {
document.images.display.src = document.controls.pic[current+1].value;
document.controls.pic.selectedIndex = ++current;
}

where... <td name=&quot;display&quot; id=&quot;display&quot;> I tried setting the <table height=&quot;800&quot;> which is way more than it needs, all it did is move the pictures down the screen... and I tried leaving the height= out of there entirely, that didn't do it either- in fact I tried that first, thinking it would default to auto-adjust to the picture height.

I just now realized that display is a css property, maybe I should use a different ID. Well, I'll try that in the mean time... Thank you, in advance, for your help! OK, Who stopped payment on my reality check?

 

[baad]

no, this piece of code havent made ur problem clearer for me :-(

yeah, u shuld avoid of using reserved words for ids or names, & display is a property..
but,
if u're using display (or some other name) like an id for table cell, td name=&quot;display&quot; id=&quot;display why r u referencing 2 ur image like document.images.display? ur image have the same name? wrong..

i'd like 2 see a minimal html document with scripts u're using, table where u gonna insert ur images, ur form with select & how u call ur function from ur form..

not the hole ur work, but just an example, for me 2 get the hole picture.. may be than i wuld be more helpfull..

thanks Victor

 

[tryangle]

ok, thanks for your help Victor... (Sorry it takes awhile to get back to you, I'm learning this at home after work.)

<script language=javascript>
<!--
function nextPic() {
if (document.controls.pic[current+1]) {
document.images.flipIt.src = document.controls.pic[current+1].value;
document.controls.pic.selectedIndex = ++current;
}
else firstPic();
}

function firstPic() {
current = 0;
document.images.flipIt.src = document.controls.pic[0].value;
document.controls.pic.selectedIndex = 0;
}

function changePic() {
current = document.controls.pic.selectedIndex;
document.images.flipIt.src = document.controls.pic[current].value;
}
// -->
</script>

<table width='780' height='32' cellspacing='0' cellpadding='0' border='0'>
<tr>
<td width='780' name='selector' id='selector'>
<select name='pic' id='pic' onChange='changePic();'>
<option value='../images/history/AnnualFront.gif'>Annual Front
<option value='../images/history/AnnualBack.gif'>Annual Back
<option value='../images/history/1987News.gif'>1987 News
<option value='../images/history/BeforeAddition.jpg'>Before Addition</select>
<input type=button onClick='nextPic();' value='Next'></td>
</tr>
</table>

<table width=&quot;610&quot; border=&quot;0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; height=&quot;800&quot;>
<tr>
<td width=&quot;610&quot; align=&quot;center&quot;><img src=&quot;../images/history/AnRept.gif&quot; name=&quot;flipIt&quot; id=&quot;flipIt&quot; /></td>
</tr>
</table>

That's pretty much it... I trimmed it down, because I had it set up as a string in an external .js file Sometimes I get a little sloppy when I'm in a hurry. %-) I changed what had been 'display' to 'flipIt', but it didn't have any effect... so I guess that wasn't a problem. But while I was doing that, I thought maybe it would help to preload the images. So I'm trying to get that together. I didn't include it here, because it's throwing a couple of errors. If you think I'm on the right track, let me know, and I'll post what I've got so far. Thanks again... OK, Who stopped payment on my reality check?

 

[tryangle]

I guess I'm in a little over my head... I haven't got this figured out yet, the image preloader idea I had %-) didn't help - although the image sizes weren't specified... Well, I've thought of an idea to make it a little more difficult, Besides not being able to get the pictures to render in the sizes they are supposed to be :-I I'm trying to figure out how I could use the Thumbnails I made of these pictures that are on other pages to open to this display page and have the larger picture pre- selectedIndex[2].value or whatever. OK, Who stopped payment on my reality check?

 

[theEclipse]

ok, here is the problem.

I am going to assume that you are using netscape.

netscape has a problem, see the designers sucked so....;-)

when netscape renders an image, it locks the page, so that if an image gets resized or replaced, the page will still fit the authors original page scheme. what it amounts to is this: you cant do it.

at least thats the way it used to be, netscape 6 could have changed.

try placing the first images width and height attributes in the <img ...> tag and then changing them using

document.imgName.width and document.imgName.height

now, if you are developing for an ie platform, thats another story altogether theEclipse
eclipse_web@hotmail.com
**\\||It was recently discovered that research causes cancer in rats||//**

 

[tryangle]

Hey Thanks Eclipse, I'll try this out... I'm using IE, so I'm wondering what &quot;that's another story altogether&quot; is all about? I'm not sure, but it sounds like it might be good? Do you know how I would be able to change the selectedIndex so that it's pre-selected to the one that had the thumbnail clicked. So far, I figure I could do it writing several sets of the <select> with a different one selected, and then placing the appropriate one using a document.write string called from a javascript:function() talk about baggage %-) OK, Who stopped payment on my reality check?

 

[tryangle]

Hey Eclipse, I wrote a function for each value of the <select> so that I could put in the document.imgName.height and width... the interesting thing is... it changes the height and width for the NEXT picture to be the dimensions of the current picture being displayed, even though all the related height and width information for each image, and the image itself are written in the same function. This is progress though, Thanks. Should I include if(document.all) in each function. Sometimes I've found it to work for stuff, but I don't understand why? %-) And I still am having a tough time getting the select to preselect the image that was clicked on the thumbnail of a different page.
Thanks for your help so far...
I hope to hear from vituz again too... OK, Who stopped payment on my reality check?

 

[baad]

hie i'm back
sorry, i wasnt at work these days..
>>Do you know how I would be able to change the selectedIndex so that it's pre-selected to the one that had the thumbnail clicked.


what 'da?
what thumbnail? where is it (r they)?
cant get what u want.. :-( i'm too dumb..

i just copied & pasted code from ur Aug 23, 2001 post..
looks like its workin for me..
i puted there an image ~10x10 px (w/o width/height in img tag), & then replaced it with ~100x100 px - all works.. new sizes where assigned.. Victor

 

[tryangle]

Hmm... How can this be, that it works for you but not for me? At first I wasn't getting any image changing, now it's somehow delayed by one image. As far as the thumbnails go, they are on separate pages. And I used the images as links with <a href=&quot;./displaypage.htm&quot;><img src=&quot;./thumbnail.gif&quot;></a> then I changed the href to a javascript:function() to try to get it to have the selectedIndex of the <select> pre-selected. But it keeps displaying the select that is selected by default. I tried placing the function after the page loading stuff, but it didn't help the situation. %-) This seems to be soo close, yet so far. Whatta bummer :-( OK, Who stopped payment on my reality check?

 

[theEclipse]

well, I am not sure what you want anymore, as I am completly lost. but, I do know how to change the current selection of a select box

document.form.select.options[document.form.select.selectedIndex].selected=false;
document.form.select.options[num].selected=true;

that will change the selection to whatever element is numbered 'num'

theEclipse
eclipse_web@hotmail.com
**\\||It was recently discovered that research causes cancer in rats||//**

 

[tryangle]

I brought my page into work here today, where it runs in IE5 ... and the images aren't distorted here when different ones of different sizes are changed with a function(). At home I have IE5.5 I'm wondering if it's the browser being more strict with my code. %-)

Thanks Eclipse for hangin in there on this... I tried your suggestion on changing the selection but I got an Object Expected error? OK, Who stopped payment on my reality check?

 

[theEclipse]

try using just the second line of that script, maybee that will solve the problem.

also, add 'multiple' to the selectbox tag theEclipse
eclipse_web@hotmail.com
**\\||It was recently discovered that research causes cancer in rats||//**

 

[tryangle]

Hi Eclipse,

Thanks again for your suggestions... When I included 'multiple' in the <select> tag, 4 options were displayed on the dropdown menu. I wondered how that was done, now I know Also, I // commented out the upper and lower line of script as you suggested, but it still throws an 'Object Expected' error %-) Any other ideas? OK, Who stopped payment on my reality check?

 

[theEclipse]

hmm, sorry. no clue theEclipse
eclipse_web@hotmail.com
**\\||It was recently discovered that research causes cancer in rats||//**