I'm stuck with show/hide objects with mouseover JS

[Jacob Hokland]

Hi everyone,

I'm trying to show/hide some more than one text box with link with different objects with mouseover/out event.

When I do it with only one object I can get it to work with this:

document.getElementById("myTriggerSustain").addEventListener("mouseover", FunctionMouseOver);

function FunctionMouseMover() {

cp.show("TextSustain");

}

document.getElementById("myTriggerSustain").addEventListener("mouseout", FunctionMouseOut);

function FunctionMouseOut() {

cp.hide("TextSustain");

}

But when I try the code below with more than one object, I can't figure out why nothing happens:

window.addEventListener("mouseover", function(e) {

if(e.target.id == "MyTriggershapeSustain") {
document.getElementById("TextSustainc").cp.show(this.id);

};

if(e.target.id == "MyTriggershapePackaging") {
document.getElementById("TextPackagingc").cp.show(this.id);

};

if(e.target.id == "MyTriggershapeCSR") {
document.getElementById("TextCSRc").cp.show(this.id);

};

window.addEventListener("mouseout", function(e) {

if(e.target.id == "MyTriggershapeSustain") {
document.getElementById("TextSustainc").cp.hide(this.id);

};

if(e.target.id == "MyTriggershapePackaging") {
document.getElementById("TextPackagingc").cp.hide(this.id);

};

if(e.target.id == "MyTriggershapeCSR") {
document.getElementById("TextCSRc").cp.hide(this.id);

};

Regards

Jacob

[Stagprime · Accepted solution]

I know this is not quite what you have going here but perhaps you'll find some usefulness from it. In my suggestion below, I have a box to serve as the hover object named "box" and four other items on stage named "obj1", "obj2", "obj3", and "obj4". This is placed in the slide onEnter action.

$("#box").hover(function() {
cp.show("obj1");
cp.show("obj2");
cp.show("obj3");
cp.show("obj4");
},
function() {
cp.hide("obj1");
cp.hide("obj2");
cp.hide("obj3");
cp.hide("obj4");
});

[Jacob Hokland]

Thanks G,

It worked

[TLCMediaDesign · Accepted solution]

You are treating the following line(s) like cp and cp.show are JS methods. They are part of the cp object:

document.getElementById("TextSustainc").cp.show(this.id);

So you need to use:

cp.show(this.id);

[Jacob Hokland]

Hmm but how do I link "ObjectName" to cp.show(this.id);

[TLCMediaDesign]

In this statement, what is the element you are wanting to show?

if(e.target.id == "MyTriggershapeCSR") {
document.getElementById("TextCSRc").cp.show(this.id);

};

[Stagprime]

If you wanted to shorten up your code a bit - you could do a little renaming of your objects and use the code below to apply to any object which had a corresponding suffix of 'text'. In this case, I also create a Captivate variable called obj.

$(".cp-frameset").hover(function() {
obj=$(this).attr("id");
cp.show(obj+"text");
},function() {
cp.hide(obj+"text");
});

So you might rename MyTriggershapeCSR to be CSR and TextCSRc to be CSRtext for example.

Then - when you hover over CSR, the object variable stores the name CSR onMouseover and shows CSRtext. When you take the mouse off it will hide CSRtext.

If you do not make a small change to the ID of the object that needs to shown and hidden, you end up trying to show and hide the thing you are mousing over and I did not get the impression that is what you wanted.

No need to use the "c" suffix here to refer to the canvas object.