Menu with mouse up

[rhdpre07]

Menu with mouse up

Hello, I'm trying to create a mouse-up based menu... like the one seen here:
(it is not the main menu, it is a little further down like this:



https://carmennavarro.com/

It's possible? I've tried but I can't, and I don't know if I'm wasting my time with something impossible:

https://www.neoclick.es/1/

The "black border frames" are the Mouse up.....
Depending on where you move, you can reach "a 3rd level"... and some work and others don't.


I have also realized that "the ones that don't work" work if I lower the layer, but "the ones that worked stop working...


Thank you very much in advance

[Egg Bramhill]

If you're trying to do it with popup layers you can soon run into issues as it's not simple to close a popup layer on mouse-over.

It would be better having a base image on MouseOff and use JavaScript to change the base image as in the attached xar file. I'm sure Acorn could make it less abrupt on mouse over. I didn't use the MouseOut code.

Edit: Cleaned up the demo and xar file.

DEMO

JS Code Source

[gwpriester]

I've moved this thread to Web Design Chat.

[Acorn]

If you're trying to do it with popup layers you can soon run into issues as it's not simple to close a popup layer on mouse-over.
It would be better having a base image on MouseOff and use JavaScript to change the base image as in the attached xar file. I'm sure Acorn could make it less abrupt on mouse over. I didn't use the MouseOut code.
Edit: Cleaned up the demo and xar file.

DEMO

JS Code Source

Egg, I tidied up your JavaScript to accommodate any number of images.
I couldn't really do much for the transition as it gets quite messy. I have a bodge in place.
I changed the masks to a local file so I could experiment with it. Massages shows you don't even need an image.

The use of onmouseover without onmouseout is very useful as a latch.
I might try for a CSS solution...

image-swap-js-2 - Acorn.xar

Acorn

[Egg Bramhill]

Yes, that works great. It's also easier not having to list all the image names. The n is far easier.
One question. Should the JS have a closing curly bracket just before the </style> tag? It seems to work fine with / without.

<style>
#img0 {
transform: scale(100%);
transition: all 1s ease-in;
}
#img0.scale {
transform: scale(105%);
</style>

[Acorn]

Yes, that works great. It's also easier not having to list all the image names. The n is far easier.
One question. Should the JS have a closing curly bracket just before the </style> tag? It seems to work fine with / without.

Egg, good catch. yes, it ought! Sorry.

I'm currently looking at a pure Xara approach, using reveal with a trigger. Just got it working with two buttons.
The trick was to use Sticky to ensure the buttons always are on top.
I'll finish it tomorrow, with a good tail wind.

Acorn

[rhdpre07]

Hello...

Great...It's exactly what I needed,...

But your code has left me very confused

Where do you get the images (I've gone crazy looking for them)?

What is the meaning of this url? (I find it strange and it doesn't take you anywhere (error404))
("https://parkeston.com/photos/set1/'+n+'.jpg")

Should I change that domain to my own?

confused....very confused

[Egg Bramhill]

Hi, the images are placed in a folder on my server at root/photos/set1/ which I uploaded using Filezilla. It contains 5 jpg photos (0.jpg to 4.jpg) and 1 png image (0.png). See screengrab. These images/photos have simple numerical names i.e. 3.jpg. You would need to do the same on your server.

The 0.png (It is just a white rectangle with 70% transparency) is called by a placeholder which also tells the placeholder to "onmouseover="setnewimage(1)" or "onmouseover="setnewimage(2)" etc.

Your getting a 404 because

'+n+'.jpg

doesn't exist. The n is changed to a number by Acorns code. Unlike my code which specifies the number of images, Acorns allows for an unlimited number of photos to be called from 0.jpg through and beyond 0.jpg to 12567.jpg

So the following code on a placeholder "onmouseover="setnewimage(3)" would change the base image from what it was to the following:

https://parkeston.com/photos/set1/3.jpg

[Acorn]

i promised a Xara solution.
Golly, I made it: Xara - Hover Up Images.xar

No code, just a clear head.
The good thing is you can add the full range of Xara animations, times and delays.

Do note it is a proof of concept and you need to work on it for your needs. I would, for a change, like to see your examples and explanation of any problems rather that having to do it all for you.

Acorn

[Egg Bramhill]

An excellent all Xara example. I took your xar file and reworked it to recontstruct the one I'd recreated using css/js.

One thing I don't understand is the need for the !fudge layer, it doesn't have anything on it? I know if you delete that layer it stops working correctly.

Works a treat:

DEMO