CSS & Javascript Rollover Effect

[688206002]

Okay, there's 3 components to this, and this only works with IE-compatible browsers (remember this!!!) It requires no images though. This can be made to look like some flash rollover menu (transition effect) if you tweak the style sheet a bit.

Component 1:
In the head section of the page, insert:

<script type="text/javascript">
<!--
function lite(obj) {
if(document.all&&!window.opera) {
obj.filters.blendTrans.apply();
obj.filters.blendTrans.play();
}
}
-->
</script>



Component 2:
Create a div section with an unordered list menu:

<div id="menu1">
<ul>
<li><a href="index.php" onmouseover="lite(this)" onmouseout="lite(this)">Home</a></li>
<li><a href="crew.php" onmouseover="lite(this)" onmouseout="lite(this)">Crew Info</a></li>
</ul>
</div>


Make sure that you have:

onmouseover="lite(this)" onmouseout="lite(this)"

in the link tags that you wish for this effect to apply to.



Component 3:
In the style sheet, make a link section for the list:

#menu1 li a:link, #menu1 li a:visited{
display: block; width:134px; padding: 2px 2px 2px 10px; border: 1px solid #E0E0E0; background:#E0E0E0 text-decoration: none; filter:blendTrans(duration=0.5)
}


The filter part is really the important part... it states the duration of the transtion in seconds... for this case, it is 0.5 second



Enjoy!

[mahangee]

Can you include a page with an example.

[xangelo]

An example would be really useful.

[688206002]

lol, sorry about that... the example can be found on my main page:

http://688206002.hostmatrix.org/

remember that this thing only works with IE-compatible browsers... if you're using Firefox, the menu will just look like a normal one

btw, look at the menu on the left side of my page, not the top...

[Lord Magicdka]

umm, just a question but why dont you just get adobe photoshop 7 or above and go into image ready and just make a rollover button? Very simple to do, and it has a better effect.

[xangelo]

Magicdka how exactly do you do rollover image using image ready? I have adobe photoshop CS and I have no idea how to work it properly.

[Lord Magicdka]

well you can look at Http://www.good-tutorials.com (http://good-tutorials.com/) for most of the techniques, I MIGHT make a tutorial on it, but may take a bit because i am pretty busy

[688206002]

Originally posted by Magicdka@Oct 22 2004, 07:41 PM
well you can look at Http://www.good-tutorials.com (http://good-tutorials.com/) for most of the techniques, I MIGHT make a tutorial on it, but may take a bit because i am pretty busy
2572


Magicdka, I've made rollover images before but the point of this is NOT to use images. This saves some bandwidth and the effect is still there.

[Lord Magicdka]

I know but im just saying you can get some BETTER effects using the rollover technique, but I see what you say on it saving space and bandwidth and stuff, but just my way has tons of differant effects

[688206002]

i totally agree that images have much better rollover effects... this tutorial is just for those who want a simple transition effect in IE-compatible browsers without using images

[azzracing]

Going to give this tutorial a whirl. Just one question can you apply that to a PHPNuke Site? If so, would you edit the block section or the module. If no, is there a tutorial to do this?

[688206002]

Originally posted by azzracing@Oct 30 2004, 04:48 PM
Going to give this tutorial a whirl. Just one question can you apply that to a PHPNuke Site? If so, would you edit the block section or the module. If no, is there a tutorial to do this?
4315


i don't use PHPNuke and I've never used it; I prefer to code my own stuff. I can, however, look into it. Give me about 20 mins; I'll set up nuke on my site and PM you with the steps.

EDIT: Actually, I gtg to dinner right now; could you tell me which file is used for editing the menu and when i get back from dinner i'll have a look at it, thx

[BB3K]

It's also a lot faster than using images. Dial-up users would have hardly any waiting time to load the CSS, where they would have to wait to load all the images.