Highlighted

MouseOver - MouseOut animate button and show popup

New Here ,
Mar 03, 2020

Copy link to clipboard

Copied

Trying to create an HTML/SVG interactive infographic where:

1. a specific inactive shape is red

2. when moused over, it turns white AND

3. a box pops up with specific information (static or follow mouse)

 

I can get it to work if I make the shape a button and place the popup box in the symbol for OUT however the button will activate even if the mouse is over any area where the popup would eventually be (not the intended button but other buttons, center of graph, etc) which is chaotic and not what I want it to do. After extensive searching, I found some things online that is CLOSE to what I want to do but not entirely... I've cobbled together this, in which the mouseover events don't even work. Any help would be appriciated as I'm a designer, not a coder, and now my brain hurts. TIA

this.instance_IIT_K_popup.visible = false;

var frequency = 3;
stage.enableMouseOver(frequency);
this.instance_IIT_K_button.addEventListener("mouseover", fl_MouseOverHandler_5);

function fl_MouseOverHandler_5()
{
	this.gotoAndPlay(3);
	this.instance_IIT_K_popup.visible = true;
}

var frequency = 3;
stage.enableMouseOver(frequency);
this.instance_IIT_K_button.addEventListener("mouseout", fl_MouseOutHandler_3);

function fl_MouseOutHandler_3()
{
	this.gotoAndPlay(2);
}

 

TOPICS
Code

Views

154

Likes

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

MouseOver - MouseOut animate button and show popup

New Here ,
Mar 03, 2020

Copy link to clipboard

Copied

Trying to create an HTML/SVG interactive infographic where:

1. a specific inactive shape is red

2. when moused over, it turns white AND

3. a box pops up with specific information (static or follow mouse)

 

I can get it to work if I make the shape a button and place the popup box in the symbol for OUT however the button will activate even if the mouse is over any area where the popup would eventually be (not the intended button but other buttons, center of graph, etc) which is chaotic and not what I want it to do. After extensive searching, I found some things online that is CLOSE to what I want to do but not entirely... I've cobbled together this, in which the mouseover events don't even work. Any help would be appriciated as I'm a designer, not a coder, and now my brain hurts. TIA

this.instance_IIT_K_popup.visible = false;

var frequency = 3;
stage.enableMouseOver(frequency);
this.instance_IIT_K_button.addEventListener("mouseover", fl_MouseOverHandler_5);

function fl_MouseOverHandler_5()
{
	this.gotoAndPlay(3);
	this.instance_IIT_K_popup.visible = true;
}

var frequency = 3;
stage.enableMouseOver(frequency);
this.instance_IIT_K_button.addEventListener("mouseout", fl_MouseOutHandler_3);

function fl_MouseOutHandler_3()
{
	this.gotoAndPlay(2);
}

 

TOPICS
Code

Views

155

Likes

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
Mar 03, 2020 0
Adobe Community Professional ,
Mar 03, 2020

Copy link to clipboard

Copied

This is how you do a mouse over event.

 


/* Mouse Over Event
Mousing over the symbol instance executes a function in which you can add your own custom code.

Instructions:
1. Add your custom code on a new line after the line that says "// Start your custom code" below.
The code will execute when the symbol instance is moused over.
frequency is the number of the times event should be triggered.
*/
var frequency = 3;
stage.enableMouseOver(frequency);
this.movieClip_1.addEventListener("mouseover", fl_MouseOverHandler);

function fl_MouseOverHandler()
{
// Start your custom code
// This example code displays the words "Moused over" in the Output panel.
alert("Moused over");
// End your custom code
}

Likes

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
Reply
Loading...
Mar 03, 2020 0