Hi there, I'm struggling to figure this out.

I am going to be creating an online community site, and will need to figure out how this site was able to use the rollover function used at the top:

http://www.oracleerp.org/main/summary

The rollover function actually uses an iframe source to bring this page into it:

http://www.oracleerpads.com/Description_New/index1.html


Now, what I'm not sure about, is how that background image at the top is automatically loaded into it when nothing is moused over... not quite sure how that works.

Can someone give a bit of guidance? I don't typically work with frames.

What I have understood according to that /index.html is a javascript based rollover containing images only there is no text involved in it and the default is set that comes up without mouse over, If there is any thing else please make it clear. Happy to help.
____________________________________
website design rewari | web templates rewari

it seems like a simple javascript functions used. Better you can try with jQuery. do some search in google for "jQuery tabs".

You can create that entire menu w/o javascript using CSS.

Hi Lady n red,

Can you possibly provide insight as to how I would be able to do this using entirely CSS?

You can try these resources:

http://purecssmenu.com/

http://www.cssplay.co.uk/menus/

http://www.webdesignerwall.com/tutor...dropdown-menu/

thanks everyone,

the Jquery tabs I think will work nicely.

http://jqueryui.com/demos/tabs/#mouseover

If LadynRed will forgive me, the point about doing it in CSS is that you're not hitting server and local machine through jquery calls that really aren't necessary.

So, I can't find ANY examples at all on how this could be done using CSS only.

I mean I need it so that when you roll over the tabs, content appears below / above them. If I saw some source code examples I could get a sense but that stu nicholls site doesn't have really what I need.

If some one could please just point me in the right direction, I will get to it and figure it out. THANKS!

This is very easy to do with jQuery:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<style type="text/css">
    .content { border: 1px solid red; width: 500px; height: 250px; font-size: 15px; text-align: center; line-height: 250px; }
</style>

<script type="text/javascript">

    $(document).ready(function() {

        $('a.about').mouseover(function() {
            $('div.content').html('This is the about text');
        });
        $('a.services').mouseover(function() {
            $('div.content').html('This is the service text');
        });
        $('a.contact').mouseover(function() {
            $('div.content').html('This is the contact text');
        });
        $('a').mouseout(function() {
            $('div.content').html('Welcome to our site, hover over any of the below links to learn more about us');
        });

    });

</script>

<div class="content">
    Welcome to our site, hover over any of the below links to learn more about us
</div><!-- content -->

<a href="javascript:void(0)" class="about">About Us</a> | <a href="javascript:void(0)" class="services">Our Services</a> | <a href="javascript:void(0)" class="contact">Contact Us</a>

It can also be done easily using vanilla js in case you don't want to load an entire library for one simple effect. If you want to go that route you can use the getElementById and innerHTML functions of javascript to replace the selection by class and .html() functions of jQuery.

Awesome!

Thanks for that. Cake, and exactly what I need I think.

well this can be done on css only.

<li> <--- background :hover use another background.