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

    Disjointed rollover on a apDiv (CS5.5)

    motiondude Community Member

      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 MVP

          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 Community Member

            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 O. 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 Community Member

                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 MVP

                  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?

                  • 6. Re: Disjointed rollover on a apDiv (CS5.5)
                    motiondude Community Member

                    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 MVP

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

                      • 8. Re: Disjointed rollover on a apDiv (CS5.5)
                        motiondude Community Member

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

                        The big animated gif auto starts, then the logo fades up followed shortly by the address info, both driven by jQuery.

                        The logo is an animated gif on which I want to apply the rollover that shows an info panel.

                        Roll off and the panel dissapears. That's what I want to do.

                        • 9. Re: Disjointed rollover on a apDiv (CS5.5)
                          sudarshan.t MVP

                          <!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">

                          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;

                          }

                           

                          span#info {

                              display: none;

                          }

                           

                          a#infotrigger:hover span#info {

                              position: absolute;

                              left: 160px;

                              top: 240px;

                              width: 349px;

                              height: 89px;

                              position: absolute;

                              display: block;

                          }

                          </style>

                          </head>

                           

                          <body>

                          <div id="wrapper">

                            <div id="apDiv1"> <a href="#" id="infotrigger"><img src="images/logo_r.gif" alt="adress details" name="rollover" id="rollover" /> <span id="info"> <img 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="mailto: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>

                           

                          In bold is what I've added. Some lines from your old code have been removed.

                           

                          What I've done here is used pure CSS (no jQuery) to trigger a display of an element on hover. But, do note that image maps here are pointless as the 'info' image will be shown only when you hover on logo - will disappear again when you mouseout from logo. So, an image map will make no sense.

                           

                          -ST