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

Contributor ,
Jan 27, 2021 Jan 27, 2021

Copy link to clipboard

Copied

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

TOPICS
Advanced

Views

171

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 2 Correct Answers

Advocate , Jan 27, 2021 Jan 27, 2021
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");});

Likes

translate

Translate

Translate
Adobe Community Professional , Jan 27, 2021 Jan 27, 2021
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);

Likes

translate

Translate

Translate
Advocate ,
Jan 27, 2021 Jan 27, 2021

Copy link to clipboard

Copied

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");
});

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Jan 29, 2021 Jan 29, 2021

Copy link to clipboard

Copied

Thanks G,

It worked

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jan 27, 2021 Jan 27, 2021

Copy link to clipboard

Copied

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);

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Jan 29, 2021 Jan 29, 2021

Copy link to clipboard

Copied

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

 

 

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jan 29, 2021 Jan 29, 2021

Copy link to clipboard

Copied

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

 

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

};

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Advocate ,
Jan 29, 2021 Jan 29, 2021

Copy link to clipboard

Copied

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.

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines