Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14
  1. #1
    New Coder
    Join Date
    Oct 2008
    Posts
    18
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Rollover button help

    Hi all,

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

    CSS Rollover

    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

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Could you post a link to your page?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Senior Coder gnomeontherun's Avatar
    Join Date
    Sep 2007
    Location
    Houston
    Posts
    2,846
    Thanks
    10
    Thanked 238 Times in 229 Posts
    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.
    jeremy - gnomeontherun
    Educated questions often get educated answers, and simple questions often get simple answers.

  • #4
    Senior Coder gnomeontherun's Avatar
    Join Date
    Sep 2007
    Location
    Houston
    Posts
    2,846
    Thanks
    10
    Thanked 238 Times in 229 Posts
    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.

    Code:
    <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>
    jeremy - gnomeontherun
    Educated questions often get educated answers, and simple questions often get simple answers.

  • #5
    New Coder
    Join Date
    Oct 2008
    Posts
    18
    Thanks
    6
    Thanked 0 Times in 0 Posts
    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.

    Thanks

  • #6
    Senior Coder gnomeontherun's Avatar
    Join Date
    Sep 2007
    Location
    Houston
    Posts
    2,846
    Thanks
    10
    Thanked 238 Times in 229 Posts
    How about the code?
    jeremy - gnomeontherun
    Educated questions often get educated answers, and simple questions often get simple answers.

  • #7
    New Coder
    Join Date
    Oct 2008
    Posts
    18
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Its basically using the code from my first post.

    CSS:

    Code:
    		#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:

    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.

  • #8
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    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.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #9
    Senior Coder gnomeontherun's Avatar
    Join Date
    Sep 2007
    Location
    Houston
    Posts
    2,846
    Thanks
    10
    Thanked 238 Times in 229 Posts
    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?
    Last edited by gnomeontherun; 10-27-2008 at 04:38 PM.
    jeremy - gnomeontherun
    Educated questions often get educated answers, and simple questions often get simple answers.

  • #10
    New Coder
    Join Date
    Oct 2008
    Posts
    18
    Thanks
    6
    Thanked 0 Times in 0 Posts
    I dont currently have a page you can view but here are the images i am using for the rollover button:



    and



    thanks.

  • #11
    Regular Coder BoldUlysses's Avatar
    Join Date
    Jan 2008
    Location
    Winston-Salem, NC
    Posts
    938
    Thanks
    10
    Thanked 190 Times in 187 Posts
    Add this to your CSS:

    Code:
    #divArrowContainer:hover #divArrowRight{ 
    	background-position: bottom left;
    }
    Is that what you're going for?
    matt | design | blog

  • #12
    New Coder
    Join Date
    Oct 2008
    Posts
    18
    Thanks
    6
    Thanked 0 Times in 0 Posts
    thats exactly what im looking for yes, thanks!

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

  • #13
    Regular Coder BoldUlysses's Avatar
    Join Date
    Jan 2008
    Location
    Winston-Salem, NC
    Posts
    938
    Thanks
    10
    Thanked 190 Times in 187 Posts
    The simplest way is just to rearrange some of the HTML:

    Code:
    <div id="divArrowContainer">				
    	<a href="testpage.asp" id="divArrowRight"></a>
    	<a href="testpage.asp" id="divArrowLeft"></a>									
    </div>
    and add some CSS:

    Code:
    #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.
    matt | design | blog

  • #14
    New Coder
    Join Date
    Oct 2008
    Posts
    18
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Thanks very much.

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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •