www.webdeveloper.com
Results 1 to 6 of 6

Thread: HELP. Drop down pictures like drop down menu

  1. #1
    Join Date
    Sep 2005
    Posts
    4

    HELP. Drop down pictures like drop down menu

    Hi, I need to make drop down pictures like drop down menue, so that the pictures will drop not just appear, and I don't need any menu fanctionality. I'd greatly appreciate your help.

  2. #2
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,860
    Hi there sofia,

    and a warm welcome to these forums.

    Try this working example...
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <title>drop down gorgeous</title>
    <base href="http://achelous.mysite.wanadoo-members.co.uk/"/>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
    <meta name="Content-Script-Type" content="text/javascript"/>
    <meta name="Content-Style-Type" content="text/css"/>
    <style type="text/css">
    <!--
    body {
         background-color:#eef;
         color:#000;
     }
    #pic0,#pic1,#pic2,#pic3,#pic4 {
         position:absolute;
         left:50%;
         top:-124px;
         width:100px;
         height:100px;
         border:1px solid #000;
     }
    #pic0 {
         margin-left:-264px;
         background-image:url(anim.gif);
     }
    #pic1 {
         margin-left:-158px;
         background-image:url(anim1.gif);
     }
    #pic2 {
         margin-left:-52px;
         background-image:url(anim2.gif);
     }
    #pic3 {
         margin-left:54px;
         background-image:url(anim3.gif);
     }
    #pic4 {
         margin-left:160px;
         background-image:url(anim4.gif);
     }
    -->
    </style>
    
    <script type="text/javascript">
    <!--
      var num=0
      var i=-124;
      var speed=20;
    
    function dropDown() {
       document.getElementById('pic'+num).style.top=i+'px';
    if(i<50) {
       i++;
      dropper=setTimeout('dropDown()',speed);
    }
    else {
    if(num<4) {
       num=num+1
       i=-124
       setTimeout('dropDown()',speed);
    }
    else {
    if(num==4) {
       clearTimeout(dropper);
       return;
        }
       }
      }
     }
    onload=dropDown;
    //-->
    </script>
    
    </head>
    <body>
    
    <div id="pic0"></div>
    <div id="pic1"></div>
    <div id="pic2"></div>
    <div id="pic3"></div>
    <div id="pic4"></div>
    
    </body>
    </html>
    coothead

  3. #3
    Join Date
    Sep 2005
    Posts
    4
    Thanks. I like it, however it's not exactly what I need. I need the pictures /or picture to appear just like the drop down menu, on mouse over. The picture should continuously drop down like in your example, not just apprear like any drop down menu. Pls, help

  4. #4
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,860
    Hi there sofia,

    could this possibly be a little more to your taste...
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>expose and unexpose</title>
    <base href="http://achelous.mysite.wanadoo-members.co.uk/"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="Content-Script-Type" content="text/javascript"/>
    <meta name="Content-Style-Type" content="text/css"/>
    <style type="text/css">
    /*<![CDATA[*/
    
    body {
         background-color:#ccf;
         color:#000;
     }
    #wrapper {
         width:520px;
         margin:30px auto;
    }
    .container {
         display:inline;
         width:102px;
         margin-left:2px;
         float:left;
    }
    #foo0,#foo1,#foo2,#foo3,#foo4,.blah { 
         width:100px; 
         background-color:#fff;
         font-family:verdana,sans-serif;
         font-size:16px;
         color:#000;
         text-align:center;
         border:solid 1px #000;    
         padding:5px 0px;
     }
    #foo0,#foo1,#foo2,#foo3,#foo4 {
         padding:0px;
         height:0px; 
         overflow:hidden; 
         border-top:0px;
    }
    #foo0 {
         background-image:url(anim.gif);
    }
    #foo1 {
         background-image:url(anim1.gif);
    }
    #foo2 {
         background-image:url(anim2.gif);
    }
    #foo3 {
         background-image:url(anim3.gif);
    }
    #foo4 {
         background-image:url(anim4.gif);
    }
    .blah {
         border-bottom:0px;
         cursor:pointer;
     }
    
    /*//]]>*/
    </style>
    
    <script type="text/javascript">
    //<![CDATA[
    
     var i=0;
     var exposer;
     var x;
     var speed=20;
    
    function expose(el,num) {
       obj=el
       x=num
       pic=document.getElementById("foo"+x)
       pic.style.height=i+"px";
       pic.style.borderTop="1px solid #000";
       i+=2;
    if(i>102) {
       i=0;
       return;
     }
    exposer=setTimeout("expose(obj,x)",speed);
    
    obj.onmouseout=function() {
       i=0;
       clearTimeout(exposer);
       pic.style.height="0px";
       pic.style.borderTop="0px";
       }
      }
    
    //]]>
    </script>
    
    </head>
    <body>
    
    <div id="wrapper">
    
    <div class="container">
    <div class="blah" onmouseover="expose(this,0)">image 1</div>
    <div id="foo0"></div>
    </div>
    
    <div class="container">
    <div class="blah" onmouseover="expose(this,1)" >image 2</div>
    <div id="foo1"></div>
    </div>
    
    <div class="container">
    <div class="blah" onmouseover="expose(this,2)">image 3</div>
    <div id="foo2"></div>
    </div>
    
    <div class="container">
    <div class="blah" onmouseover="expose(this,3)">image 4</div>
    <div id="foo3"></div>
    </div>
    
    <div class="container">
    <div class="blah" onmouseover="expose(this,4)">image 5</div>
    <div id="foo4"></div>
    </div>
    
    </div>
    
    </body>
    </html>
    coothead

  5. #5
    Join Date
    Sep 2005
    Posts
    4
    Cool, great Thanks!!!!!!!!
    Will it work if my webpage consists of drop down images only? The thing is, I'm going to make a page with 150X150 size pictures, like mosaic, and when you roll the mouse over, another image drops down like in your example. but the rest stay on their places. I noticed that the drop down effect moves the text below, can we leave it on its place. because I don't want all my images to be moving down with this effect. Also, is it possible to drop down the picture, so that its bottom appears first, like a roll of paper, you contiuously roll down paper.
    thanks again!!!!!!!

  6. #6
    Join Date
    Sep 2005
    Posts
    4
    Coothead, where are you???????? I need your help!!!!!!!!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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

"

"

X vBulletin 4.2.2 Debug Information

  • Page Generation 0.23519 seconds
  • Memory Usage 2,884KB
  • Queries Executed 13 (?)
More Information
Template Usage (33):
  • (1)SHOWTHREAD
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_global_above_footer
  • (1)ad_global_below_navbar
  • (1)ad_global_header1
  • (1)ad_global_header2
  • (1)ad_navbar_below
  • (1)ad_showthread_firstpost_sig
  • (1)ad_showthread_firstpost_start
  • (1)ad_thread_first_post_content
  • (1)ad_thread_last_post_content
  • (2)bbcode_code
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)headinclude_bottom
  • (6)memberaction_dropdown
  • (1)navbar
  • (4)navbar_link
  • (1)navbar_moderation
  • (1)navbar_noticebit
  • (1)navbar_tabs
  • (2)option
  • (6)postbit
  • (6)postbit_onlinestatus
  • (6)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available (6):
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files (26):
  • ./showthread.php
  • ./global.php
  • ./includes/class_bootstrap.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/functions_navigation.php
  • ./includes/class_friendly_url.php
  • ./includes/class_hook.php
  • ./includes/class_bootstrap_framework.php
  • ./vb/vb.php
  • ./vb/phrase.php
  • ./includes/functions_facebook.php
  • ./includes/functions_calendar.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_notice.php
  • ./packages/vbattach/attach.php
  • ./vb/types.php
  • ./vb/cache.php
  • ./vb/cache/db.php
  • ./vb/cache/observer/db.php
  • ./vb/cache/observer.php 

Hooks Called (70):
  • init_startup
  • friendlyurl_resolve_class
  • init_startup_session_setup_start
  • database_pre_fetch_array
  • database_post_fetch_array
  • init_startup_session_setup_complete
  • global_bootstrap_init_start
  • global_bootstrap_init_complete
  • cache_permissions
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • load_show_variables
  • load_forum_show_variables
  • global_state_check
  • global_bootstrap_complete
  • global_start
  • style_fetch
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • strip_bbcode
  • friendlyurl_clean_fragment
  • friendlyurl_geturl
  • forumjump
  • cache_templates
  • cache_templates_process
  • template_register_var
  • template_render_output
  • fetch_template_start
  • fetch_template_complete
  • parse_templates
  • fetch_musername
  • notices_check_start
  • notices_noticebit
  • process_templates_complete
  • friendlyurl_redirect_canonical
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • memberaction_dropdown
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • build_navigation_data
  • build_navigation_array
  • check_navigation_permission
  • process_navigation_links_start
  • process_navigation_links_complete
  • set_navigation_menu_element
  • build_navigation_menudata
  • build_navigation_listdata
  • build_navigation_list
  • set_navigation_tab_main
  • set_navigation_tab_fallback
  • navigation_tab_complete
  • fb_like_button
  • showthread_complete
  • page_templates