SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2002
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Drop Down Image Menu

    Can someone direct me as to create a basic javascript drop down menu that once you click one of the links an image and text appear under it.

  2. #2
    SitePoint Enthusiast mca00's Avatar
    Join Date
    Aug 2000
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I created a site with those type of menus in Dreamweaver. Visit the site and let me know if this is what you are talking about. Direct Express Pharmacy

  3. #3
    SitePoint Member
    Join Date
    Mar 2002
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  4. #4
    SitePoint Enthusiast
    Join Date
    Mar 2002
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The drop down bar as i the bar at the top of this page that says "current forum", where you use the scrollbar on the side and click one of the links. The images are not in the drop down menu. When you click one of the links "underneath" of the bar an image will pop up and also sohw text. I want to use this as sort of an image gallery.

  5. #5
    SitePoint Enthusiast
    Join Date
    Mar 2002
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Heres an example
    http://www.grandtheftauto.com/flash/...ens/index.html

    But instead of just an image, I also want to show text under each image

  6. #6
    SitePoint Enthusiast
    Join Date
    Mar 2002
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is there anyone that can help me.... I'm kind of in a rush.

  7. #7
    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)
    I haven't got a clue what you mean, but this is what i think you're on about. Any way it's damn late now guess im tired lol.

    PHP Code:

    <HTML>
    <
    HEAD>
    <
    STYLE TYPE="text/css">
    select {
        
    font11px verdana,arial,sans-serif;
        
    color#cccccc;
        
    background-color#000000;
        
    positionrelative;
        
    top5px;
    }

    font {
        
    font11px verdana,arial,sans-serif;
        
    color#cccccc;
    }

    </
    STYLE>
    <
    TITLE>Rockstar GamesGrand Theft Auto 3</TITLE>

    <
    script>

    function Switch(
    txt)
        {
            
            
    SwitchIt.innerHTML=txt;
        }

    function 
    reset()
        {
            
    SwitchIt.innerHTML="Select A Link";
        }

    </script>

    </HEAD>
    <BODY text="#ffffff" BGCOLOR="#000000" MARGINHEIGHT=0 MARGINWIDTH=0 LEFTMARGIN=0 TOPMARGIN=0>
    <TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 WIDTH=640>
        <TR>
            <TD ALIGN=LEFT><img src="graphics/gta3.gif" alt="" width="90" height="60"></TD>
            <TD ALIGN=RIGHT><A HREF="http://www.rockstargames.com" TARGET="_blank"><img src="graphics/rockstar.gif" alt="" width="70" height="60" BORDER=0></A></TD>
        </TR>
        <TR>
            <TD colspan=2 width=640 height=448><img src="bigScreens/screen1.jpg" width="640" height="448" border=1 name="myScreen"><br><div name="SwitchIt" id="SwitchIt"></div></TD>
        </TR>
        <TR>
            <TD COLSPAN=2 ALIGN=CENTER>
                <FORM name="myForm" action="#" method=post>
                    <SELECT name="selection" onChange="document.myScreen.src='graphics/loading.gif';document.myScreen.src=this.options[this.selectedIndex].value;Switch(this.options[this.selectedIndex].value)">
                        <OPTION value="bigScreens/screen1.jpg" selected>1</OPTION>
                        <OPTION value="bigScreens/screen2.jpg">2</OPTION>
                        <OPTION value="bigScreens/screen3.jpg">3</OPTION>
                        <OPTION value="bigScreens/screen4.jpg">4</OPTION>
                        <OPTION value="bigScreens/screen5.jpg">5</OPTION>
                        <OPTION value="bigScreens/screen6.jpg">6</OPTION>
                        <OPTION value="bigScreens/screen7.jpg">7</OPTION>
                        <OPTION value="bigScreens/screen8.jpg">8</OPTION>
                        <OPTION value="bigScreens/screen9.jpg">9</OPTION>
                        <OPTION value="bigScreens/screen10.jpg">10</OPTION>
                        <OPTION value="bigScreens/screen11.jpg">11</OPTION>
                        <OPTION value="bigScreens/screen12.jpg">12</OPTION>
                        <OPTION value="bigScreens/screen13.jpg">13</OPTION>
                        <OPTION value="bigScreens/screen14.jpg">14</OPTION>
                        <OPTION value="bigScreens/screen15.jpg">15</OPTION>
                        <OPTION value="bigScreens/screen16.jpg">16</OPTION>
                        <OPTION value="bigScreens/screen17.jpg">17</OPTION>
                        <OPTION value="bigScreens/screen18.jpg">18</OPTION>
                        <OPTION value="bigScreens/screen19.jpg">19</OPTION>
                        <OPTION value="bigScreens/screen20.jpg">20</OPTION>
                        <OPTION value="bigScreens/screen21.jpg">21</OPTION>
                        <OPTION value="bigScreens/screen22.jpg">22</OPTION>
                        <OPTION value="bigScreens/screen23.jpg">23</OPTION>
                        <OPTION value="bigScreens/screen24.jpg">24</OPTION>
                        <OPTION value="bigScreens/screen25.jpg">25</OPTION>
                        <OPTION value="bigScreens/screen26.jpg">26</OPTION>
                        <OPTION value="bigScreens/screen27.jpg">27</OPTION>
                        <OPTION value="bigScreens/screen28.jpg">28</OPTION>
                        <OPTION value="bigScreens/screen29.jpg">29</OPTION>
                        <OPTION value="bigScreens/screen30.jpg">30</OPTION>
                        <OPTION value="bigScreens/screen31.jpg">31</OPTION>
                        <OPTION value="bigScreens/screen32.jpg">32</OPTION>
                        <OPTION value="bigScreens/screen33.jpg">33</OPTION>
                        <OPTION value="bigScreens/screen34.jpg">34</OPTION>
                        <OPTION value="bigScreens/screen35.jpg">35</OPTION>
                        <OPTION value="bigScreens/screen36.jpg">36</OPTION>
                        <OPTION value="bigScreens/screen37.jpg">37</OPTION>
                        <OPTION value="bigScreens/screen38.jpg">38</OPTION>
                        <OPTION value="bigScreens/screen39.jpg">39</OPTION>
                        <OPTION value="bigScreens/screen40.jpg">40</OPTION>
                        <OPTION value="bigScreens/screen41.jpg">41</OPTION>
                        <OPTION value="bigScreens/screen42.jpg">42</OPTION>
                        <OPTION value="bigScreens/screen43.jpg">43</OPTION>
                        <OPTION value="bigScreens/screen44.jpg">44</OPTION>
                        <OPTION value="bigScreens/screen45.jpg">45</OPTION>
                        <OPTION value="bigScreens/screen46.jpg">46</OPTION>
                        <OPTION value="bigScreens/screen47.jpg">47</OPTION>
                        <OPTION value="bigScreens/screen48.jpg">48</OPTION>
                        <OPTION value="bigScreens/screen49.jpg">49</OPTION>
                        <OPTION value="bigScreens/screen50.jpg">50</OPTION>
                        <OPTION value="bigScreens/screen51.jpg">51</OPTION>
                        <OPTION value="bigScreens/screen52.jpg">52</OPTION>
                        <OPTION value="bigScreens/screen53.jpg">53</OPTION>
                        <OPTION value="bigScreens/screen54.jpg">54</OPTION>
                        <OPTION value="bigScreens/screen55.jpg">55</OPTION>
                        <OPTION value="bigScreens/screen56.jpg">56</OPTION>
                        <OPTION value="bigScreens/screen57.jpg">57</OPTION>
                        <OPTION value="bigScreens/screen58.jpg">58</OPTION>
                        <OPTION value="bigScreens/screen59.jpg">59</OPTION>
                        <OPTION value="bigScreens/screen60.jpg">60</OPTION>
                    </SELECT>
                </FORM>
            </TD>
        </TR>
    </TABLE>
    </BODY>
    </HTML> 

  8. #8
    SitePoint Enthusiast
    Join Date
    Mar 2002
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    When you click a link a pictures appears. Imagine different text appearing under the image for each image. For example if you click 54, a picture would pop up and under it would be text. If you click 56 a new picture would appear with its own new text. I don't know why its hard to understand, just need to know if I can do it or not.

  9. #9
    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)
    heres a quick example


    PHP Code:

    <HTML>
    <
    HEAD>
    <
    STYLE TYPE="text/css">
    select {
        
    font11px verdana,arial,sans-serif;
        
    color#cccccc;
        
    background-color#000000;
        
    positionrelative;
        
    top5px;
    }

    font {
        
    font11px verdana,arial,sans-serif;
        
    color#cccccc;
    }

    </
    STYLE>
    <
    TITLE>Rockstar GamesGrand Theft Auto 3</TITLE>

    <
    script>

    function Switch(
    txt)
        {
            
            
    SwitchIt.innerHTML=txt;
        }

    function 
    reset()
        {
            
    SwitchIt.innerHTML="Select A Link";
        }


    var 
    text = new Array;

    text[0]         = 'image 1';    text[1]         = 'image 2';
    text[2]         = 'image 3';    text[3]         = 'image 4';
    text[4]         = 'image 5';    text[5]         = 'image 6';
    text[6]         = 'image 7';    text[7]         = 'image 8';
    text[8]         = 'image 9';    text[9]         = 'image 10';
    text[10]        = 'image 11';    text[11]        = 'image 12';
    text[12]        = 'image 13';    text[13]        = 'image 14';
    text[14]        = 'image 15';    text[15]        = 'image 16';
    text[16]        = 'image 17';    text[17]        = 'image 18';
    text[18]        = 'image 19';    text[19]        = 'image 20';


    </script>

    </HEAD>
    <BODY text="#ffffff" BGCOLOR="#000000" MARGINHEIGHT=0 MARGINWIDTH=0 LEFTMARGIN=0 TOPMARGIN=0>
    <TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 WIDTH=640>
        <TR>
            <TD ALIGN=LEFT><img src="graphics/gta3.gif" alt="" width="90" height="60"></TD>
            <TD ALIGN=RIGHT><A HREF="http://www.rockstargames.com" TARGET="_blank"><img src="graphics/rockstar.gif" alt="" width="70" height="60" BORDER=0></A></TD>
        </TR>
        <TR>
            <TD colspan=2 width=640 height=448><img src="bigScreens/screen1.jpg" width="640" height="448" border=1 name="myScreen"><br><div name="SwitchIt" id="SwitchIt"></div></TD>
        </TR>
        <TR>
            <TD COLSPAN=2 ALIGN=CENTER>
                <FORM name="myForm" action="#" method=post>
                    <SELECT name="selection" onChange="document.myScreen.src='graphics/loading.gif';document.myScreen.src=this.options[this.selectedIndex].value;Switch(text[this.options[this.selectedIndex].text-1])">
                        <OPTION value="bigScreens/screen1.jpg" selected>1</OPTION>
                        
                        <script>

                            for (a=2,b=60;a<=b;a++)
                            {
                                document.write ('<OPTION id=' + a + ' value="bigScreens/screen' + a + '.jpg">' + a + '</OPTION>')
                            }
                            
                        </script>
                        
                    </SELECT>
                </FORM>
            </TD>
        </TR>
    </TABLE>
    </BODY>
    </HTML> 

  10. #10
    SitePoint Enthusiast
    Join Date
    Jun 2001
    Posts
    87
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    mca00,
    I would really like to know how to create the drop down menus as on the top menu bar of your site given above. Can you help me?

  11. #11
    SitePoint Enthusiast mca00's Avatar
    Join Date
    Aug 2000
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry Spock for the wayyyy late response. The drop down menus were created with a Dreamweaver behaviour. Do you use Dreamweaver?

  12. #12
    SitePoint Enthusiast
    Join Date
    Jun 2001
    Posts
    87
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm a hand coder. And would like to learn how to program these drop downs. Still haven't had the time yet to dig into CSS which is how I believe this menu is done.

    Thanks for the reply.

  13. #13
    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)
    I'm a hand coder. And would like to learn how to program these drop downs. Still haven't had the time yet to dig into CSS which is how I believe this menu is done.
    can't really say its programming, but all a drop down menu is,

    PHP Code:

    <select>
      <
    option>list 1</option>
      <
    option>list 2</option>
      <
    option>list 3</option>
      <
    option>list 4</option>
      <
    option>list 5</option>
    </
    select

  14. #14
    SitePoint Enthusiast mca00's Avatar
    Join Date
    Aug 2000
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Spock take a look at http://www.projectseven.com/tutorial...hide/index.htm
    This is where the menu s located. it is possible to do by hand with a little tweaking to get the menus positioned where you want them.


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
  •