Skip navigation
Currently Being Moderated

Disjointed rollover on a apDiv (CS5.5)

Mar 1, 2013 4:15 AM

Tags: #dreamweaver #css #disjointed_rollover

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!

 
Replies
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Mar 1, 2013 9:37 AM   in reply to motiondude

    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?

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 1, 2013 1:14 PM   in reply to motiondude

    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.

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Mar 1, 2013 8:05 PM   in reply to motiondude

    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?

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Mar 3, 2013 12:20 AM   in reply to motiondude

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

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Mar 3, 2013 8:29 PM   in reply to motiondude

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

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points