SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Guru
    Join Date
    Feb 2002
    Posts
    625
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    change image using onchange....

    Hello!

    This is the PHP script....

    PHP Code:
    echo ("<select name=\"Select\" size=\"1\" style=\"font:'10'\">");
        echo (
    "<option name=\"topicimage\">$iconimg</option>");
        
    $handle=opendir('images/icons/');
        while (
    false !== ($file readdir($handle))) 
        {
            if (
    $file != "." && $file != ".." && $file != "$iconimg"
            {
                echo (
    "<option name=\"topicimage\">$file</option>\n<br>");
            }
        }
        
    closedir($handle);
        echo (
    "</select>"); 
    ...and i was hoping someone could tell me how i could make the following work.
    This script basically reads the files from a given folder (images/icons/) and lists them in an drop down box. Now i want to display the image if a user selects one and have it right next to the drop down list.
    is this possible somehow?
    If someone could give me a few tips, that would be great.

    Best regards from Vienna,
    datune

  2. #2
    ********* obeah makeda's Avatar
    Join Date
    Jun 2001
    Location
    rollin' on dubs
    Posts
    492
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There are several ways to do it. The key is to somehow include the file path in your dropdown. I would suggest setting the value of each <option> equal to your path. Ex:

    echo ("<option name=\"topicimage\" value=\"$imagePath\">$iconimg</option>");

    Then, do the following:

    1. Preload your images. Add an onload event to your <body> tag and write a function to preload your images.

    2. Insert an <image src="" id="imgChange" /> tag wherever you want your images to appear.

    3. Attatch an onChange event to your dropdown menu:
    echo ("<select name=\"Select\" size=\"1\" style=\"font:'10'\" onChange=\"flipImages(this)\">");

    4. Write a function which will change your images:

    function flipImages(ddImg) {
    document.all("imgChange").src = ddImg.value;
    }


    I once had a coffee at Cafe Central. It was a very beautiful place.

  3. #3
    SitePoint Guru
    Join Date
    Feb 2002
    Posts
    625
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great! Thanks a lot, but there is only one problem, how am i supposed to preload images of which do not even know about.
    You see, this will allow for to put images into a folder and the script will read the files from the given directory, so preloading the images is sort of impossible.
    Any idea?

    And again thanks

    Cafe Central Nice one!
    Hope you enjoyed your stay in Vienna?

    Regards,
    datune

  4. #4
    Currently Occupied; Till Sunda Andrew-J2000's Avatar
    Join Date
    Aug 2001
    Location
    London
    Posts
    2,475
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    basic preloading is


    PHP Code:

    img 
    = new Image(); 
    img.src "portfolio/thumbs/pic_1.jpg"
    or you could try something like

    PHP Code:

    directory 
    'portfolio/thumbs/'

    var = new Array();

    i[0] = 'pic_db_';
    i[1] = 'pic_an_';
    i[2] = 'pic_el_';
    i[3] = 'pic_gr_';
    i[4] = 'pic_lo_';

    var 
    = new Array();

    n[0] = 'imgoneon';
    n[1] = 'imgtwoon';
    n[2] = 'imgthreeon';
    n[3] = 'imgfouron';
    n[4] = 'imgfiveon';



    for (
    a=0b=n.length-1;a<=b;a++)
    {
        
    document.write (n[a] + ' = new Image();<br>\n');
        
    document.write (n[a] + '.src = \"' directory i[a] + '<br>\n');


  5. #5
    SitePoint Guru
    Join Date
    Feb 2002
    Posts
    625
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Heya Andrew!

    You didn't get the message i think
    my script reads the files from a given folder, however, i do not know beforehand what files the folder will contain...
    It works a like this, anybody can put images into the folder, the PHP script will read those images from the folder..

    But thanks a lot anyway

  6. #6
    Currently Occupied; Till Sunda Andrew-J2000's Avatar
    Join Date
    Aug 2001
    Location
    London
    Posts
    2,475
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can read the file types using php which you could catergorise under

    PHP Code:
                    $extension='';
        
    $parts split('\.'$file_name);
        if (
    count($parts) > 1$extension end($parts);
        if (!
    $extension && count($parts) > 2$ext prev($parts); 
    this will get any extension of files then you could just say the file types you want to be displayed
    Last edited by Andrew-J2000; Apr 8, 2002 at 22:44.

  7. #7
    ********* obeah makeda's Avatar
    Join Date
    Jun 2001
    Location
    rollin' on dubs
    Posts
    492
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Andrew J200 is right, just dynamically write your javascript with php. By the time your client side code runs, you will already know what the images are because they will be read server-side.


Bookmarks

Posting Permissions

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