Wordpress Themes - WP Forum at BFA
There will be no more development for Atahualpa (or any other theme), and no support. Also no new registrations. I turned off the donation system. I may turn the forum to read only if it gets abused for spam. Unfortunately I have no time for the forum or the themes. Thanks a lot to the people who helped in all these years, especially Larry and of course: Paul. Take care and stay healthy -- Flynn, Atahualpa developer, Sep 2021

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Sidebars & Widgets »

[SOLVED] CSS: Remote Rollover?


  #1  
Old Dec 21, 2010, 07:23 PM
49Monsters's Avatar
49Monsters
 
41 posts · Aug 2010
MN
[SOLVED] CSS: Remote Rollover?

I'm trying to code a remote roll-over with a Spite Button in my side bar. I want to roll over the button, the button goes to hover state and an image pops up elsewhere in the side bar. I know I have been close and have found the prefect example, (I SHOULD be able to get it with the example but...)http://www.onextrapixel.com/2009/05/...t-remote-area/ I keep getting confused when I try to plug in my info.

I think where I keep getting lost is because my code for the (sprite) button is different than in the example. If someone could just plug in the right code, in the right spot, I know it will sink in! I have several I want to do, once I get my head around this first one.
Here is my (sprite) button, which works as I want:
HTML in text widget:

HTML Code:
<a id="Trip_2" href="http://localhost/" title="Home">
	<span>Trip Channel</span></a>
CSS:
HTML Code:
#Trip_2
{
z-index: 4; position: top center; width: auto; 
margin-right: 0px; 
margin-left: 0px;
margin-top: 10px;
margin-bottom: 0px;
  display: block;
  width: 200px;
  height: 25px;
  background: url("./wp-content/themes/atahualpa353/images/Trip_2.jpg") no-repeat 0 0;
}

#Trip_2:hover
{ 
  background-position: 0 -25px;
}

#Trip_2 span
{
  display: none;
}
I have a 100px x 100px image named "RemoteImage_1" that I want to place about 30px below the button. I do not plan to have type as well as an image as in the example.

Thanks for the help!
Guy
  #2  
Old Dec 22, 2010, 06:43 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
This has nothing to do with atahualpa, but looks like a cool idea, so...

You need to have the image defined in the HTML. Go back and look at the example, they have the <a....> with a number of <span...>'s. Inside the <a>, one of the span's has the class 'icon'. It has a normal state of 'display:none' but on hover it is changed to 'display:block'. That is what makes it show up.

So it has to be in the HTML, have a normal state of 'display:none' and a hover state of 'display:block'
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #3  
Old Dec 22, 2010, 10:35 AM
49Monsters's Avatar
49Monsters
 
41 posts · Aug 2010
MN
OK JD, thanks
I'll give it another shot.
In the example code, what is this for?

HTML Code:
#menu1 li a .button, #menu2 li a .button {
    background:transparent url(images/button.jpg) no-repeat top right;
    display:inline;
    float:left;
    height:21px;
    padding:10px 10px 0 0;
    margin-left:12px;
    cursor:pointer;
}
Is that just the word "Home" inside the button?
__________________
"Despair is only for those who see the end beyond all doubt"
-Gandalf
  #4  
Old Dec 22, 2010, 10:53 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
That's the CSS Selectors (everything before the '{') and the CSS rules. There are two selectors, short hand, so the rules will apply to both. In english it says:

For andy element with a class of 'button' that is a child of an <a> in a <li> that is a child of the element with an ID of 'menu1' or 'menu2' apply these rules.

If you look at the HTML, in the example, it applies to 'Home', 'About Us', 'Services', 'Portfolio' and 'Contact Us' since they all meet the conditions of the selectors.

However it doesn't apply to 'Back to homepage' etc, because they have a class of 'text' not 'button' which the CSS selectors are using.

if you changed the selectors to '#menu1 li a, #menu2 li a {' (i removed '.button') then it would apply to all of them.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #5  
Old Dec 23, 2010, 10:15 AM
49Monsters's Avatar
49Monsters
 
41 posts · Aug 2010
MN
Thanks JD
I should have been more clear with my question.
I realize that it's selectors/rules. I just was not sure what it was controlling. It was just the words in the buttons, so I did not need it for my example.

The good news is I GOT IT! In my use, I actually use FOUR images. The first two are the button (so to speak)... instead of a button changing from white to green as in the example, I have an image that changes views, then two additional "remote images. I still need to play with placement and I'm on a local server right now, but once I get it tweaked I'll bring it over to a live site and show you. Cool stuff!

Thanks JD
Guy
__________________
"Despair is only for those who see the end beyond all doubt"
-Gandalf

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] Need rollover effect for images in widgets. JaneD Sidebars & Widgets 2 Oct 22, 2010 09:46 AM
[SOLVED] Rollover image with css in header lambdaka Header configuration & styling 2 Apr 10, 2010 12:41 PM
Rollover image not working in Internet Explorer 6 Masselyn Page & Category Menu Bars 0 Oct 12, 2009 12:25 PM
[SOLVED] Rollover Graphic in Header Whatsthatcat? Header configuration & styling 2 Sep 25, 2009 08:51 AM


All times are GMT -6. The time now is 03:23 AM.


Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.