MyBB Central

Full Version: Toplinks Images Change OnMouseOver
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
I was looking at http://mybbsource.com/index.php and noticed the toplink images changed when the mouse went over theme. I'm wanting to do something similar with my site at http://www.ethical-hackers.org, is there any way anyone can help me? Currently the code for the header is such:

Code:
<div id="container">
        <a name="top" id="top"></a>
        <div id="header">
            <div class="logo"><a href="{$mybb->settings['bburl']}/index.php"><center><img src="{$theme['logo']}"</center></div><div class="floating_facebook"><a href="http://www.facebook.com/pages/Ethical-Hackers/121908007842297/" target="_blank"><img src="images/flame/facebook.png" alt="Facebook" title="Join our facebook page!" /></a></div>
                        <div class="menu">
                <ul>
                                       <center>
                        <li><a href="{$mybb->settings['bburl']}/home.php"><img src="{$mybb->settings['bburl']}/{$theme['imgdir']}/toplinks/home.png" alt="" title="" /><b>Home</b></a></li>
                        <li><a href="{$mybb->settings['bburl']}/index.php"><img src="{$mybb->settings['bburl']}/{$theme['imgdir']}/toplinks/forum.png" alt="" title="" /><b>Forums</b></a></li>
                                        <li><a href="{$mybb->settings['bburl']}/subscribe.php"><img src="{$mybb->settings['bburl']}/{$theme['imgdir']}/toplinks/subscribe.png" alt="" title="" /><b>Subscribe</b></a></li>
                                        <li><a href="{$mybb->settings['bburl']}/donate.php"><img src="{$mybb->settings['bburl']}/{$theme['imgdir']}/toplinks/donate.png" alt="" title="" /><b>Donate</b></a></li>
                                        <li><a href="{$mybb->settings['bburl']}/search.php"><img src="{$mybb->settings['bburl']}/{$theme['imgdir']}/toplinks/search.png" alt="" title="" /><b>{$lang->toplinks_search}</b></a></li>                        
                    <li><a href="{$mybb->settings['bburl']}/memberlist.php"><img src="{$mybb->settings['bburl']}/{$theme['imgdir']}/toplinks/memberlist.gif" alt="" title="" /><b>{$lang->toplinks_memberlist}</b></a></li>
                                        <li><a href="{$mybb->settings['bburl']}/contact.php"><img src="{$mybb->settings['bburl']}/{$theme['imgdir']}/toplinks/contact.png" alt="" title="" /><b>Contact</b></a></li>
                    <li><a href="{$mybb->settings['bburl']}/misc.php?action=help"><img src="{$mybb->settings['bburl']}/{$theme['imgdir']}/toplinks/help.gif" alt="" title="" /><b>{$lang->toplinks_help}</b></a></li>
                    <li><a href="{$mybb->settings['bburl']}/blogs.php"><img src="{$mybb->settings['bburl']}/{$theme['imgdir']}/toplinks/blog.png" alt="" title="" /><b>Blogs</b></a></li>
                    <li><a href="{$mybb->settings['bburl']}/wiki.php?start.html"><img src="{$mybb->settings['bburl']}/{$theme['imgdir']}/toplinks/wiki.png" alt="" title="" /><b>Wiki</b></a></li></center>
                                </ul>
            </div>
            <hr class="hidden" />
            <div id="panel">
                {$welcomeblock}

            </div>
        </div> <br />
<DIV align="right">
<quickthemeoc> </div>



        <hr class="hidden" />
        <br class="clear" />
        <div id="content">
            {$pm_notice}{$extmessage}
            {$bannedwarning}
            {$bbclosedwarning}
            {$unreadreports}

            <navigation>
            <br />
The toplinks backgrounds change, not the toplink images.

And that can be done by Javascript. http://www.hypergurl.com/rolloverimage.html
I've already seen that link, and it's not correct in this case. Please look at the site I showed. The background doesn't change for that.
That's CSS for the hover.
As Labrocca said, CSS for hover.

I did not get what you meant , there are many links at the top.

Did you mean the links by the User CP? Or by the Modifications links? Or Quick Links?
I meant the ones for the User CP, Private Messages, and Logout. Could someone perhaps show me how to do this with the css please? I tried before but it doesn't seem to want to work within the <li></li> so i reckon I have to rewrite the whole thing but I'm not sure what I'd have to get it to rewrite as to get it to work.

It would be nice if I could ALSO get the images themselves to change as well, but that means it might have to be with no text and only images.

On top of that for some of them I'd like to have a dropdown box on mouseover. That's a lot of stuff there so I might not incorporate all of it, but I really would like to figure out how to do this.
I suggest you play with it and read w3c css guide. You may not have a full understanding of how CSS works yet and this may help you. Telling you the solution would not benefit you.
Thanks labrocca! Smile