9 Replies Latest reply on Mar 3, 2013 8:29 PM by sudarshan.t

    Disjointed rollover on a apDiv (CS5.5)

    motiondude Level 1

      Hi There, I'm working on a disjointed rollover using css. I want to apply this on an apDiv but somehow it's not working.

      Here's what I try to do:

       

      I have a div with a big animated gif that auto starts.

      On top of that I have an apDiv with a small logo (animated gif) that fades in with jQuery after the big animated gif is done.

      This is all working fine.

      Now I want to make the small logo to act as a rollover, revealing an image somewhere on top of the main div.

       

      With the present css the small image that suppose to become visible when you hover over the logo doesn't show. Here's my code:

       

      body {
                margin-left: 0px;
                margin-top: 0px;
                margin-right: 0px;
                background-color: #ECF1F5;
                text-align: center;
      }
      #main {
                height: 540px;
                width: 960px;
                margin-right: auto;
                margin-left: auto;
                background-color: #FFF;
                z-index: 0;
      }
      .main_img  {
                margin-top: 0px;
                margin-right: 60px;
                margin-left: 60px;
                background-color: #FFF;
      }
      #h2 {
                background-color: #FFF;
                height: 80px;
                width: 960px;
                margin-right: auto;
                margin-left: auto;
      }
      .adres {
                margin-top: 10px;
                margin-left: 116px;
                display: none;
      }
      #wrapper {
                height: 620px;
                width: 960px;
                margin-right: auto;
                margin-left: auto;
                top: 0px;
      }
      #apDiv1 {
                position:absolute;
                width:900px;
                height:424px;
                z-index:1;
      }
      #pen {
                margin-top: 200px;
                margin-left: -100px;
      }
      #rollover {
                margin-left: 702px;
                margin-top: 60px;
                height: 92px;
                width: 194px;
                z-index: 2;
                display: none;
      }
      #rollover a {
                border:none;
                text-decoration:none;
                position: relative;
                margin-bottom: 100px;
      }
      #rollover a span {
                display:none;
                position: absolute;
                /**adjust positioning of full size images in px or %**/
      left: -300px;
                top: 300px;
                z-index: 3;
      }
      #rollover a:hover span, #rollover a:active span, #rollover a:focus span {
                display:block;
      }
      
      

       

      What have I done wrong here? I am by no means a code junkie so I can use all the help I can get.

      Thanks in advance!

        • 1. Re: Disjointed rollover on a apDiv (CS5.5)
          sudarshan.t Level 6

          Can you upload your files to a webserver and share the URL with us? OR, at the least, post your full code (including HTML markup) please?

          • 2. Re: Disjointed rollover on a apDiv (CS5.5)
            motiondude Level 1

            Thanks Sudarhan. Right now I don't have a testserver (lost iDisk) but here's the full code I have so far.

            Please note that for the mean time I have the image that I want to act as the rollover now set to fade up (11 sec) using jQuery.

             

             

            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

            <html xmlns="http://www.w3.org/1999/xhtml">

            <head>

            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

            <meta name="description" content="info" />

            <meta name="robots" content="index,follow,noarchive" />

            <meta name="keywords" content="info" />

            <title>name website</title>

            <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

            <script>

            $(function() {

                 $('#rollover').delay(6500).fadeIn(1500);

                 $('.adres').delay(7500).fadeIn(1000);

                 $('#panel').delay(11000).fadeIn(1000);

               });

            function MM_preloadImages() { //v3.0

              var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();

                var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)

                if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}

            }

            function MM_showHideLayers() { //v9.0

              var i,p,v,obj,args=MM_showHideLayers.arguments;

              for (i=0; i<(args.length-2); i+=3)

              with (document) if (getElementById && ((obj=getElementById(args[i]))!=null)) { v=args[i+2];

                if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }

                obj.visibility=v; }

            }

            </script>

            <style type="text/css">

            <!--

            /* CSS Document */

             

             

             

             

            body {

                      margin-left: 0px;

                      margin-top: 0px;

                      margin-right: 0px;

                      background-color: #ECF1F5;

                      text-align: center;

            }

            #main {

                      height: 540px;

                      width: 960px;

                      margin-right: auto;

                      margin-left: auto;

                      background-color: #FFF;

                      z-index: 0;

            }

            .main_img  {

                      margin-top: 0px;

                      margin-right: 60px;

                      margin-left: 60px;

                      background-color: #FFF;

            }

            #h2 {

                      background-color: #FFF;

                      height: 80px;

                      width: 960px;

                      margin-right: auto;

                      margin-left: auto;

            }

            .adres {

                      margin-top: 10px;

                      margin-left: 116px;

                      display: none;

            }

            #wrapper {

                      height: 620px;

                      width: 960px;

                      margin-right: auto;

                      margin-left: auto;

                      top: 0px;

            }

            #apDiv1 {

                      position:absolute;

                      width:900px;

                      height:424px;

                      z-index:1;

            }

            #pen {

                      margin-top: 200px;

                      margin-left: -100px;

            }

            #rollover {

                      margin-left: 702px;

                      margin-top: 60px;

                      height: 92px;

                      width: 194px;

                      z-index: 2;

                      display: none;

            }

            #rollover a {

                      border:none;

                      text-decoration:none;

                      position: relative;

                      margin-bottom: 100px;

            }

            #rollover a span {

                      display:none;

                      position: absolute;

                      /**adjust positioning of full size images in px or %**/

            left: -300px;

                      top: 300px;

                      z-index: 3;

            }

            #rollover a:hover span, #rollover a:active span, #rollover a:focus span {

                      display:block;

            }

            #panel {

                      margin-top: 200px;

                      display: none;

            }

            -->

            </style>

            </head>

             

             

             

             

            <body>

             

             

             

             

            <div id="wrapper">

            <div id="apDiv1">

            <a href="#"><img src="images/logo_r.gif" alt="adress details" name="rollover" id="rollover" /><span><image src="images/26letters.png" alt=" headline" name="panel" border="0" usemap="#panelMap" id="panel" />

            <map name="panelMap" id="panelMap">

              <area shape="poly" coords="14,19" href="#" />

              <area shape="poly" coords="12,21,31,70,324,80,338,8" href="name@company.nl" alt="email" />

            </map>

            </span></a></div>

             

             

             

             

            <div class="main" id="main">

              <img src="images/h1.gif" alt="headlines" name="main_img" width="840" height="540" class="main_img" id="main_img" />

              <div class="h2" id="h2"><img src="images/h2.png" alt="adress details" name="adres" width="718" height="26" border="0" usemap="#adresMap" class="adres" id="adres" />

                <map name="adresMap" id="adresMap">

                  <area shape="rect" coords="0,2,163,34" href="mailto:name@company.nl" alt="email" />

                </map>

                </div>

              </div>

            </div>

            </div>

            </body>

            </html>

             

             

            Any feedback in solving this would be highly appreciated!

            • 3. Re: Disjointed rollover on a apDiv (CS5.5)
              Nancy OShea Adobe Community Professional & MVP

              This forum doesn't support e-mail attachments.  You would need to come to web forum and paste  your code into a reply. 

               

              But a URL would be better. 

              http://www.000webhost.com/

               

               

              Nancy O.

              • 4. Re: Disjointed rollover on a apDiv (CS5.5)
                motiondude Level 1

                I wasn't emailing Nancy. Just copied it over from the code panel in DW. It got messesd as I dindn't know which forum option to choose from when it comes to posting html. Copied it over in TextEdit and then tried again. Now only the email hrefs are messy.

                • 5. Re: Disjointed rollover on a apDiv (CS5.5)
                  sudarshan.t Level 6

                  Perfect. The only thing you should now add are the 4 images you've used in your code so we can test it. Can you put them on DropBox or something and give us a link?

                  1 person found this helpful
                  • 6. Re: Disjointed rollover on a apDiv (CS5.5)
                    motiondude Level 1

                    Thanks for looking into this Sudarshan! Here's a link to the 4 assets in my DropBox: http://dl.dropbox.com/u/91632120/assets%E2%80%93testpage.zip

                    • 7. Re: Disjointed rollover on a apDiv (CS5.5)
                      sudarshan.t Level 6

                      Is 26letters.png (Info) the image that you want to show up when you hover on Logo?

                      1 person found this helpful
                      • 8. Re: Disjointed rollover on a apDiv (CS5.5)
                        motiondude Level 1

                        Yes, that's correct Sudarshan. I forgot to men