WordPress.org

Ready to get started?Download WordPress

Forums

Image pop up question with image mapping (4 posts)

  1. esander4
    Member
    Posted 1 year ago #

    On my menubar on the site, there is a logo of a map that pinpoints the exact locations of each of the SouthEastern Conference teams. What I would like is, upon someone entering the homepage (and ONLY the homepage!), the map expands outwards from the logo into a pop up, asking "What team would you like to shop for?" As the user moves their mouse over one of the points on the map, a logo of the respective team pops up (kind of like how on Google Maps where it pinpoints the location you're searching for, and if you hover over the flagged point on the map, more information pops up). Then the user can click on that point on the map to go to the team's website. If the user clicks out of the pop up, rather than the window just closing i would like the image to just shrink back into the logo.

    Obviously I can achieve making the points clickable to different website locations using image mapping, but where would I start to code for the other parts I described? I'm almost about to just pay someone to do this for me because I can't find any resources online.

    My site is SEC Gear

  2. linux4me2
    Member
    Posted 1 year ago #

    JQuery is a javascript library which comes with WordPress and will accomplish what you want, though it's going to take a little trial-and-error to get there.

    You may need to add some features or plug-ins to JQuery that aren't included in the basic JQuery that's included in WordPress, though, which means over-riding the WordPress version of JQuery.

    If you're referring to the icon in your logo, I'd recommend relocating it and separating it from the main logo for your site, which links to your home page. It would be a good idea to keep that functionality.

  3. esander4
    Member
    Posted 1 year ago #

    Thanks for the advice @linux4me2

    For anyone who cares, it got done. Check it out and tell me what you think.

  4. linux4me2
    Member
    Posted 1 year ago #

    Very nice!

    For user-friendliness, I can make a few suggestions, but they're only suggestions.

    I would split your logo out so that clicking your logo would take the user to the home page, and make only the conference map the link to the pop-up. People expect to be able to click the logo to get the home page, and I think it will frustrate such users to have the pop-up appear instead.

    Consider using the click event instead of the mouseenter event to trigger displaying the pop-up from the conference map, then add a title attribute to the link that tells users what it does; e.g., "Click to select the team to shop for."

    I would add a little "close" icon and link in the bottom-right corner of the conference pop-up for those who don't realize clicking the pop-up will close it.

    Very nice work!

Topic Closed

This topic has been closed to new replies.

About this Topic