Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 19
  1. #1
    New Coder
    Join Date
    Jan 2004
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Combo Box Image Selector

    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.

    I’ve 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 jpg’s 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 Gif’s 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>

  • #2
    Regular Coder
    Join Date
    Jul 2002
    Posts
    698
    Thanks
    0
    Thanked 0 Times in 0 Posts
    perhaps something like this.

    Code:
    <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>

  • #3
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,068
    Thanks
    0
    Thanked 256 Times in 252 Posts
    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">
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #4
    New Coder
    Join Date
    Jan 2004
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #5
    New Coder
    Join Date
    Jan 2004
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #6
    New Coder
    Join Date
    Jan 2004
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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 ;-)

  • #7
    New Coder
    Join Date
    Jan 2004
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Combo Box HTML Page Selector

    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

  • #8
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,068
    Thanks
    0
    Thanked 256 Times in 252 Posts
    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>
    Last edited by glenngv; 01-30-2004 at 01:03 AM.
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #9
    New Coder
    Join Date
    Jan 2004
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Glenn

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

    Check out the results at:

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

    Thanks again.
    Hyde.

  • #10
    New Coder
    Join Date
    Jan 2004
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Combo Box Image Selector + Alt Text

    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>

  • #11
    Senior Coder
    Join Date
    Jul 2004
    Location
    New Zealand
    Posts
    1,315
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Someone make me a mod so I can slap ya'll up-side the head with some code tags.

  • #12
    New Coder
    Join Date
    Jan 2004
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That was useful, feel much better for that.

  • #13
    Regular Coder
    Join Date
    Jul 2002
    Posts
    698
    Thanks
    0
    Thanked 0 Times in 0 Posts
    in option value combine the image info like so:
    src||alt

    Code:
    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;	
    }

  • #14
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Or using the option text...

    Code:
    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

  • #15
    New Coder
    Join Date
    Jan 2004
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •