Wordpress hover over link and several elements change [closed]

Question

This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.

Closed 8 years ago.

This wordpress home page has the following html for the content section (the middle section with the three columns of divs)

http://goodsense.etempa.co.uk

<div class="seewidgets">[widgets_on_pages id="Home page middle box"]</div>

<div class="top-area">
    <div class="image">
        <img alt="Primary Care" src="/wp-content/uploads/scenarios/primary_care.png" />
    </div>

    <div id="contact_box" class="home_side_box">
        <div class="clients">
            <img alt="Contact Us" src="/wp-content/uploads/buttons/contact_button.png" />
        </div>
    </div>

    <div class="home_side_box home_side_box_gap">
        <div class="home_side_box_heading">Social Media</div>
            //Social Media Stuff
        </div>

        <div class="home_side_box home_side_box_gap">
            <div class="home_side_box_heading">Example Clients</div>
                <div class="clients">
                    <img alt="" src="/wp-content/themes/twentytwelve/images/client.png" />           
                </div>
            </div>

            <div class="home_text_box" id="scenario_intro_text_div">
                <p>If you work in primary healthcare you know that anything can happen. </p><p>Your staff may be required to handle a difficult ... <a href='/primary-care'>Read More</a></p>
            </div>
        </div>
    </div>
</div>

As you can see, there is a list of Sectors on the left, which is a wordpress menu, a central image, central text and on the right, an example client.

Baring in mind this website is written in wordpress and the content above is entered in the 'Edit Page' part of Wordpress, not in a template (although I have complete access to the template files), can anyone tell me a way I can have the user hover over a Sector on the left, and then central image, the central text and the right hand side client image all change to match the sector hovered over?

The main problem I have is the list of Sectors is in a Wordpress menu and if possible, I'd like it to stay that way, but I can hard code if necessary.

Answer 1

You'll need to use jQuery.

This should get you started:

$('#menu-item-65').mouseover(function() {
    // when element is moused over, change html elsewhere on page
    $('.top-area .image').html('<img src="path/to/your/image.jpg" />');
    $('.home_side_box .clients').html('<img src="path/to/your/other/image.jpg" />');
    $('#scenario_intro_text_div').html('<p>Your text here</p>');
});

The first line basically means that when #menu-item-65 (the id of one of the individual lis from the left "Sectors" navigation menu) is mouseovered, it replaces the inner HTML of the elements targeted inside the function with whatever you specify.

Relevant links:

• http://api.jquery.com/html/
• http://api.jquery.com/mouseover/
• http://www.w3.org/TR/CSS2/selector.html

Your theme already has jQuery loaded, so you will just need to include this in a custom scripts file and make sure it's loaded (either by putting the script call in header.php or by adding it via wp_enqueue_script in functions.php).