Menu with mouse up

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:

Attachment 134594

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

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

I've moved this thread to Web Design Chat.

Quote:

---

Originally Posted by 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

---

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...

Attachment 134603

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.

Quote:

---

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

---

Quote:

---

Originally Posted by 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.

---

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

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

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

Quote:

---

'+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

i promised a Xara solution.
Golly, I made it: Attachment 134611

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

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

Quote:

---

Originally Posted by 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

---

Egg, you are my kind of TGer! Thank you for the demo.

It took a tad of inspiration to add in the empty !fudge layer.
Why it works, I don't know. I have found a lot of Xara quirks occur down to bad counting.
The first element in a JavaScript array is [0]: January would possibly be month[0], whereas without thinking your usual experience would be to guess month[1].

It is interesting why no one has yet asked "Why do the images stay open?"
Xara has coding for MOff/MOver actions that display the MOver shape if there is a >50% overlap.
At the same time, we have a Web Amination action that is also doing an action to displayed a triggered event for the image.
You get the normal mouse over/out action for the button but the Web Animation effect remains in force until the image is exited.
Usually, Xara effects are singular; this one bubbles through. Luckily.

Acorn

Quote:

---

Originally Posted by 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 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

---

Thank you very much again for this "master class"
To make interactive banners it is very very good

...although I have been a little disappointed: It doesn't work with layers....

I would be happy if...you told me that it is possible...(it is enough for me that you tell me that it is possible and that a good programmer will solve it for me even if it is paying (for learning the method and if my insane economy It allows)

I need it for the Menu that I have in layers.....

I have created an example in case you want to see it because the 2 files interact, the one from the active layer and the one from the Mouse Up layer

any ideas?
​
https://www.neoclick.es/1/

Quote:

---

Originally Posted by 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

---

A million thanks....
achieved!

I don't know how to thank you, the Arcon Banner and this thing about Egg's capes...

I had been fighting for a long time trying to achieve something similar...

A million thanks....
achieved!

I don't know how to thank you, the Arcon Banner and this thing about Egg's capes...

I had been fighting for a long time trying to achieve something similar...

Quote:

---

Originally Posted by Acorn

i promised a Xara solution.
Golly, I made it: Attachment 134611

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

---

Lots of great ideas Acorn that can be repurposed. Thanks you.

Quote:

---

Originally Posted by bwood

Lots of great ideas Acorn that can be repurposed. Thanks you.

---

Cheers, Bill. The elephant in the room is not being able to make the whole thing Sticky.

Acorn

Just another variant on this one. I was looking for a js that allowed the visitor to either mouse over click on a colour palette bitmap to select a colour and have the tiles change to that colour but I couldn't find a simple one I could use so I ended up using swap bitmaps. Works but limiting.

HERE

Looks very useful in such situations, Egg!