Welcome to TalkGraphics.com
Page 1 of 2 12 LastLast
Results 1 to 10 of 18
  1. #1

    Default 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:

    Click image for larger version. 

Name:	2.jpg 
Views:	159 
Size:	52.7 KB 
ID:	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

  2. #2
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    22,090

    Default Re: Menu with mouse up

    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
    Attached Files Attached Files
    Last edited by Egg Bramhill; 21 February 2024 at 05:06 AM.
    Egg

    Minis Forum UM780XTX AMD Ryzen7 7840HS with AMD Radeon 780M Graphics + 32 GB Ram + MSI Optix Mag321 Curv monitor
    + 1Tb SSD + 232 GB SSD + 250 GB SSD portable drive + ISP = BT + Web Hosting = TSO Host

  3. #3
    Join Date
    Aug 2000
    Location
    Placitas, New Mexico, USA
    Posts
    41,650

    Default Re: Menu with mouse up

    I've moved this thread to Web Design Chat.

  4. #4
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    18,448

    Default Re: Menu with mouse up

    Quote Originally Posted by Egg Bramhill View Post
    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
    Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
    When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat

  5. #5
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    22,090

    Default Re: Menu with mouse up

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

    Minis Forum UM780XTX AMD Ryzen7 7840HS with AMD Radeon 780M Graphics + 32 GB Ram + MSI Optix Mag321 Curv monitor
    + 1Tb SSD + 232 GB SSD + 250 GB SSD portable drive + ISP = BT + Web Hosting = TSO Host

  6. #6
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    18,448

    Default Re: Menu with mouse up

    Quote Originally Posted by Egg Bramhill View Post
    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
    Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
    When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat

  7. #7

    Default Re: Menu with mouse up

    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

  8. #8
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    22,090

    Default Re: Menu with mouse up

    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

    Attached Thumbnails Attached Thumbnails Click image for larger version. 

Name:	export.png 
Views:	142 
Size:	57.0 KB 
ID:	134610  
    Last edited by Acorn; 22 February 2024 at 02:46 PM. Reason: Corrected to setnewimage(3) atc
    Egg

    Minis Forum UM780XTX AMD Ryzen7 7840HS with AMD Radeon 780M Graphics + 32 GB Ram + MSI Optix Mag321 Curv monitor
    + 1Tb SSD + 232 GB SSD + 250 GB SSD portable drive + ISP = BT + Web Hosting = TSO Host

  9. #9
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    18,448

    Default Re: Menu with mouse up

    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
    Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
    When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat

  10. #10
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    22,090

    Default Re: Menu with mouse up

    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


    Attached Files Attached Files
    Last edited by Egg Bramhill; 23 February 2024 at 02:37 AM.
    Egg

    Minis Forum UM780XTX AMD Ryzen7 7840HS with AMD Radeon 780M Graphics + 32 GB Ram + MSI Optix Mag321 Curv monitor
    + 1Tb SSD + 232 GB SSD + 250 GB SSD portable drive + ISP = BT + Web Hosting = TSO Host

 

 

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •