...

View Full Version : Combo Box Image Selector



hyde
01-13-2004, 11:06 PM
Can anyone help me with a problem concerning the script below?

Each of the images are of a different size (pixel wise) and the code currently sets itself to the dimensions of the primary image and uses that dimension for all remaining images. In this case it's 280 x 170 setting.

Ive tried setting the <img src="../../images/general/aol.jpg" name="pictures" align="left" width="280" height="170"> to be 100% for both the width and height options, but that just produces a 1 pixel high image on the web page.

My only work around is to take the largest size from all the images and create a canvas which I cut n paste the jpgs to. I then set any canvas not covered by the image to a transparent property and save the resulting file as a Gif. This means that all the images are of the same dimension, but to the end user they appear to be their original size because of the transparent property. The downside of this (apart from the time taken to do it) is that the Gifs are of a correspondingly larger Kb size than JPG equivalents.

Any thoughts?

Many thanks
Hyde.

<script language="javascript">
<!--

/*Combo Box Image Selector:
By JavaScript Kit (www.javascriptkit.com)
Over 200+ free JavaScript here!
*/

function showimage()
{
if (!document.images)
return
document.images.pictures.src=
document.mygallery.picture.options[document.mygallery.picture.selectedIndex].value
}
//-->
</script>

<table border="0" cellspacing="0" cellpadding="0" width="100%" height="100%" style="border-collapse: collapse">
<tr>
<td width="100%" height="100%"><form name="mygallery"><p><select
name="picture" size="1" onChange="showimage()">
<option selected value="../../images/general/aol.jpg">01. Because you believe adverts</option>
<option value="../../images/general/32000.jpg">02. Major Win?</option>
<option value="../../images/general/aunt_bessies.jpg">03. Bless Her!</option>

</select></p>
</form>
</td>
</tr>
<tr>
<td width="100%" height="100%"><p align="center">
<img src="../../images/general/aol.jpg" name="pictures" align="left" width="280" height="170">
</tr>

</table>

Garadon
01-13-2004, 11:47 PM
perhaps something like this.



<script>
aImg=new Image();
aImg.onload=loadedImg;

function showimage()
{
if (!document.images)
return
aImg.src=document.mygallery.picture.options[document.mygallery.picture.selectedIndex].value;
}

function loadedImg()
{
document.images.pictures.src=aImg.src;
document.images.pictures.width=aImg.width;
document.images.pictures.height=aImg.height;
}
</script>

glenngv
01-14-2004, 03:07 AM
If you just remove the width and height attributes of the <img> tag, the image will be loaded in its original size.

<img src="../../images/general/aol.jpg" name="pictures" align="left" width="280" height="170">

hyde
01-14-2004, 07:02 PM
To Garadon

Many thanks for your post. I should mention something else...

I'm not JS expert. Cutting and pasting of code is about as technical as I get. Now that you know that...

Do I add your code snippet to mine, or replace it?

If it's the former, where do I insert it?

If it's the latter, how does it cycle through my selection of images and allow me to display a drop down selection box with a punch line for the image (it's a joke site I'm using this facility on).

Many thanks
Hyde.

hyde
01-14-2004, 07:09 PM
To Glenngv

Many thanks too for your suggestion of removing the width and height tags.

However...

Tried that before and have re-tested just now and all that happens is those tags get automatically entered again with the value of the first image in the range. It's only when I've set those tags to a percentage that they don't get over written with a specific value, but then I get the 1 pixel high image displayed.

Just to show how un-technical I am I author my site using MS FrontPage 2003 (Office XP), if that should help anyone with providing a solution.

Thanks again
Hyde.

hyde
01-14-2004, 07:43 PM
To Garadon

What a plonker I am...

I looked at your suggestion again and realised that I should replace my code between the <script> and </script> markers with yours.

I've now done that and it all works just fine, exactly what I was looking for. Saved me hours of image manipulation.

Thanks again
Hyde.

PS I won't confess to knowing what it's actually doing. I'll save that for another day ;-)

hyde
01-29-2004, 10:42 PM
So impressed am I with the solution provided by Garadon, that I've come back for a tweak on the theme.

This is...

Can that code be changed so that it pulls in another html page?

Using Garadon's code between the <script> & </script> entries I changed the following code to point at an html page:-

<table border="0" cellspacing="0" cellpadding="0" width="100%" height="100%" style="border-collapse: collapse">
<tr>
<td width="100%" height="100%"><form name="mygallery"><p><select
name="picture" size="1" onChange="showimage()">
<option selected value="../../images/general/the_name_of_my_html_page.htm">01. Caption for the html page</option>

</select></p>
</form>
</td>
</tr>
<tr>
<td width="100%" height="100%"><p align="center">
<img src="../../images/general/the_name_of_my_html_page.htm" name="pictures" align="left" width="500" height="500">
</tr>

</table>

The width and height tags are set to the table size I'm using for the target page I'm trying to load from the combo box. That page doesn't have any page borders, just a table containing a jpg image and two cells of text that have dynamic HTML text effects.

I was kinda hoping that it would just treat my target html page as an image, but since it doesn't work I'm assuming that the code needs tweeking to do this.

Any help, as before, greatly appreciated.

Hyde

glenngv
01-30-2004, 01:01 AM
Use <iframe> instead of <img>

<select name="picture" size="1" onChange="window.open(this.options[this.selectedIndex].value,'pictureFrame')">
<option selected value="../../images/general/the_name_of_my_html_page.htm">01. Caption for the html page</option>
<option value="../../images/general/the_name_of_my_html_page2.htm">01. Caption for the html page 2</option>
</select>
...
<iframe src="../../images/general/the_name_of_my_html_page.htm" name="pictureFrame" width="500" height="500" frameborder="0"></iframe>

hyde
02-01-2004, 10:08 PM
Glenn

Many thanks for your post. Your solution works just fine.

Check out the results at:

http://www.htds.co.uk/picture_jokes/office/the_office.htm

Thanks again.
Hyde.

hyde
12-03-2004, 12:06 PM
Hi Folks

Once again I'm looking for a tweak to the following code so that when each image is returned to the page having selected it's drop down menu box item, the image displays some text on a mouse hold over.

In other words I need a <alt="mytext"> that works for each image selected from the drop down menu.

I've tried selecting the properties of the primary image, applying the alt text entry I want, and then cutting and pasting that code to each of the "<option value=..." lines of code but the code is ignored at best, or creates a blank row entry in the drop down menu box.

I've also tried sustituting the "alt=" for an "option title=", but that doesn;t work either.

Can this be done?

Many thanks
Hyde

Code snippet I want to enhance is:-

<td width="100%" height="100%"><form name="mygallery"><p><select
name="picture" size="1" onChange="showimage()">
<option selected value="../../images/office/upset1.jpg">01. The only kit you'll ever need. <option title="hello there"> </option>
<option value="../../images/office/upset2.jpg">02. After they were famous. </option>
<option value="../../images/office/upset3.jpg">03. Getting your message across?</option>
<option value="../../images/office/upset4.jpg">04. Do you want ice with that?</option>
</select></p>
</form>
</td>
</tr>
<tr>
<td width="100%" height="100%"><p align="center">
<img src="../../images/office/upset1.jpg" name="pictures" align="left" width="300" height="444">
</tr>

</table>

hemebond
12-04-2004, 12:21 AM
Someone make me a mod so I can slap ya'll up-side the head with some code tags.

hyde
12-04-2004, 10:40 AM
That was useful, feel much better for that. :rolleyes:

Garadon
12-04-2004, 12:45 PM
in option value combine the image info like so:
src||alt



aImg=new Image();
aImg.onload=loadedImg;

function showimage()
{
if (!document.images)
return
data=document.mygallery.picture.options[document.mygallery.picture.selectedIndex].value.split('||');
if(data[1]!=null)
aImg.alt=data[1];
else
aImg.alt="";
aImg.src=data[0];
}

function loadedImg()
{
document.images.pictures.src=aImg.src;
document.images.pictures.width=aImg.width;
document.images.pictures.height=aImg.height;
document.images.pictures.alt=aImg.alt;
}

Willy Duitt
12-04-2004, 04:21 PM
Or using the option text...



function loadedImg()
{
document.images.pictures.src=aImg.src;
document.images.pictures.width=aImg.width;
document.images.pictures.height=aImg.height;
document.images.pictures.alt=document.mygallery.picture.options[document.mygallery.picture.selectedIndex].text;
}


.....Willy

hyde
12-04-2004, 07:20 PM
Hi Garadon

Glad that you're still around. I haven't fully understood your fix...

What does,

"in option value combine the image info like so:
src||alt"

Mean?

My script now looks like:

<script>
aImg=new Image();
aImg.onload=loadedImg;

function showimage()
{
if (!document.images)
return
data=document.mygallery.picture.options[document.mygallery.picture.selectedIndex].value.split('||');
if(data[1]!=null)
aImg.alt=data[1];
else
aImg.alt="";
aImg.src=data[0];
}

function loadedImg()
{
document.images.pictures.src=aImg.src;
document.images.pictures.width=aImg.width;
document.images.pictures.height=aImg.height;
document.images.pictures.alt=aImg.alt;
}
</script>

And an extract from the selection list looks like:

<td width="100%" height="100%"><form name="mygallery"><p><select
name="picture" size="1" onChange="showimage()">
<option selected value="../../images/office/upset1.jpg">01. The only kit you'll ever need. src||alt"hello there" </option>
<option value="../../images/office/upset2.jpg">02. After they were famous. </option>
<option value="../../images/office/upset3.jpg">03. Getting your message across?</option>
<option value="../../images/office/upset4.jpg">04. Do you want ice with that?</option>
</select></p>
</form>
</td>
</tr>
<tr>
<td width="100%" height="100%"><p align="center">
<img src="../../images/office/upset1.jpg" name="pictures" align="left" width="300" height="444">
</tr>

</table>

Where am I going wrong?

Thanks in advance
Hyde.

hyde
12-04-2004, 07:29 PM
Willy

Many thanks for your alternative method. I could get your code to work, but it's not exactly what I wanted to achieve.

I want to have a different description of the image on a hold over, and not repeat the associated punch line that I use in the drop down menu.

I'll keep that code snippet though as I can see it could be useful in other circumstances.

Thanks again
Hyde.

Garadon
12-04-2004, 07:55 PM
<option value="image.jpg||hello there"">.SOMETEXT

Willy Duitt
12-04-2004, 07:58 PM
If you want differing descriptions other than the option text you will need to use Garadon's suggestion...

But, you added the descriptive text to the option text when it needs to be added to the option value...

<option selected value="../../images/office/upset1.jpg||Hello There">01. The only kit you'll ever need" </option>

hyde
12-05-2004, 09:48 AM
Garadon, Willy

Brilliant, works a treat. :thumbsup:

Thanks to you both for the clarification.

Regards
Hyde



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum