Custom Mouse Cursors with JavaScript in Storyline 360
In this video, Jeff Batt demonstrates customizing the mouse icon for specific objects within an Articulate Storyline 360 eLearning course. You can change the cursor to a custom icon, image, or anything else using this simple snippet. When you move your mouse away from the object, the cursor returns to normal.
You can achieve a similar effect within Camtasia, and with this code, you can replicate that same effect inside Storyline for any digital learning course.
This snippet joins the rest of the snippets you can use out of the box, which can be found here: https://learningdojo.ninja/javascript.... Join us and take your eLearning skills to the next level!
Code Snippet
let targetObject = document.querySelector("[data-model-id='']");
if (targetObject) {
targetObject.addEventListener('mouseover', function () {
targetObject.style.cursor = 'url("../upside-down-cursor.png"), auto';
});
targetObject.addEventListener('mouseout', function () {
targetObject.style.cursor = 'default';
});
}
🥷 Link to Full Courses
Articulate Storyline 360: https://courses.learningdojo.ninja/c/...
Storyline & JavaScript: https://courses.learningdojo.ninja/c/...
Adobe Captivate: https://www.udemy.com/course/adobe-ca...
xAPI Fundamentals: https://courses.learningdojo.ninja/c/...
Camtasia: https://www.udemy.com/course/masterin...
Articulate Rise 360: https://courses.learningdojo.ninja/c/...
If you would like learn more visit https://learningdojo.ninja.