Mouseover Effects

[xfollowthereaperx]

How would I go about adding Mouseover Effects to my theme?

Here is a link to someone's forum who has them
http://forums.thepriceislol.com/


I just want to add whats on the navigation bar. Could I do so by copy and pasting the code and replacing the links so it uses stuff from my forums?

Thanks

[ooop]

specifically the example website you give is using an external javascript file to achieve the navigation button effect - that example website you give calls the file rollovers.js - the file was originally called "JSFX_FadingRollovers.js" (or maybe "JSFX_ImageFadeSwap.js") and the file was written by Roy Whittle ( http://www.roy.whittle.com/ ) - the original js file can be found at http://www.javascript-fx.com/ - the URL of the actual js file is http://www.javascript-fx.com/javascript/JSFX_FadingRollovers.js

--------------------
maybe i should add > you should find enough info at the links i gave to answer your questions...

[Peter Duggan]

While this is done through JavaScript in the forum you link to, you can also do pure CSS rollovers by specifying different backgrounds for a:hover (+ a:active if you like) than a:link and a:visited. NB To avoid applying these to every link on the page, you should give your button strip an ID or class and apply them only to that, so you do something like:

Code Select Expand

#buttonstrip a:link, #buttonstrip a:visited {
background: url(static image's url);
}
#buttonstrip a:hover, #buttonstrip a:active {
background: url(mouseover image's url);
}


[ooop]

yes, Peter's example can be, while straight forward, very effective - however, although CSS can do more than most designers realize, it won't produce the fading effect of the example at http://forums.thepriceislol.com/

xfollowthereaperx, you should also realize that since a few designers have used javascript for mean and greedy purposes, a lot of people block javascript - and so not everyone will see the javascript's "magic" - so if you do decide to take the javascript road you should also incorperate an effective design behavior that displays when the javascript is blocked...

[Dannii]

Yes it will, if the background images are animated

[ooop]

lol - yes - yes --- in fact such is what i first thought of when i saw the linked example ---- but doesn't quite work - at least not as smoothly as what roy scripted and certainly not without javascript...

with annimated gif's
- 1st you run into "how long should the duration of last frame be?"
- then how would you ever get the "onmouseout" effect (fade) smoothly?

yeah you could probably come pretty close (without scripting) but it wouldn't be as smooth --- however, given what i said concerning how many people block javascript, it might be well worth the effort to get annimated gifs as smooth <<<< scratch that - another big problem trying to get fade with annimated gif (and no js) is that different browsers load/cache/reload annimated gif's differently --- for example, i think firefox would remember the cycle of an annimated gif and so perhaps the first mouseover might be the only time it works properly (as desired) --- i don't know > these are just my ---- my ---- my, what > "concerns"/"thoughts"/"suspicions" > i don't know, these are just my 'something'....

darn them greedy people > stifling the magic of js

[Peter Duggan]

To be quite honest, I never even noticed the fading effect before posting my CSS example (although I'll acknowledge it's there now I've been back to check!). So it's really a simple matter of choice and you can take the JavaScript route if nothing else 'will do', but I know I'd take the simplicity and non-script-dependency of the CSS for preference any time.

[ooop]

yes, Peter, i agree, and in fact although i love javascript, i avoid it as much as i can, or at least provide effective noscript solutions when it is used - another thing, for same reasons, is why i love php....

which brings me to a question i've had at the back of my mind for a long time:

WHY?

yup, that's the question - to be more specific:

Why can't php be used to acheive the effects javascript is known for?

some day i will explore this question - or perhaps, if i'm lucky, someone here will provide an answer

[Dannii]

Because php is a server side language, and javascript is a client side language.

Have you tried using the CSS backgrounds with the animated images? I'm sure it would be smooth, it just might not well with a gif that doesn't repeat. Or it might!

[ooop]

lol - you posted just as i was going in to modify and explain i understand "server-side"/"client-side" and was going to point more directly at what's at the heart of my question > is php ONLY capable of generating static results?

that - what you've posted - and my real dream > and i gotta go head to w3 for this > CSS3 < AHHH, think of if it, dream of it, CSS3 could easily adopt all, or most, of them nifty things that js does - and without fangs (so no need to block) - yes, just a dream, but dream i will...

[xfollowthereaperx]

About how many block java? And will they still be able to use the links, just not see the smooth roll over effect?

[xfollowthereaperx]

While this is done through JavaScript in the forum you link to, you can also do pure CSS rollovers by specifying different backgrounds for a:hover (+ a:active if you like) than a:link and a:visited. NB To avoid applying these to every link on the page, you should give your button strip an ID or class and apply them only to that, so you do something like:

Code Select Expand

#buttonstrip a:link, #buttonstrip a:visited {
background: url(static image's url);
}
#buttonstrip a:hover, #buttonstrip a:active {
background: url(mouseover image's url);
}


I really have no idea how to do this stuff

Could you direct me to a tutorial or maybe even help me through aim or msn?

[Peter Duggan]

Sorry, I've no time right now (and don't do AIM or MSN even if I did) but try these:

http://www.oreillynet.com/pub/a/javascript/2001/03/23/rollovers.html
http://www.alistapart.com/stories/rollovers/
http://meyerweb.com/eric/css/edge/

Or simply Google 'css rollovers' for more!

[xfollowthereaperx]

Sorry, I've no time right now (and don't do AIM or MSN even if I did) but try these:

http://www.oreillynet.com/pub/a/javascript/2001/03/23/rollovers.html
http://www.alistapart.com/stories/rollovers/
http://meyerweb.com/eric/css/edge/

Or simply Google 'css rollovers' for more!

Thanks

[Dannii]

lol - you posted just as i was going in to modify and explain i understand "server-side"/"client-side" and was going to point more directly at what's at the heart of my question > is php ONLY capable of generating static results?

I don't understand what you're asking.. but php runs on the server. Once it's sent the page, how can it do anything more?

[ooop]

@ xfollowthereaperx...
Peter had supplied you with links to some of my Fav's, all very good (great) site's - but since you are new to all this stuff i would suggest starting at http://www.w3schools.com/ > for CSS you'd want http://www.w3schools.com/css/ --- another good site to start at might be http://www.htmlhelp.com/ > http://www.htmlhelp.com/reference/css/ for CSS.


@ eldʌkaː...
first, yeah - you can create the hover fade effect smoothly with annimated gif's - but i still don't see how to create the 'mouse out' fade effect smoothly without script - no biggy - and i'm sure you can get close, but without script i don't see it happening (the fade on mouse out is more noticable at http://www.javascript-fx.com/ - note: it is using the same script as thepriceislol.com)

my Q on getting php to produce effects that js is usually used for is more of an accedemic Q and more of a 'HOW' rather than 'why not' - of course this 'why' is important, but my focus is 'how' --- and you hit the nail on the head > "Once it's sent the page, how can it do anything more?" < what would be needed is a kinda 'LIVE' connection between server and client - or put differently "HOOKS" where php sends results with areas that 'hook' back to the server's php and can update areas without updating whole page -- really hard to explain - and when i said this has been at "the back of my mind" i was understating - finally talking about it, i can see all the inheirent problems with this idea - i was/am merely brainstorming.

[Dannii]

To have an animate mouse out, just have the normal background image be animated.

what would be needed is a kinda 'LIVE' connection between server and client

You can do this with AJAX or Comet. But that uses Javascript in your browser. I still don't understand why you would want PHP running in your browser.

[xfollowthereaperx]

This is very confusing for me, can someone just do it please

Here is a picture of the finished result. I just put it in an image. Just do all of the coding, I can make the images pretty easily. If you code it and just put the link and image urls in capital letters I could figure it out.

Please make it in PHP coding, not html.


http://powerspike.ulmb.com/1.gif


I have enough knowledge to find out where to place it in the theme and stuff. I'd like help on just the coding, I can do the images by myself

[ooop]

xfollowthereaperx - sorry for confusing matters with "side-discussions" --- w3schools should have given you all the info you needed - they even got a php section - anyway, i'll be back "soon" (perhaps a day or less) to help if no-one else does - just getting bizy here...

i'd recommend eldʌkaː's method - you mention being capable with images - you good with animated gif's?

i'd recommend eldʌkaː's method minus his last suggestion

eldʌkaː - having annimated gif's for normal bg means all buttons annimate on page load - yes? -- better just using annimation for hover i think...

[ooop]

"x___x" > you get help -- i assume you did because there's no answer to my question concerning if you got a good handle on making annimated gif's --- well - good luck...

[NativePages]

Question re:

Code Select Expand


#buttonstrip a:link, #buttonstrip a:visited {
background: url(static image's url);
}
#buttonstrip a:hover, #buttonstrip a:active {
background: url(mouseover image's url);
}


With all the buttons scattered throughout the various pages (especially if you've added mods like ignore user, doublepost, etc), does this code handle all of them, or just those buttons across the top of the page (home, help, search, admin, and so on... )?

If it doesn't, what could be done through CSS to handle any/all buttons you want set up with a mouseover option?

Thanks in advance,
NativePages
http://www.nativepages.com/tnindian

[xfollowthereaperx]

http://powerspike.ulmb.com/forums/

I got it to work, thanks everyone

[ooop]

NativePages - let me know if the following explaination helps you....

let's say you had source that looked like this:

<div>WOW!</div>
<div>Super!</div>
<div>Funny!</div>

now let's say you only wanted a specific background for the "Super!" DIV --- then you should modify the DIV that contains "Super!" like so...

<div>WOW!</div>
<div id="getsbg">Super!</div>
<div>Funny!</div>

so now your ready to access the "Super!" DIV and only the "Super!" DIV with the CSS - by adding...

#getsbg {
   background: url(pathtobackground.gif);
}

to the CSS.

if you wanted a background for every DIV that exists in your pages then your CSS would look like...

DIV {
   background: url(pathtobackground.gif);
}

that's really a bit too basic to really get you want you might want --- but this is really basic HTML and CSS stuff - so the above should point you the right direction (after all, the concept is there) - i strongly recommend checking this stuff out at http://www.w3schools.com/ OR http://www.htmlhelp.com/


NOTE: a rule of thumb is that "ID" is pretty much meant for items that only appear once on your page --- if you have many elements to treat the same way with CSS then CLASS is called for -- Also each html tag can have one CLASS and one ID > but you can NOT have two or more CLASS'es OR two or more ID's within one html tag...

[NativePages]

That made sense. I guess I'm used to straight html and static pages.

Thanks,
NativePages

[Peter Duggan]

NOTE: a rule of thumb is that "ID" is pretty much meant for items that only appear once on your page --- if you have many elements to treat the same way with CSS then CLASS is called for

It's more than a 'rule of thumb' (as I'm sure you're aware), which is why I said:

NB To avoid applying these to every link on the page, you should give your button strip an ID or class and apply them only to that

So, as ooop points out, you'd need to use the class for multiple instances within a page, but you should also note that:

• some of these are scattered about various files and not all neatly lined up in index.template.php.
• lower case tags are required for XHTML (so no CLASS, DIV or ID).

That made sense. I guess I'm used to straight html and static pages.

But this *is* straight HTML (with CSS, as it should be used) and static pages (its context within a dynamic PHP forum being irrelevant here).

[NativePages]

To Peter, Ooops, and all,

Thank you for trying to explain it to me. I know you are all busy. I imagine that I am like a lot of other people out there. Websites I design tend to consist of static html pages with no dynamic content to speak of. Use of any special coding or scripts is limited to what is available at sites like dynamicdrive.com. My webhosting company was started more out of frustration and to help my friends and causes I support out with free webspace than anything else. I have taken exactly two computer "classes" in my life - one way back when in college when Fortran IV was relatively new (I failed it miserably, but it was required for my major at the time and oh, by the way, I used to be able to sit down and punch mag cards), and one "workshop" on MS Excel from which I learned nothing new since I was already using it heavily. I, like a lot of people out here on the web, am basically self-taught.

I know that it's often frustrating to deal with people like me for those of you who are lightyears beyond in terms of skill levels, and I do appreciate it. It helps make muddling along on my own not quite as lonely or discouraging. Anyway, I think for now I'll have to shelve trying to insert the mouseover effects. I don't want to risk breaking what I've managed to get done in terms of customization. The graphics are ready. I'm just not secure enough in going in to try to add the right codes in the right places. Or maybe I'm just more secure in my ability to put the wrong codes in all the wrong places!

Thanks again,
NativePages
http://www.nativepages.com/tnindian

[Peter Duggan]

Use of any special coding or scripts is limited to what is available at sites like dynamicdrive.com.

But what I was trying to explain in my last post is that there's no 'special coding or scripts' in (X)HTML + CSS...

I have taken exactly two computer "classes" in my life

And that, I think, is exactly two more than me!

I, like a lot of people out here on the web, am basically self-taught.

Which means you can guess how I slot in there?

I know that it's often frustrating to deal with people like me for those of you who are lightyears beyond in terms of skill levels, and I do appreciate it.

Must assure you now that I'm neither God's gift to coding (!) nor find it frustrating dealing with you when it's obvious you're looking to develop your skills rather than simply be handed the code on a plate. So please don't embarrass me by talking in terms of light years!

[NativePages]

If you go to http://www.nativepages.com/tnindian, you will see custom buttons. Right now, they have the same name and location as the original buttons that came with the "default" theme.  When I was creating them, I saved three copies of each one - 1 that you see, 1 that is named appropriatebuttonname_on.png and 1 identical to that but named _off.png. The originally named one and the _off.png buttons are identical. The _on.png are colored differently.

Since there are numerous buttons, each with a unique name, would I write the class code as follows, listing out the names of all possible buttons in a string ...

Code Select Expand



.buttonover a:link, a:visited {
            background: url(/images/appropriatefolder/*****_**.***, /images/appropriatefolder/*****_**.***,
/images/appropriatefolder/*****_**.***, /images/appropriatefolder/*****_**.***,
/images/appropriatefolder/*****_**.***, /images/appropriatefolder/*****_**.***,
/images/appropriatefolder/*****_**.***, /images/appropriatefolder/*****_**.***);
}
{
.buttonver a:hover, a:active {
background: url(/images/appropriatefolder/*****_**.***, /images/appropriatefolder/*****_**.***,
/images/appropriatefolder/*****_**.***, /images/appropriatefolder/*****_**.***,
/images/appropriatefolder/*****_**.***, /images/appropriatefolder/*****_**.***,
/images/appropriatefolder/*****_**.***, /images/appropriatefolder/*****_**.***);
}


OR ... could each one be listed could I just name them all the same thing, but house them in separate folder, then use /images/appropriatefolder/*.* ...

OR ... does each one have to be a separate listing?

This is where it's really confusing me and all those tutorials out there are not helping as they're either stuck on a simple background COLOR effect, or they're only dealing with one image.

NativePages

[Peter Duggan]

If you go to http://www.nativepages.com/tnindian, you will see custom buttons. Right now, they have the same name and location as the original buttons that came with the "default" theme.  When I was creating them, I saved three copies of each one - 1 that you see, 1 that is named appropriatebuttonname_on.png and 1 identical to that but named _off.png. The originally named one and the _off.png buttons are identical. The _on.png are colored differently.

So are we talking about 'New Posts' and 'No New Posts' (in which case I can only see the off.gifs as a guest but can guess the rest) or your 'Home', 'Help' etc. buttons (which I think you mean, but still aren't showing as .pngs)?

Since there are numerous buttons, each with a unique name, would I write the class code as follows, listing out the names of all possible buttons in a string ...

Nope. One URL only per style rule.

OR ... could each one be listed could I just name them all the same thing, but house them in separate folder, then use /images/appropriatefolder/*.* ...

Trying to get my head round this (it's 1.00am here)...

OR ... does each one have to be a separate listing?

Assuming your 'on' and 'off' basically mean 'active' (hover) and 'inactive' (static) state (in which case 'on' and 'off' might not be the best names because of that potential confusion with 'New' and 'No New' Posts?), you'd really have to do them one by one (a tedious process) *unless* you can do the text/icon as a unique transparent foreground image for each and the base colours (active and inactive) as CSS backgrounds (your 'simple background COLOR effect'?). So the latter is naturally preferable, and you'd be doing something like:

Code Select Expand

<a class="blah" href=""><img src="youruniquetransparentforeground" alt="" /></a>

(Some details omitted from example for clarity...)

With CSS like:

Code Select Expand

.blah a:link, .blah a:visited {
background: url(yourcommoninactivebackground);
}
.blah a:hover, .blah a:active {
background: url(yourcommonactivebackground);
}

Where 'youruniquetransparentforeground' supersedes your separate buttons as recommended above and 'yourcommoninactivebackground' and 'yourcommonactivebackground' provide the differentiation you appear to be looking for with your '_off' and '_on' versions respectively.

[NativePages]

No, not new vs old posts...

I'm talking about home, search, profile, calendar, gallery, login, logout, ... the list goes on....

[Peter Duggan]

I'm talking about home, search, profile, calendar, gallery, login, logout, ... the list goes on....

or your 'Home', 'Help' etc. buttons (which I think you mean, but still aren't showing as .pngs)?

So it's best to do it like this:

the text/icon as a unique transparent foreground image for each and the base colours (active and inactive) as CSS backgrounds (your 'simple background COLOR effect'?).

NB For 'base colours' read 'whole base button designs' (ie everything except their unique text and icons). The point being that, while you still specify the unique parts (which must then be transparent) as 'normal' buttons (img src etc.), you only need one set of style rules for the common backgrounds.

[NativePages]

Peter, ooop, et al ...

I customized my theme. I made a copy of default in a folder called npstandard, and most of my customization edits were done in there.  Within npstandard, though, I've only got index, index.template, style.css, and who.template, plus the plus the fonts, help, images, and languages folders. I left the rest of the template files over in default. I DID edit boardindex.template to give the news fader a static size (love the fader, but all that jumping up and down drove me nuts), so I'm "guessing" I need to move the modified copy over to npstandard and put a clean "pre-modification" copy back into default (yes, I made a copy before I messed with it).

My themes and layout settings are:

Allow member theme selection - NO
Allow member to select "Default" - NO
Overall forum default: npstandard

I think I maybe found a solution, but I need to ask a sort of naive (when it comes to how this all works) question.  IF I'm understanding how themes work, it will look in npstandard first, and if it doesn't find the template it wants in npstandard's folder, it will go over and look for it in default's folder, right?

Do I need to copy all the files in default over to npstandard? As near as I can tell, the only file that is involved in the menu buttons is boardindex.template. 

These mouseover button changes are the last steps I have left (near as I can tell) to a completed customization of this forum.  I so want to get them done!

NativePages

[Peter Duggan]

so I'm "guessing" I need to move the modified copy over to npstandard and put a clean "pre-modification" copy back into default (yes, I made a copy before I messed with it).

Yep, that's right.

IF I'm understanding how themes work, it will look in npstandard first, and if it doesn't find the template it wants in npstandard's folder, it will go over and look for it in default's folder, right?

Right.

Do I need to copy all the files in default over to npstandard? As near as I can tell, the only file that is involved in the menu buttons is boardindex.template.

Just what you've changed (eg BoardIndex.template.php).

[NativePages]

OK, I'll get that done and finish the changes to the graphics I need to make then come back (I'm sure) with the next question(s)! Thanks!

[NativePages]

I hate to do this to all of you, but I'm back for some assistance. I really am trying to figure this out on my own, but I'm stumped. 

I found a possible, strictly CSS fix for the mouseover images I want here -> http://wellstyled.com/css-nopreload-rollovers.html. It looks like this:

Code Select Expand


#menu a {
   background: url("button.gif") 0 0 no-repeat;
   ...
   }
#menu a:hover {
   background-position: -157px 0;
   ...
   }
#menu a:active {
   background-position: -314px 0;
   ...
   }


Here's my dilemna.  The code above makes the button image appear to change color. The button information that author is using, however, is NOT part of the image. It's text over the top of an image. In my case, my button images contain both text and an icon.  Mine are basically a vertically stacked set of an on button and an off button in one image with about 6 pixels of transparant space between them.

In my case, each button image is unique and there are 36 of them, SOOOO ... how do I alter that CSS entry and/or other templates to do what I need? I know there should be a way. I just can't figure it out.

Thanks  in advance for any assistance,
NativePages
http://www.nativepages.com/tnindian