JavaScript: making text appear onmouseover a different rect element

Hey all,

Is anyone able to tell me how I set a text to animate from hidden to visible when I mouseover a different ‘rect’ element not containing this text? The text and the associated animation are in one function, and the ‘rect’ element is created from a generic rect-creating function and then called in another main-box function.

Currently, the animation code looks like this:

Code:

---


var anim = SVGDoc.createElementNS('http://www.w3.org/2000/svg', 'animate');

anim.setAttributeNS(null,'attributeName',"visibility");

anim.setAttributeNS(null,'begin', "0s");

anim.setAttributeNS(null,'dur',"1s");

anim.setAttributeNS(null,'fill',"freeze");

anim.setAttributeNS(null,'from', "hidden");

anim.setAttributeNS(null,'to', "visible");

infoText.appendChild(anim);

---

Obviously I need to change the ‘begin’ attribute and add an ‘end’ attribute, but I don’t know to what… I’m guessing that getElementById will help, and I’ve tried several different ways of implementing this and the associated variable, but to no avail. Can anyone help me please?

Thank you.

Why don't you just change the CSS display style?

Code:

---

function toggleElement(id) { // pass id parameter as the element id
  theElement = document.getElementById(id);
  theElement.style.display = (theElement.style.display == '') ? 'block' : '';
}

---

For the current case - as PeejAvery said.

Additionally for the future, for the cases when you need to change css of the same element you put mouse over.

In your attached CSS:

Code:

---

body {behavior:url(styles/csshover2.htc);}
/*
csshover2.htc is an IE hack file that makes IE6 understand "hover" css property
for all elements (originally IE6 has "hover" for <a> only);
csshover2.htc path should be set relatively to your html, not this css file;
it can be downloaded from here for ex.: http://www.xs4all.nl/~peterned/htc/csshover2.htc
*/
.class1 {color:#FF0000; border:1px solid #666666;}
.class1:hover {color:#FFFF00; border:1px solid #FFFFFF;}

---

It's that simple you just define the style for normal appearance, and the appearance when hover is on. If you attached csshover2.htc correctly this should work for any element in any browser. Some pretty nice buttons annimation can be made using this approach for ex. And with no need of javascript.