Hotspot hover button

New Here ,
Aug 23, 2018 Aug 23, 2018

Copy link to clipboard

Copied

Hi there you all,

I have a problem. I am trying to make or better i need a button that has a hotspot wich on hover reveals a layer. Looked all over for it.

Can anybody help or has an idea how to make one of these. I have tryed a rollover image but reveals itself everywhere you go with the mouse. And because i need three buttons, a rolover image on top of eachather does not work. Do i need a Widget? If so, wich?

I need a hover button that only reveals a layer (the  whole page) when on the hotspot. Must be simpel.

Thanks!

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
community guidelines
LEGEND ,
Aug 23, 2018 Aug 23, 2018

Copy link to clipboard

Copied

Could you please specify your intention in simple words?

No real idea, what you want to achieve.

  • “a button that has a hotspot“: Do you really want a button, which has a hotspot or simply a button, which is a hotspot, i.e. which reacts on rollover?
  • “… reveals a layer“: What exactly do you mean with „layer“?

If you want your screen overlayed (covered) by a colour or an image, when you rollover a button, this is doable.

So please tell us exactly, what you want to achieve.

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
community guidelines
New Here ,
Aug 23, 2018 Aug 23, 2018

Copy link to clipboard

Copied

Hi Günter, i thought i was clear but apparently not. I'll try to explain it better with some screenshots. The normal state is 1st picture, after hovering over the button it reveals a layer that also has text like on first picture. Is this clear enough. Can you help?

Schermafbeelding 2018-08-23 om 11.05.39.png

Schermafbeelding 2018-08-23 om 11.08.06.png

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
community guidelines
LEGEND ,
Aug 23, 2018 Aug 23, 2018

Copy link to clipboard

Copied

This is possible in different ways, but not if the image should span over the whole browser window.

Or do you think of a backgroud image and a text element showing up on this image, when hovering a button?

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
community guidelines
New Here ,
Aug 23, 2018 Aug 23, 2018

Copy link to clipboard

Copied

Yes, i know. With a image rollover your there but i need it to be like this.

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
community guidelines
New Here ,
Aug 23, 2018 Aug 23, 2018

Copy link to clipboard

Copied

maybe i have to compromise and make it a smaller image. But it wouldn't look the same. This is classy and as you can see for a classy client.

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
community guidelines
New Here ,
Aug 23, 2018 Aug 23, 2018

Copy link to clipboard

Copied

This doesn't mean i am giving up on it guys. If HTML can do this (programming) why can't MUSE do this. I'll buy the Widget if necessary.

Please help.

Thanx!

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
community guidelines
Adobe Community Professional ,
Aug 24, 2018 Aug 24, 2018

Copy link to clipboard

Copied

I still didn`t get it. And no, a new thread will not solve your request faster (thanks Günter Heißenbüttel​).

Could you reduce your request to two screenshots – one for how the button should look like and one what appears after that button is clicked? Backgroung images are not necessary, I guess. Could be a backgroundcolor only. That might help.

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
community guidelines
New Here ,
Aug 24, 2018 Aug 24, 2018

Copy link to clipboard

Copied

The button is a logo. The two screenshot are already given. On click you go to another page then the pop up from the button.

Thanks!

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
community guidelines
LEGEND ,
Aug 24, 2018 Aug 24, 2018

Copy link to clipboard

Copied

I am out here.

  • On click? On hover? Clicking onto what: The button? The image?
  • Which image is background, which appears on hover? Or are both images background and the text should appear on hover? Or is one image present and the other appears?
  • Will there be more than one of these buttons/images?

I don‘t like to be a lemon squeezer, trying to press out the informations, which are necessary to help.

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
community guidelines
Adobe Community Professional ,
Aug 24, 2018 Aug 24, 2018

Copy link to clipboard

Copied

Same to me, sorry. From the screenshots above I didn`t get what you want to achieve. What is a hotspot?

Best 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
community guidelines
Adobe Community Professional ,
Aug 24, 2018 Aug 24, 2018

Copy link to clipboard

Copied

On hover or rollover won't do anything on touch screen devices because they have no mouse.   The most user friendly way to trigger an event is with onClick or Tap.

Maybe a Lightbox widget would do what you need?

Nancy O'Shea, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

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
community guidelines
New Here ,
Aug 25, 2018 Aug 25, 2018

Copy link to clipboard

Copied

It's not that difficult to understand. When you are on the button (hover not click) you see pic 2 hopfully with text as in pic 1. There will be three buttons and it should only show the pic when on the button, not on the page as in a rollover image. I don't know Muse well enough to solve this myself.

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
community guidelines
Adobe Community Professional ,
Aug 25, 2018 Aug 25, 2018

Copy link to clipboard

Copied

I repeat.  Hover won't work on touch screen devices. 

Nancy O'Shea, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

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
community guidelines
New Here ,
Aug 25, 2018 Aug 25, 2018

Copy link to clipboard

Copied

well what does work than? There must be something that makes this happen. If you can think of it you can make it. Isn't that the word?

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
community guidelines
Adobe Community Professional ,
Aug 25, 2018 Aug 25, 2018

Copy link to clipboard

Copied

Do you own a mobile device?  Does it have a mouse connected to it? Of course not.

Hover and Mouseover triggers only work on devices that have a mouse.  All other users will see nothing.

Nancy O'Shea, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

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
community guidelines
New Here ,
Aug 25, 2018 Aug 25, 2018

Copy link to clipboard

Copied

that makes my idea inapplicable?

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
community guidelines
New Here ,
Aug 25, 2018 Aug 25, 2018

Copy link to clipboard

Copied

a simple yes will do. It's a pity that some ideas just won't work. Although you would wich they would.There is work ahead for programmers.

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
community guidelines
Adobe Community Professional ,
Aug 25, 2018 Aug 25, 2018

Copy link to clipboard

Copied

onClick event triggers work on all devices.   Muse is EOL which means this software is no longer being developed.  Adobe will officially end Muse support in March 2021.

If you want to create advanced interactive web apps outside Muse that will work on all devices, I suggest you spend a little time  learning HTML, CSS and JavaScript.

HTML Tutorial

CSS Tutorial

JavaScript Tutorial

Nancy O'Shea, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

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
community guidelines
Participant ,
Aug 25, 2018 Aug 25, 2018

Copy link to clipboard

Copied

Because of tablets and smartphones, hover states have fallen out of favor, but they aren't completely gone for some interactions. There are still plenty of sites that use rollover actions for buttons. You want to make sure it doesn't break the functionality, locking out people, who might be trying to view your site with a tablet or mobile (remember, on a tablet, your finger is the cursor, and it doesn't know that your finger is hovering over a button).  Most of the time, you want both rollover and click to be active. Rollover for desktop experience, to give the user some feedback, letting them know that the button is active.

In your case it's more of an experience effect, where the position of your cursor dictates what is viewable. I get that. It's nice, but the button still needs to be clickable for tablets, or your users won't be able to interact with your site. 

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
community guidelines
New Here ,
Aug 25, 2018 Aug 25, 2018

Copy link to clipboard

Copied

But if i understand you corectly. It's because OS on devises are not operating on the same level. Don;t programmes correct this shit automaticly. If not. Why isn't anybloodybody doing anything about it.

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
community guidelines
New Here ,
Aug 25, 2018 Aug 25, 2018

Copy link to clipboard

Copied

exscuse my language.

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
community guidelines
New Here ,
Aug 25, 2018 Aug 25, 2018

Copy link to clipboard

Copied

oh my god HTML. No way. A am by nature a designer!

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
community guidelines
New Here ,
Aug 25, 2018 Aug 25, 2018

Copy link to clipboard

Copied

Muse is hereby a faleure.

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
community guidelines
New Here ,
Aug 25, 2018 Aug 25, 2018

Copy link to clipboard

Copied

Thanks for the insight. Completely understand why they abort. So will i. Pity though what else will a designer do now. Fail fail fail.

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
community guidelines