Hopefully, it’s ok to start a new topic on this issue rather than append to the prior.
I had such great hopes that the similar topics, where an ID from an SVG path was used to select and initiate some function would be the solution when there were odd shaped objects needing to be selected.
The attached files shows that the SVG Path IS being used for selection BUT the Objects rectangular bounding box still prohibits overlapped objects from accessing the their SVG path.
Looks like I’ll have to use the multiple spheres grouped as an object to achieve the goal. Though I do appreciate Daniels suggestion for this hack.
Is there any javascript that can ignore an object’s bounding box?
If you can … create 1 svg with all the shapes inside that has a bounding box the same size as the pic.
So, if the pic is 1140x880 then create an SVG with the same dimensions and then draw your paths inside it to match your hit areas and then you can get the resulting code and place in a rectangle of the same dimensions in your Hype doc.
Then you can “target” the svg’s by using there id’s by running something like this on mouse over of the whole rectangle. Doing this you must make sure your paths have the ID inline with “areaXXXX” e.g “areaEast”
var paths = document.querySelectorAll("svg path");
paths.forEach(function(el) {
el.addEventListener("mouseover", selectRegion);
el.addEventListener("mouseout", selectRegion);
el.addEventListener("mousedown", goToScene);
})
function selectRegion(e){
var el = document.querySelector("." + e.target.id);
if(e.type == "mouseover"){
el.style.display = "inline";
} else if (e.type == "mouseout"){
el.style.display = "none";
}
}
function goToScene(e){
if(e.target.id == "areaEast"){
hypeDocument.showSceneNamed("areaEast");
}
// if it was me I would probably refactor to
// hypeDocument.showSceneNamed(e.target.id)
// and make sure the scene names correspond to the path id's
}
Though I do appreciate Daniels suggestion for this hack.