Background Image Rollover Map?

[mboehler3]

Hi all, I am trying to accomplish something my graphic designer put together. We have a Video Hub page that links out to five category pages. Our designer put together this cool image, separate each category into a vertical, rounded box. Now, we'd like to make this interactive with a rollover feature. When you rollover each box, the box will visually "pop-out," and a small arrow will be below the box. Here's an example of how it would look when the user rolls over the Videos #3 box: Since the "rollover" box spills over into the left and right boxes, the only way I can think about doing this is to make all five boxes a background image, and then create a background image for each of the five rollover states. And then use CSS to replace each background image. Is this at all possible? Is there an easier/more efficient way I am not thinking of? Any help or insight is very much appreciated, thank you in advance.

[dsonesuk]

just use ul list as you would for a menu, use the parent li for the normal image, and sub level ul for the hover over image, because the sub level ul uses position: absolute; you can make it the same width as hover image, and use left: and top; to position over the top over parent li image. I don't know exactly what you plan to have inside the pop up boxes, links? if so you might want to consider using li and anchor to hold the hover image and link to whatever. It should work, and you can just use one single normal and hover image for the lot.

[mboehler3]

Does the hover over image need to be the same size as the normal image? I've got this far: http://www.wuzhannanan.com/backend/list-test.html Now I just need to correct the placement of the hover over image, and get it so that the other boxes do not move when one box is hovered. I'm not sure how the sub level ul would work in this case. Can I use margins to do this?

[dsonesuk]

No, the parent li will contain the normal state image, and will be the exact size to accommodate this image. the hover over image will be placed, either in the sub ul, li or anchor within these, you can set the ul to the same width, height of hover over image, and make li, anchor (converted with display: block) and make these 100% height and width, but all this depends on how you plan to implement links in the first place. the li tags will have position: relative;the ul ul will have position: absolute; and then by using left: #px; and top: #px where # equals a value, you can get sublevel ul to position itself directly over the parent li with the normal state image. You would just have normal text in parent li as the link would only need to work within the sublevel ul anchor.

[dsonesuk]

heres a rough guide, adjust image name to yours, if you can make them about same size all the better, but the positioning will be off, so you will need to adjust.

div#menu {margin: 0 auto;width: 960px;height:302px;} div#menu ul {margin: 0;padding: 0;line-height: 40px;}div#menu li {margin: 0;padding: 0;list-style: none;float: left;position: relative;list-style-type:none;background:url(normx3.jpg) no-repeat 0 0;width:139px;height:302px;z-index:0;margin: 0 1px;}   div#menu ul li a {text-align: center;display: block;color: #323232;text-decoration: none;line-height:302px;height:100%;} div#menu ul ul li {background:none;}#menu ul li:hover, #menu ul li ul{z-index:99;}div#menu ul li ul {visibility: hidden;position:absolute;width: 162px;height:302px;background:url(hoverx3.jpg) no-repeat 0 0;}div#menu ul li:hover ul{visibility: visible;left:-12px;top:7px;z-index: 9999;}

with

<div id="menu"><ul>    <li><a href="">Video #1</a>        <ul>        <li><a href="">Video #1H</a></li>        </ul>    </li>    <li><a href="">Video #2</a>        <ul>        <li><a href="">Video #2H</a></li>        </ul>    </li>    <li><a href="">Video #3</a>        <ul>        <li><a href="">Video 31H</a></li>        </ul>    </li>    <li><a href="">Video #4</a>        <ul>        <li><a href="">Video #4H</a></li>        </ul>    </li>        <li><a href="">Video #5</a>        <ul>        <li><a href="">Video #5H</a></li>        </ul>    </li></ul></div>