#1
  1. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2001
    Posts
    3
    Rep Power
    0

    Thumbs down Javascript with PHP!


    I have a Form in HTML, which contains a
    <select>
    <option>Picture 1
    <option>Picture 2
    </select>
    style. When the user clicks the option, a Javascript dynamically displays that image.
    However, when layers are present in the HTML, then Netscape doesn't display any inputs or submit buttons further down the page.
    You can see what I mean at
    http://www.tendenziauk.com/fubb/user...new_user=renew
    and so people can't submit it.
    I have a variable with the URL of the picture in, but whenever I put it in layer tags ( or ilayer ) then it fails. Also, <div> tags don't work!
    If anyone has any method of displaying the picture, I would be very appreciative!
    Thanks for your help!
  2. #2
  3. No Profile Picture
    Señor Member
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2000
    Posts
    1,157
    Rep Power
    37
    You can't use a <div> inside a <td>. Try ending the table and having the remaining contents not be inside a table.
    Michael
  4. #3
  5. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2001
    Posts
    3
    Rep Power
    0

    Thumbs down


    Thanks for getting back, but the <div> is fine, it doesn't bother netscape, but I still have the problems with the layers.

    Removing it from a table is out of the question, so that I can keep the same layout.
    Your help is appreciated, but do you have any more ideas?
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2001
    Location
    la, ca
    Posts
    84
    Rep Power
    14
    why not just try a simple image swap?

    Instead of using div's and ilayers in that table's cell, just put a gif colored the same thing as that cell's background color. then, change the onChange event handler associated with your select box to swap the image. Example:

    *i'm labeling the selectbox "avatarselect" and the blank gif "thepic". You'll be able to switch between homer and barney pics*

    [javascript]
    // preload
    none = new Image(); none.src = "none.gif";
    barney = new Image(); barney.src = "barney.gif";
    homer = new Image(); homer.src = "homer.gif";

    // function to swap image
    function selectSwap(form){
    var swap = form.avatarselect.options[form.avatarselect.selectedIndex].value;
    document.thepic.src = eval(swap + ".src");
    }


    [html]
    <form name="myform">
    <select name="avatarselect" size="1" onChange="selectSwap(this.form)">
    <option value="none">Choose one</option>
    <option value="barney">barney</option>
    <option value="homer">homer</option>
    </select>
    </form>

    then in the table cell:
    <img src="none.gif" name="thepic">

    and that's it (well, after adding if (document.images) to your javascript).! when people change the option, it'll replace none.src (none.gif) with option.src (option.gif). so you avoid using div's/ilayers!

    i tested this, putting it inside table cells and it works perfectly fine in netscape 4.7x and ie. one thing you might want to do though is make sure that all the avatar's are sized the same, and that they have the same dimensions (w and h) as the blank gif. ie's forgiving and will swap any sized image, but netscape will resize the swapped image to fit the size of the blank gif.
  8. #5
  9. No Profile Picture
    Señor Member
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2000
    Posts
    1,157
    Rep Power
    37
    Didn't you say that the <div> wasn't working?

    I think it has to do with the fact that Netscape considers them to be block-level elements. The reason I pointed out the <div> inside a <td>, is because Netscape is strict about how your order/nest elements.

    See also:
    show and hide layers
    http://developer.apple.com/internet/_html/quirks.html
    http://www.dithered.com/archives/200104.html#03_4

    Start a new page from scratch, with image. Then, one-by-one, surround the image with the other elements. This will show you what you can and can't do. There is a precise order of which tags can be enclosed by what tags. Also, whether or not you like it, Netscape won't display some things properly if you place them inside a table.

    Also, you may want to consider not using <layer> or <ilayer>, if you wish to support Netscape Navigator 6.x:

    http://www.netobjects.com/support/html/nfmxfaqag.html
    NetObjects Fusion doesn’t support Netscape 6.0. This is due to the fact that Netscape 6.0 doesn’t support the Layer and ILayer HTML tags as per W3C standards.
    Michael
  10. #6
  11. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2001
    Posts
    3
    Rep Power
    0

    Thumbs up Cheers!


    Thanks for both of the replies, they have been really useful.
    For some reason, I had never thought of an image swap???


    pieux: Sorry if I sounded arrogant or not thankful, your help has been great, and I will get right on with trying to see what it will and won't do!

    Thanks again!
    Howard
  12. #7
  13. No Profile Picture
    Señor Member
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2000
    Posts
    1,157
    Rep Power
    37
    No problem, howdj. I understand - I've been there myself.
    Michael
  14. #8
  15. No Profile Picture
    Web weaver
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2001
    Location
    Norway
    Posts
    6
    Rep Power
    0
    Originally posted by dsknkt
    why not just try a simple image swap?

    Instead of using div's and ilayers in that table's cell, just put a gif colored the same thing as that cell's background color.

    [...]

    And even better (since there are no really web safe colors): use a transparent gif

    (yes I know this had nothing to do with neither JavaScript or his problem, but I work with web designers )
  16. #9
  17. No Profile Picture
    Señor Member
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2000
    Posts
    1,157
    Rep Power
    37
    The only problem with that, is that it will not print as "transparent" regardless if you print from Netscape or IE. Then again, printing may not be desired in this application.
    Michael
  18. #10
  19. No Profile Picture
    Divine Wind
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2001
    Location
    Mongo
    Posts
    24
    Rep Power
    0
    I stumbled across this which does exactly what you want:

    DynamicDrive

    Emps

IMN logo majestic logo threadwatch logo seochat tools logo