News:

Want to get involved in developing SMF, then why not lend a hand on our github!

Main Menu

Mouseover Effects

Started by xfollowthereaperx, February 17, 2007, 11:54:22 PM

Previous topic - Next topic
Print
Go Down Pages1 2 All
User actions

xfollowthereaperx

February 17, 2007, 11:54:22 PM
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

#1
February 18, 2007, 01:20:22 AM Last Edit: February 18, 2007, 01:26:21 AM by 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

#2
February 18, 2007, 04:21:23 AM Last Edit: February 18, 2007, 04:31:25 AM by 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
#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

#3
February 18, 2007, 06:01:04 AM
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

#4
February 18, 2007, 06:04:34 AM Last Edit: February 18, 2007, 06:06:16 AM by eldʌkaː
Yes it will, if the background images are animated ;)
"Never imagine yourself not to be otherwise than what it might appear to others that what you were or might have been was not otherwise than what you had been would have appeared to them to be otherwise."

ooop

#5
February 18, 2007, 06:59:30 AM
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

#6
February 18, 2007, 07:06:01 AM
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

#7
February 18, 2007, 07:22:29 AM
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

#8
February 18, 2007, 07:25:46 AM
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! :)
"Never imagine yourself not to be otherwise than what it might appear to others that what you were or might have been was not otherwise than what you had been would have appeared to them to be otherwise."

ooop

#9
February 18, 2007, 07:33:15 AM
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

#10
February 18, 2007, 04:53:18 PM
About how many block java? And will they still be able to use the links, just not see the smooth roll over effect?

xfollowthereaperx

#11
February 18, 2007, 05:03:27 PM
Quote from: Peter Duggan on February 18, 2007, 04:21:23 AM
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
#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 :D

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

Peter Duggan

#12
February 18, 2007, 05:27:47 PM
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!

Dannii

#14
February 18, 2007, 09:23:43 PM
Quotelol - 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?
"Never imagine yourself not to be otherwise than what it might appear to others that what you were or might have been was not otherwise than what you had been would have appeared to them to be otherwise."

ooop

#15
February 19, 2007, 04:15:16 PM
@ 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

#16
February 19, 2007, 09:23:18 PM
To have an animate mouse out, just have the normal background image be animated.

Quotewhat 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.
"Never imagine yourself not to be otherwise than what it might appear to others that what you were or might have been was not otherwise than what you had been would have appeared to them to be otherwise."

xfollowthereaperx

#17
February 20, 2007, 12:37:18 AM
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

#18
February 20, 2007, 08:37:37 AM
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

#19
February 21, 2007, 03:59:15 AM
"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...
Print
Go Up Pages1 2 All
User actions
Advertisement: