Can you change main stage content on mouseover?

[ScottGilman]

I'm trying to customize my Story Map Journal so that users can mouseover an image and add a layer to the map in the main stage.  However, if you use the graphic interface to insert a link that changes the mainstage content, you get something like this:

<a data-storymaps="MJ-ACTION-1470675977260" data-storymaps-type="media">Main stage action</a>

which will only work for a click, not a mouseover.  Is there a way to do a similar thing with javascript so that it can be triggered with a mouseover event?

[GregoryL_Azou · Accepted solution]

You can certainly do that with some customization.

What I would do is use the builder to create the Main Stage action then keep the data-storymaps="MJ-ACTION-1470675977260" on the element that you want to trigger the action on hover. Then you can just remove the link.

After you catch the hover event using jQuery for example (https://api.jquery.com/hover/), you will just have to do something like this

$.each(app.data.getContentActions(), function(i, action){
  if (action.id == "the id of the element hovered") {
    performAction(action);
  }
});

When navigating away from the element if you want to restore the state of the Main Stage, in some case something as simple as below will works.

topic.publish("story-perform-action-media", app.data.getCurrentSection().media);

But that won't work if you are re configuring the same map (like showing a different layer), for that you would need to copy most of the logic from map-journal-storytelling-template-js/StoryText.js at master · Esri/map-journal-storytelling-template....