Question

Sorry if this question is explained a bit poorly JQuery is not my “native” language, so I’ll try to explain as best I can. (and I’ve set up a jsfiddle to help show the code) http://jsfiddle.net/6eYYR/

I have a webpage here: http://www.waranuwater.com.au/pages/test-1 I had a colleague assist me, in getting to the point I am now with the Jquery.

Scroll down to the second area, I have two divs set up side-by-side, one on the left contains an imagemap, the other on the right a “content area” with html content. The “content area” contains some text that will change when the user hovers over a part of the imagemap.

I’ve managed to get the content (which I have made black to make it easier to see for the timebeing) to change when the relevant part of the imagemap is hovered , when the user hovers over the imagemap, but I can’t work out how to have the initial content disappear when the hover occurs (the bit that starts with “Complete Contaminant Removal”)

This is my current Jquery code:

 function showHideDivs(indx){
            hideDivs();
            oShowHideDivs[indx].style.display = 'block';
        }
        function hideDivs(){
            for(i=0; i < oShowHideDivs.length; i++){
                oShowHideDivs[i].style.display = 'none';
            }
        }
        window.onload=function(){
            oShowHideDivs =  
document.getElementById('ccontainer').getElementsByTagName('div');
            var oMap = document.getElementById('myMap');
            for(i=0; i < oMap.areas.length; i++){
                oMap.areas[i].indx = i;
                oMap.areas[i].onmouseover=function(){showHideDivs(this.indx);}
                oMap.areas[i].onmouseout = hideDivs;
            }
        }

Am I missing something here? Do I need to tell Jquery to “hide” the existing text?, and if so how would I go about doing that?

Thanks in advance

Answer 1

Your “initial content” is not inside any div, so it will be unaffected by your show/hide div logic. I’d suggest first placing it in its own div, just like the others:

<div id="ccontainer">
    <div id="Sediment-Filter">...</div>
    <div id="Anti-Bacterial-Filter">...</div>
    <div id="Proteus-RO-Membrane">...</div>
    <div id="Activated-Coconut-Carbon">...</div>
    <div id="Initial-Contents">
        <h3>Complete Contaminant Removal</h3>
        <p>What truly sets this system apart ...
        ...
    </div>
</div>

Now it will be hidden just like the others when hideDivs is called. Your next step is show it by default when the other divs are hidden:

    function hideDivs(showInitial){
        for(i=0; i < oShowHideDivs.length; i++){
            oShowHideDivs[i].style.display = 'none';
        }
        if ( showInitial )
            document.getElementById('Initial-Contents').style.display = 'block';
    }

…unless you’re showing a specific div:

function showHideDivs(indx){
    hideDivs(false); // Don't show initial contents
    oShowHideDivs[indx].style.display = 'block';
}

Note that showInitial is “truthy” when it’s an Event object, so you can still use it directly in the oMap.areas[i].onmouseout = hideDivs; line.

(BTW your question does not use jQuery, just vanilla JavaScript – though there is jQuery elsewhere in your page)