...

View Full Version : How to combine image rollovers and disjointed images?



BB Iverson
02-17-2008, 09:36 AM
I've seen some tutorials for both, but I can't figure out how to combine the effects. What I need is a 5-button vertical nav list with three different images for each button state: normal, hover, and selected (i.e., image rollover). Also, I need a default icon image elsewhere to change to a different icon image when each button is in its hover state (i.e., disjointed image). Any ideas on how I can do this?

Actinia
02-17-2008, 09:54 AM
The nav list rollover is easily implemented in pure CSS using the Pixy technique (one background image with three sub-images; the background position is modified to suit).

The disjointed rollover will need scripting. You need an onmouseover function that will change the (background) image your other target.

You cannot use CSS to change the image outside the current anchor unless there is a precise (pixel-perfect) positioning relationship between them.

John

BB Iverson
02-17-2008, 10:34 AM
You cannot use CSS to change the image outside the current anchor unless there is a precise (pixel-perfect) positioning relationship between them.
I will have a precise positioning relationship between the images. The button images have three states (normal, hover, and selected), while the icon images have two (normal and hover). How can I combine this effect with CSS? Because they're images, do I need a separate class for each of the 5 buttons?

Actinia
02-17-2008, 10:48 AM
You need to give more information. can you post a link to your site, or post your code (use the # icons above to wrap your code in code tags).

John

abduraooft
02-17-2008, 11:10 AM
Have a look at
Keeping Navigation Current With PHP (http://www.alistapart.com/articles/keepingcurrent/) or http://www.codingforums.com/showthread.php?t=131742.
Build a simple effect(using bakcground-color & color) and post your code/link to get more help.

BB Iverson
02-17-2008, 01:45 PM
I don't actually have any viable code yet. Several times, I started out attempting to make the vertical nav list using snippets from image rollover and disjointed image tutorials online. However, I always hit a dead end when attempting to combine the two effects.

I can somewhat understand how to accomplish this by wrapping each individual button in its own div (or class even), but that seems to be a convoluted mess of coding. I was hoping for a cleaner way to get this done.

Apostropartheid
02-17-2008, 02:08 PM
Okay, so I'm presuming here that your nav list is a background rather than a whole specific image (i.e., there's no text so it's not specific.)

<style>
#nav a {
background: url(nav.png); /* change URI to location of normal image */
width: 100px; /* modify to suit */
height: 30px; /* modify to suit */
display: block;
}
#nav a:hover {
background: url(nav_hover.png); /* change URI to location of hover image */
}
#nav a.selected {
background: url(nav_selected.png); /* change URI to location of selected image */
}
#nav li, #nav ul {
width: 100px;
}
</style>
<ul id="nav">
<li><a href="/" class="selected">Home</a></li>
<li><a href="/blog/">Blog</a></li>
<li><a href="/about/">About</a></li>
<li><a href="/contact/">Contact</a></li>
</ul>

BB Iverson
02-17-2008, 03:02 PM
That would work, with a bit of modification, but something that displays the disjointed icon image would have to be added. Regarding the rollovers, I came up with something from a tutorial (http://css.alanwho.com/rollover-css-image-menu/). First, the CSS for the #nav container div:

#nav img { border: none; }
#nav li { display: inline; list-style:none; }
#nav li a { float: left; display:block; width: 115px; height: 35px; }
#nav li a img { border:none; vertical-align:bottom; /* for IE6 */}
#nav li a:hover { visibility:visible; }
#nav li a:hover img { visibility:visible; }
#nav li a:hover img/**/ { visibility:hidden; /* hide from IE5.0/win */}
The 5 buttons all use different images on rollover so I defined each with a different ID on the anchor element:

#one { background: url(one.jpg) no-repeat left bottom; }
#two { background: url(two_green.jpg) no-repeat left bottom; }
#three { background: url(three_green.jpg) no-repeat left bottom; }
#four { background: url(four_green.jpg) no-repeat left bottom; }
#five { background: url(five_green.jpg) no-repeat left bottom; }
The XHTML:

<div id="nav">
<ul>
<li>
<a title="" href="#" id="one">
<img src="one_gray.jpg" alt="" /></a>
</li>
<li>
<a title="" href="#" id="two">
<img src="two_gray.jpg" alt="" /></a>
</li>
<li>
<a title="" href="#" id="three">
<img src="three_gray.jpg" alt="" /></a>
</li>
<li>
<a title="" href="#" id="four">

<img src="four_gray.jpg" alt="" /></a>
</li>
<li>
<a title="" href="#" id="five">

<img src="five_gray.jpg" alt="" /></a>
</li>
</ul>
</div>
Now I still need to have an absolute positioned icon image displayed above the vertical nav bar that changes to a different icon image upon hover of each button in the vertical nav bar. Any ideas on how to achieve that effect?

Apostropartheid
02-17-2008, 05:52 PM
<style>
.icon {
display: none;
}
a:hover .icon {
display: block;
position: relative;
}
a#one:hover .icon {
bottom: 35px; /* plus the height of the icon */
}
a#two:hover .icon {
bottom: 70px; /* you get the idea */
}
</style>
<ul>
<li>
<a href="/" id="one">
<img src="one_gray.jpg" alt="Home"/> <!-- You shouldn't be using JPEGs for this sort of thing -->
<img src="one_icon.png" alt="" class="icon"/>
</a>
</li>
<!-- and so on -->

BB Iverson
02-18-2008, 05:03 PM
I'm trying to incorporate all I'm learning here, but I'm doing something wrong, obviously. The image swap isn't working on button hover. (I stopped after the second button effect didn't work.)

I set up the pertinent vertical nav list portion of the page I'm working on here (http://bbiverson.com/test/vert_nav_list.htm).

Can someone take a look at it and help me figure out what should be done to get the rollover and image swap working together?

Apostropartheid
02-18-2008, 07:34 PM
A heavily jettisoned version of your code works.

Well, at least it would if it pasted. Hang on, gonna put it as an attachment...

BB Iverson
02-19-2008, 12:20 PM
Almost there! That looks good in IE, but it borks in FF, as can be seen here (http://bbiverson.com/test/vert_nav_list.htm). (I positioned the nav elements where they'll be on the whole "About Me" page I'm working on.)

How can I stabilize it for Firefox?

BB Iverson
02-20-2008, 09:58 AM
Although the thing jumps up and down a bit in FF, I guess a partial solution would be to filter this out so only IE sees it:
a:hover .hover {
margin-top: -19px; /* with this IE is stable, without this FF is nearly-stable */
}How do I do that?

Apostropartheid
02-20-2008, 06:36 PM
<!--[if IE]>
<style>a:hover .hover {
margin-top: -19px; /* with this IE is stable, without this FF is nearly-stable */
}</style>
<![endif]-->

BB Iverson
02-21-2008, 02:54 PM
I finally fixed it, without having to put that IE filter in the markup. I got rid of that negative margin bit and changed the display to inline. That made it display the same in IE and FF. Thanks everyone for your help!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum