variables to hide and unhide divisions

[Dday76]

I'd like to use something similar to imageswaps, but to hide and unhide divisions rather than images.
If I have a div class of ctrtext. I'd like to have several instances with different text, and then use OnMouseOver functions to toggle the visibility:visible or hidden css in order to show the proper text.

Alternatively, I could have two div classes ctrtext-vis ctrtext-hide and toggle the class assigned to that section of text.

Is there a way to throw instructions from the onmouseover or a similar function to css properties of a division?

(or other creative suggestions I didn't think of?)

View case in point at http://www.dday76.net/home.htm

[Twey]

Using classes is neater:

<script type="text/javascript">
window.onload = function() {
  var hideDiv = function(e) {
    if((e && e.target && e.target === this) || (window.event && window.event.srcElement && window.event.srcElement === this))
      this.style.className = "ctrtext-hide";
  };
  var showDiv = function(e) {
    if((e && e.target && e.target === this) || (window.event && window.event.srcElement && window.event.srcElement === this))
      this.style.className = "ctrtext-vis";
  };
  for(var i = 0, e = document.getElementsByTagName("div"); i < e.length; ++i)
    if(e[i].className.indexOf("ctrtext-") !== -1) {
      e[i].onmouseover = showDiv;
      e[i].onmouseout = hideDiv;
    }
};
</script>

[Dday76]

Twey,

Thanks loads. It looks like this script will show the division if onRollover of something. I'm not sure how to match the division with the link.

How do I tag div#links to ensure rollovers will only show the div.ctrtext- instance that includes the text related to links?

I updated the document online to include your suggestions. Can you take me one step further?

Jason

[Twey]

Any DIV with a class containing clrtext- will switch to clrtext-vis on mouse over and clrtext-hide on mouse out. It's as simple as that.

[Dday76]

That's what I thought... The page lists links to 6 different areas of the website. In the center of the links is a text box welcoming the user. If the user rolls over the link for area #1, the text area in the middle should change to text relating to area #1.

It looks like the code will change the text if the user rolls over the text rather than the link. Thanks for your patience on this.

[Twey]

Aha, I see. OK. Try this:

<script type="text/javascript">
  window.onload = function() {
    var showCurrent = function() {
      for(var j = 0, f = document.getElementsByName("description"); j < e.length; ++j)
        if(f[j].className.indexOf(this.text) !== 0) {
          if(f[j].style.display !== "none")
            f[j].style.display = "none";
        } else if(f[j].style.display !== '')
          f[j].style.display = '';
    };
    for(var i = 0, e = document.getElementsByName("desclink"); i < e.length; ++i)
      e[i].onmouseover = showCurrent;
  };
</script>

[Dday76]

Thanks. That looks like the right thing.

1. Just out of curiosity, is there a reason you used display instead of visibility?

2. What do I stick on the links and the divisions? I'm still not sure how to activate the Js.

[Twey]

1. Just out of curiosity, is there a reason you used display instead of visibility?

Visibility doesn't affect the layout of the page; it simply shows an empty space where the element would be. Since you have several elements all in the same space, using visibility here would cause the last element specified to appear considerably lower down the page than the first element.

2. What do I stick on the links and the divisions? I'm still not sure how to activate the Js.

The links need to have a name of "desclink"; the text elements need to have a name of "description" and a class of the link text that refers to them. For example:

<a href="philosophy.html" name="desclink">My Philosophy</a>
<p name="description" class="My Philosophy">Lorem ipsum dolor sit amet...</p>