Highlighted

Aligning Triggers and Targets

New Here ,
Apr 04, 2020

Copy link to clipboard

Copied

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

Adobe Community Professional
Correct answer by fotoroeder | Adobe Community Professional

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

TOPICS
How to, Responsive design, Widget

Views

507

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Aligning Triggers and Targets

New Here ,
Apr 04, 2020

Copy link to clipboard

Copied

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

Adobe Community Professional
Correct answer by fotoroeder | Adobe Community Professional

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

TOPICS
How to, Responsive design, Widget

Views

508

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Apr 04, 2020 0
Adobe Community Professional ,
Apr 04, 2020

Copy link to clipboard

Copied

"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

 

 

Nancy O'Shea, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 04, 2020 0
Adobe Community Professional ,
Apr 05, 2020

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 05, 2020 0
Adobe Community Professional ,
Apr 05, 2020

Copy link to clipboard

Copied

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

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

 

 

Nancy O'Shea, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 05, 2020 0
New Here ,
Apr 16, 2020

Copy link to clipboard

Copied

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!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 16, 2020 0