...

View Full Version : Rollover button help



biggieuk
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?

Thanks

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

gnomeontherun
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.

gnomeontherun
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;
}

</style>

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

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

http://www.danlawsononline.com/images/button.png

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

Thanks

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

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

CSS:



#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>
</div>


thanks again. :thumbsup:

abduraooft
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.

gnomeontherun
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?

biggieuk
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:

http://www.danlawsononline.com/images/arrow_left.png

and

http://www.danlawsononline.com/images/arrow_right.png

thanks.

BoldUlysses
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?

biggieuk
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?

BoldUlysses
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>
</div>

and add some CSS:


#divArrowLeft {
display:block;
float: right;
width: 173px;
height:44px;
background-image:url(arrow_left.png);
}

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.

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

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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum