CSS Layering with Z-index & Mouseover Pop Ups

  • brittagyrl
  • Novice
  • Novice
  • User avatar
  • Posts: 32
  • Loc: Ogden, Utah

Post 3+ Months Ago

My boss wants to use this layout (see image below) for a new project we are working on at the library.

He wants each individual image on the desk to pop-up with a larger version of itself on mouseovers only. This is a little over my head. I've already sliced up all the images in Fireworks but getting it to have the mouse-over pop up is driving me crazy.

Does anyone know of any good tutorials of how to use both z-index layering AND pop ups using only CSS?
Attachments:
woodDesk.jpg

This is the layout. I actually have it up on our site though if I can SOMEHOW get someone and external link.



View Progress here http://dctest.weber.edu/custompages/ucui/deskmock/index.php
Moderator Remark: added link for OP
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • brittagyrl
  • Novice
  • Novice
  • User avatar
  • Posts: 32
  • Loc: Ogden, Utah

Post 3+ Months Ago

Hello.....IS there Anybody out there?
  • graphixboy
  • Control + Z
  • Mastermind
  • User avatar
  • Posts: 1828
  • Loc: In the Great White North

Post 3+ Months Ago

I assume you'll have to use some javascript in addition to css to properly swap z-indexes. I don't have a tutorial off hand but try searching for jquery and z-index to see if anything shows up.

A note of advise. I wouldn't simply slice this up in imageready. I think its wise to create each object separately without any of the other content in the way. So the full (empty) desk as a background and then each object as one image all alone without anything overlapping it. At that point you can swap depths and it won't matter what's on top of anything else.

As much as it pains me to say this, I think Flash would be a much easier solution to this problem. I think your going to spend a lot of time getting it to work across web browsers and dealing with the fact that you can't have a non-rectangular click area in HTML.
  • brittagyrl
  • Novice
  • Novice
  • User avatar
  • Posts: 32
  • Loc: Ogden, Utah

Post 3+ Months Ago

Hi Graphixboy!
I'm so happy you responded to this.

I'm having a hell of a time trying to make this happen. If there is a way I can email you the link, maybe you can see my pain.

The goal is to create CSS pop ups for each of these images on this desk.

He DOES NOT want to use any Javascript and seems to think this is a realistic possibility.

Here is my HTML:
HTML Code: [ Select ]
<body bgcolor="#000000"><center>
<table border="0" cellpadding="0" cellspacing="0" width="899">
<!-- fwtable fwsrc="UCUImain.png" fwpage="Page 1" fwbase="ucui.jpg" fwstyle="Dreamweaver" fwdocid = "2010783289" fwnested="0" -->
  <tr>
   <td><img src="spacer.gif" width="288" height="1" border="0" alt="" /></td>
   <td><img src="spacer.gif" width="611" height="1" border="0" alt="" /></td>
   <td><img src="spacer.gif" width="1" height="1" border="0" alt="" /></td>
  </tr>
 
  <tr>
   <td colspan="2"><img src="desk.jpg"  /></td>
   <td><img src="spacer.gif" width="1" height="109" border="0" alt="" /></td>
  </tr>
  <tr>
 
</table>
</body>
 
  1. <body bgcolor="#000000"><center>
  2. <table border="0" cellpadding="0" cellspacing="0" width="899">
  3. <!-- fwtable fwsrc="UCUImain.png" fwpage="Page 1" fwbase="ucui.jpg" fwstyle="Dreamweaver" fwdocid = "2010783289" fwnested="0" -->
  4.   <tr>
  5.    <td><img src="spacer.gif" width="288" height="1" border="0" alt="" /></td>
  6.    <td><img src="spacer.gif" width="611" height="1" border="0" alt="" /></td>
  7.    <td><img src="spacer.gif" width="1" height="1" border="0" alt="" /></td>
  8.   </tr>
  9.  
  10.   <tr>
  11.    <td colspan="2"><img src="desk.jpg"  /></td>
  12.    <td><img src="spacer.gif" width="1" height="109" border="0" alt="" /></td>
  13.   </tr>
  14.   <tr>
  15.  
  16. </table>
  17. </body>
  18.  


And Here is my CSS:

CSS Code: [ Select ]
@charset "UTF-8";
/* CSS Document */
 
body {
   margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
   padding: 0;
   text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
   color: #000000;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 100%;
   background-color: #000000;
}
 
/* Tips for Elastic layouts
1. Since the elastic layouts overall sizing is based on the user's default fonts size, they are more unpredictable. Used correctly, they are also more accessible for those that need larger fonts size since the line length remains proportionate.
2. Sizing of divs in this layout are based on the 100% font size in the body element. If you decrease the text size overall by using a font-size: 80% on the body element or the #container, remember that the entire layout will downsize proportionately. You may want to increase the widths of the various divs to compensate for this.
3. If font sizing is changed in differing amounts on each div instead of on the overall design (ie: #sidebar1 is given a 70% font size and #mainContent is given an 85% font size), this will proportionately change each of the divs overall size. You may want to adjust based on your final font sizing.
*/
 #container {
   width: 1190px; /* this overrides the text-align: center on the body element. */
   margin-top: 0;
   margin-right: auto;
   margin-bottom: 0;
   margin-left: auto;
   border: 1px solid #000000;
   background-color: #000000;
   height: 1013px;
   position: absolute;
   left: 180px;
}
 #header {
   padding: 0;  /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
   background-color: #000000;
   background-position: center;
   position: absolute;
   top: 0px;
}
#desk {
   margin: 0px;
   padding: 0px;
   background-color: #000000;
   background-image:url(../../custompages/ucui/deskmock/desk.jpg);
   background-repeat:no-repeat;
   height: 924px;
   width: 1190px;
   z-index: 1;
   position: absolute;
   top: 90px;
}
#annual {
   position:absolute;
   left:0px;
   top:645px;
   z-index: 2;
}
.span.annual {
   background-image:url("../../custompages/ucui/deskmock/annual.png");
   background-repeat: no-repeat;
   display:block;
   height: 368px;
   width: 406px;
}
.span.annual:hover img {
background-image:url("../../custompages/ucui/deskmock/annualUP.png");
   visibility:hidden;
   height: 368px;
   width: 430px;
}
  1. @charset "UTF-8";
  2. /* CSS Document */
  3.  
  4. body {
  5.    margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
  6.    padding: 0;
  7.    text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
  8.    color: #000000;
  9.    font-family: Verdana, Arial, Helvetica, sans-serif;
  10.    font-size: 100%;
  11.    background-color: #000000;
  12. }
  13.  
  14. /* Tips for Elastic layouts
  15. 1. Since the elastic layouts overall sizing is based on the user's default fonts size, they are more unpredictable. Used correctly, they are also more accessible for those that need larger fonts size since the line length remains proportionate.
  16. 2. Sizing of divs in this layout are based on the 100% font size in the body element. If you decrease the text size overall by using a font-size: 80% on the body element or the #container, remember that the entire layout will downsize proportionately. You may want to increase the widths of the various divs to compensate for this.
  17. 3. If font sizing is changed in differing amounts on each div instead of on the overall design (ie: #sidebar1 is given a 70% font size and #mainContent is given an 85% font size), this will proportionately change each of the divs overall size. You may want to adjust based on your final font sizing.
  18. */
  19.  #container {
  20.    width: 1190px; /* this overrides the text-align: center on the body element. */
  21.    margin-top: 0;
  22.    margin-right: auto;
  23.    margin-bottom: 0;
  24.    margin-left: auto;
  25.    border: 1px solid #000000;
  26.    background-color: #000000;
  27.    height: 1013px;
  28.    position: absolute;
  29.    left: 180px;
  30. }
  31.  #header {
  32.    padding: 0;  /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
  33.    background-color: #000000;
  34.    background-position: center;
  35.    position: absolute;
  36.    top: 0px;
  37. }
  38. #desk {
  39.    margin: 0px;
  40.    padding: 0px;
  41.    background-color: #000000;
  42.    background-image:url(../../custompages/ucui/deskmock/desk.jpg);
  43.    background-repeat:no-repeat;
  44.    height: 924px;
  45.    width: 1190px;
  46.    z-index: 1;
  47.    position: absolute;
  48.    top: 90px;
  49. }
  50. #annual {
  51.    position:absolute;
  52.    left:0px;
  53.    top:645px;
  54.    z-index: 2;
  55. }
  56. .span.annual {
  57.    background-image:url("../../custompages/ucui/deskmock/annual.png");
  58.    background-repeat: no-repeat;
  59.    display:block;
  60.    height: 368px;
  61.    width: 406px;
  62. }
  63. .span.annual:hover img {
  64. background-image:url("../../custompages/ucui/deskmock/annualUP.png");
  65.    visibility:hidden;
  66.    height: 368px;
  67.    width: 430px;
  68. }
Moderator Remark: added code tags
  • graphixboy
  • Control + Z
  • Mastermind
  • User avatar
  • Posts: 1828
  • Loc: In the Great White North

Post 3+ Months Ago

PM me the link. I'll put it up so everyone can see it.

What browsers do you have to support? You might get this to work without javascript in more modern browsers but its going to be pretty rough with any version of IE.

Post Information

  • Total Posts in this topic: 5 posts
  • Users browsing this forum: No registered users and 34 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.