CP9 HTML5 Run javascript during button Rollover state.

[petern33480613]

CP 9

HTML5 only.

I have a button named "Confirm" with three states "Normal", "Rollover" and "Down".

When the user hovers the mouse over the button, the button changes to the Rollover state.

All of that works perfectly.

What I would like to do is execute some extra javascript code when the button is in its Rollover state.

Is there a way for the slide to be constantly on the lookout for a change in state of the button and then run the javascript?

Thank you

Peter

[TLCMediaDesign · Accepted solution]

Execute this JavaScript onSlide enter of the slide with the button on it. Change SmartShape_1 to your button name.

document.getElementById("SmartShape_1").addEventListener("mouseover", function(){

    alert("OVER");

});

[petern33480613]

TLC,

Big thank you, I will try that out.

Peter.

[petern33480613]

Update to previous message, I hope it helps anyone else who muddles their way through Javascript.

I needed a photograph to be shown in one part of the slide when the user hovered over a different area on the slide.

I initially thought I needed to use a ‘Rollover’ state of a button, but after seeing the code in the answer from TLC I experimented and found that it can be done with just a plain shape, which I named myTriggerShape, with no states.

So when the mouse is over myTriggerShape it will show the myPhotograph.

When the mouse moves away from myTriggerShape, the photograph will be hidden.

I created a shape named myTriggerShape, and made it transparent.

I placed a photo on the slide and named it myPhotograph and made it not visible.

I put the code below in the slide On Enter action.

// When the mouse is over the myTriggerShape, show my photograph.

document.getElementById("myTriggerShape").addEventListener("mouseover", myFunctionOver);

function myFunctionOver() {

cp.show("myPhotograph");

}

// When the mouse moves away from the myTriggerShape, hide my photograph.

document.getElementById("myTriggerShape").addEventListener("mouseout", myFunctionOut);

function myFunctionOut() {

cp.hide("myPhotograph");

}

Good Luck.

Peter