• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

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

426

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

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

Votes

Translate

Translate
People's Champ , 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);

Votes

Translate

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

Votes

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

Votes

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
People's Champ ,
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);

Votes

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

 

 

Votes

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
People's Champ ,
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);

};

Votes

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
Advisor ,
Jan 29, 2021 Jan 29, 2021

Copy link to clipboard

Copied

LATEST

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.

Votes

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
Resources
Help resources