View Full Version : Rollover button help

10-27-2008, 12:47 PM
Hi all,

I have created a rollover image using the following Kirupa method.

CSS Rollover (http://www.kirupa.com/css/css_rollovers.htm)

My button is sliced into two parts, the rollover occurs on the right half of the button however i would still like the rollver to occur if the user hovers over the left side of the button (which has no rollover).

Is it possible to somehow 'call' the rollover event of the right side when rolling over the left?


10-27-2008, 12:57 PM
Could you post a link to your page?

10-27-2008, 01:03 PM
Yes, but I think this delves into the realm of Javascript. So basically when you roll over the left image it must invoke the CSS style change. So this defeats some of the purpose of a CSS rollover.

I suppose you could do some neat tricks with CSS and accomplish this, maybe by making the right image container flow over the left. Its lunch break here, so I'll get back in a few.

10-27-2008, 01:30 PM
I have a rollover made quickly that might work, of course its hard to know if it fits your coding exactly but its a model of what could work (tested only in FF). Its at least a start of a pure CSS solution, although I don't have the ability to test on many browsers at the moment.

<style type="text/css">

.rollover {
background-image: url(images/tab_right.png);
background-repeat: no-repeat;
background-position: top right; /* showing the mouseout version */
height: 48px; /* may not be necessary */
width: 300px; /* width should be of both images */
.rollover:hover {
background-position: bottom right; /* showing the mouseover version */
.link {
background-image: url(images/tab_left.png);
background-repeat: no-repeat;
height: 48px; /* may not be necessary */
display: inline-block;


<div class="rollover"><span class="link">Link Text Blah</span></div>

10-27-2008, 01:33 PM
Here is a screen shot of my button from Dreamweaver if thats helps.


the arrow side changes color and the left side stays the same but i would like this to trigger the arrow rollover.


10-27-2008, 02:38 PM
How about the code?

10-27-2008, 03:35 PM
Its basically using the code from my first post.


#divArrowLeft { float: right; width: 173px; height:44px; background-image:url(../images/arrow_left.png); }
#divArrowRight { display:block; float: right; padding: 0px; width: 65px; height:43px; background:url(../images/arrow_right.png) top left no-repeat; overflow: hidden;}
#divArrowRight:hover { background-position: bottom left;}

Page Code:

<div id="divArrowContainer">
<div><a href="testpage.asp" id="divArrowRight"></a></div>
<div id="divArrowLeft"><a href="/index.html"> </a></div>

thanks again. :thumbsup:

10-27-2008, 04:17 PM
Here is a screen shot of my button from Dreamweaver if thats helps.
Again a link or at least the involved images(rather than a screen shot) is required to understand your issue/requirement.

10-27-2008, 05:23 PM
Can you provide a link to the whole page? Its hard to know without all of the code and images to test. The code I posted above works, so are you able to take your work and adapt it?

10-27-2008, 05:49 PM
I dont currently have a page you can view but here are the images i am using for the rollover button:





10-27-2008, 05:56 PM
Add this to your CSS:

#divArrowContainer:hover #divArrowRight{
background-position: bottom left;

Is that what you're going for?

10-27-2008, 06:35 PM
thats exactly what im looking for yes, thanks!

Is it possible to make the left image a clickable link like the right too?

10-27-2008, 07:05 PM
The simplest way is just to rearrange some of the HTML:

<div id="divArrowContainer">
<a href="testpage.asp" id="divArrowRight"></a>
<a href="testpage.asp" id="divArrowLeft"></a>

and add some CSS:

#divArrowLeft {
float: right;
width: 173px;

The best way, however, is to combine arrow_left.png and arrow_right.png into one image and make the whole #divArrowContainer the rollover. After all, that's what's effectively happening on the page, and the code should reflect that as best it can.

10-28-2008, 11:51 AM
Thanks very much.

Agree with what you are saying about combining the images. Thanks for the tip.