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.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Jul 2002
    Location
    San Jose
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts

    link and display images from a dropdown list

    I am trying to create a Select (dropdown list) that will display images that are linked to each Select option. Furthermore, the images must have a mouseover that displays a message in the status bar and be clickable to an outside link.

    When I load my script, the Select list displays and an image displays. But, when I mouseover the image, I get this message: window.document.picture has no property indexed by '4'.

    Secondly, I can't seem to link the images to the dropdown list properly. Nothing happens when I choose an option. I think I'm calling the wrong function for the onChange. Or, I don't have the options named properly.

    I have attached my script. I would appreciate it if you can offer some insight.

    Thanks.
    Attached Files Attached Files

  • #2
    New Coder
    Join Date
    Jul 2002
    Location
    San Jose
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts

    revised: images stack on top of each other and status messages don't work

    I rewrote the script (attached). The images are now linked to the dropdown list.

    However, I have two different sets of problems.

    Netscape 3x:
    1. When the option is changed, the image stacks on top of the previous one.
    2. Status message doesn't display.
    3. Clicking the link results in a "file not found; null" type of error.

    IE 5.5:
    1. Status message doesn't display.

    see source of page at : http://www.geocities.com/bevcuria/342

  • #3
    New Coder
    Join Date
    Jul 2002
    Location
    San Jose
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sorry, the script is NOT attached. Please ignore the first file that I uploaded. It has been rewritten.

    However, please view the source code at
    http://www.geocities.com/bevcuria/342

  • #4
    Regular Coder
    Join Date
    Jul 2002
    Location
    U.S. (Wish Japan though)
    Posts
    141
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Try changing status to window.status

  • #5
    New Coder
    Join Date
    Jul 2002
    Location
    San Jose
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I changed the status to window.status. No good. Still have same problems.

  • #6
    Regular Coder
    Join Date
    Jul 2002
    Location
    U.S. (Wish Japan though)
    Posts
    141
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well, lets see here...

    Yuo forgot to send the status changer the selectedIndex... You have to do that in every function, not just the images one.

    This includes the link function.

    Now as for your onmouseOut problem, I would probably just set a function...

    function mout()
    {
    window.status=" "
    }

    and in your link area.....

    onmouseOut="mout()"

    Hope that helps

  • #7
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    Hi Beverley...

    All the errors I ran into were being generated by that geocities debris at the bottom. Cleaned that up & it worked wonders.

    Netscape 3? My recommendation: faggedaboutit.
    Navigator 4 is on its last legs - we hope. You have better ways to spend you time (DOM? XML?).

    A few suggestions:


    <HTML>
    <HEAD>
    <TITLE>Assignment 3, Exercise 2</TITLE>
    <base href="http://www.geocities.com/bevcuria/">
    <script type="text/javascript">
    <!--

    if (document.images) {
    var picture = new Array();
    picture[0] = new Image();
    picture[0].src = "images/me.gif";

    picture[1] = new Image();
    picture[1].src = "images/myaunt.gif";

    picture[2] = new Image();
    picture[2].src = "images/brother.gif";
    }

    var URL= new Array();
    URL[0] = "http://www.stc-siliconvalley.org/";
    URL[1] = "http://sislands.com/coin70/week3/crossword.htm";
    URL[2] = "http://www.utah.com";

    var Msg = new Array();
    Msg[0] = "I am a member of STC. Click here to find out more about the Silicon Valley Chapter of STC.";
    Msg[1] = "Auntie likes crossword puzzles, and Frank has a cool one here.";
    Msg[2] = "My brother lives in Salt Lake City. Check it out!";

    function rotate(which) {
    if (document.images) document.pix.src = picture[which].src;
    }

    function jumpto() {
    location.href = URL[document.mygallery.mySelect.selectedIndex];
    }

    function displayMsg() {
    window.status = Msg[document.mygallery.mySelect.selectedIndex];
    }

    function mouseDone() {
    window.status = "";
    }

    //-->
    </script>
    </HEAD>
    <BODY BGCOLOR="white" >
    <H1>Beverley Curia</H1>
    <H2>Assignment 3, Week 4, Exercise 2 (342.htm)</H2>
    <P>Questions?
    <BR>Send me an email: <A HREF="http://bevcuria@hotmail.com">bevcuria@hotmail.com</A></P>
    <BR>Enable a drop down combo box that allows surfers to choose among many images to be shown.
    <BR>For example, if the User chooses Picture of "My Aunt" in the Pull Down Menu, the picture of "Me" will be replaced by the picture of "My Aunt".
    <BR>
    <BR>Requirements:
    <UL>
    <LI>Each image is linked to a different URL and is clickable.
    <LI>On a MouseOver, have a Status Bar Message appear for each individual Image.
    <LI>Make sure that this exercise is "Browser Compatible".
    </UL>
    <BR>
    <p align="center">
    <form name="mygallery">
    <select name="mySelect" onChange="rotate(this.selectedIndex)">
    <option selected>Picture of me</option>
    <option >Picture of my aunt</option>
    <option >Picture of my brother</option>
    </select>
    </p>
    </form>
    <p align="center">
    <A HREF="#"
    onMouseOver="displayMsg();return true"
    onMouseOut="mouseDone()"
    onclick="jumpto();return false;">
    <img src="images/me.gif" name="pix" border="0" WIDTH="99" HEIGHT="100"></A>
    </center></p>
    <HR>
    <P><CENTER><A HREF="http://www.geocities.com/bevcuria/assign3.html">Return to my Assignment 3 List</A></CENTER></P>
    </BODY>
    </HTML>

    Always nice to include a <base href when you're posting this sort of thing for analysis.

    cheers

  • #8
    New Coder
    Join Date
    Jul 2002
    Location
    San Jose
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts

    re: geocities junk and Netscape 4

    Thanks for your help. The only reason I'm testing Netscape 3 is for a class I'm taking. All of our scripts have to work in it so that we can see any tiny little coding error (that might otherwise slip through the cracks in newer browsers).

    I would love to move on to XML. But for my current classwork, I need to understand JavaScript, Perl, and CGI with Perl.

    Perhaps I can keep you in mind for future help?

    By the way, I got the script to work. The problem: a misplaced " in the MouseOver code!


  •  

    Posting Permissions

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