Aligning Triggers and Targets

[alexv875876]

Hi all!

Thanks in advance for your help. This is what I am trying to do, I hope you follow:

I have 3 objects: a background image, an image filled into a Target box and an image filled into a Trigger box (using the composition widget). The Trigger image is small and lies on top of the Target image which is larger. They both lie on the background image. When the mouse rolls over the Trigger image, it makes the Target image fade into sight around it, underneath it. When you click on the Trigger image, it leads you to the next page, acting as a button. 

Now the problem is, these 3 images have to align and scale in syncronicity at all page widths as they are all part of the photograph im basically 'giving life to'. However, since the Trigger image is a small rectangle, it will not scale to the same proportions no matter how I adjust the Pin and Resize on any of the 3 images. I could make all 3 images the same size, but the Trigger image must be smaller, since roller over effect needs to take place in the specific spot. Further more, I would wish this whole setup to fill the browser at all times.

I need to find a solution to make the Trigger image scale proportionately to the others OR be able to select the area of the rollover in its own frame. Or is there another way to do this?

Am I asking for too much? 😄

Thank you!!

Alex

[Nancy OShea]

"Am I asking for too much?"

From Muse, yes.  Incidentally, Muse has no future, it's discontinued. 

I also have some major concerns about your UI/UX concept.  Exactly how do you envision this working on touch screen devices that have no mouse to hover with?  Given that mobile and tablet devices outnumber desktops 2:1, you cannot afford to alienate that many people. 

Often the best solutions are the simplest ones.   Below is a tutorial on creating a simple carousel slideshow with plain vanilla HTML, CSS and JavaScript code.  Don't use Muse for this.  Use a real code editor like Brackets or Dreamweaver.

https://www.w3schools.com/howto/howto_js_slideshow.asp

[fotoroeder · Accepted solution]

Muse has no future and will not be developed any further - so let´s see how we can help. Could you just create a one page site, save it as a new file to your CC, and share a link of that file with us? Reading is quite different from seeing and understanding your question - a picture says more than a thousand words …

From reading only I would suggest to use fixed width breakpoints instead of fluid width breakpoints.

I agree with Nancy and it is common sense that rollover effects should will not really be helpful on mobile devices, but might not really disturb, though. Just let´s see what you have and what you want and if we find a way. If you want too much? I don`t know yet.

Kind Regards,

Uwe

[Nancy OShea]

You might also look at a Responsive SVG Image Map below. This was not done in Muse.

https://jsfiddle.net/NancyO/6k3v4ge1/13/

[alexv875876]

Apologies for my late reply - I really appreciated your comments here.
In the end I chose to use fixed break-points (as fotoroeder suggested), and gave up on the responsive resizing for multiple elements needing to align. It is working fine so far!