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 6 of 6
  1. #1
    New Coder
    Join Date
    Jun 2010
    Posts
    46
    Thanks
    10
    Thanked 0 Times in 0 Posts

    Rollover Button Help

    Hi,
    I'm creating a website in Joomla but I have created the template myself. So i'm assuming what I'm wanting is a HTML/CSS and maybe Javascript issue (although I would prefer no javascript).

    I have posted this question many times in different forums and no one seems to be able to help me.

    What I want to do is create a rollover menu that also changes the template background everytime a specific button is rolled over. So each button has a normal view and a rollover view as well as a different template background image assigned to it. Is this possible????

    If it's NOT possible to change the background image, is it somehow possible to change a separate image when the button rolls over?

    So the menu is positioned left and the image I would also like to change is positioned right.

  • #2
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,332
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Well you can certainly change the image of a button on rollover, but to change another element may indeed require some javascript.

    You said you'd posted this in other forums. Have you tried the javascript forum here?
    Teed

  • #3
    Regular Coder
    Join Date
    Apr 2011
    Posts
    286
    Thanks
    2
    Thanked 39 Times in 39 Posts
    You can accomplish this a few ways, probably most used is making the anchor (a) a block element with text aligned nicely inside, and a background defined, then use the :hover in CSS to define a different background on the anchor on mouse over.

    It is similar to changing anchor text color, or underlining it on mouse over, just you are changing the background of it instead.

  • #4
    Regular Coder
    Join Date
    Apr 2011
    Posts
    286
    Thanks
    2
    Thanked 39 Times in 39 Posts
    Quick example:

    HTML:
    Code:
    <a href="#" class="rollover">My Button</a>
    CSS:
    Code:
    .rollover {background: #eee;display:block;text-align:center;width:150px;height:40px;padding-top:20px}
    .rollover:hover {background: #eef}

  • #5
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,332
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Quote Originally Posted by Wojjie View Post
    Quick example:

    HTML:
    Code:
    <a href="#" class="rollover">My Button</a>
    CSS:
    Code:
    .rollover {background: #eee;display:block;text-align:center;width:150px;height:40px;padding-top:20px}
    .rollover:hover {background: #eef}
    What I want to do is create a rollover menu that also changes the template background everytime a specific button is rolled over. So each button has a normal view and a rollover view as well as a different template background image assigned to it. Is this possible????
    She doesn't just want a button rollover.
    Teed

  • #6
    Regular Coder
    Join Date
    Apr 2011
    Posts
    286
    Thanks
    2
    Thanked 39 Times in 39 Posts
    I didn't understand the "different template background image", and somehow I looked over the bolded part.

    Ya, she would need to do a combination of the two then.


  •  

    Posting Permissions

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