/    Sign up×
Community /Pin to ProfileBookmark

Image-Mapping Suggestions

Copy linkTweet thisAlerts:
Aug 11.2008

Hi guys,

I am developing a website for my school to implement their locker system online. So basically people would buy lockers online.

I need ya guys suggestions in the following task:

Availability of lockers. So, basically i am not sure how do i implement the locker availability indication so that people could choose their own locker depending which one’s available.

So, i thought of something like indications on the map of all lockers of which onez available and as soon as payment goes through, that indication dissappears. Any suggestions on how to go about this or any other suggestions for this task?

to post a comment
Full-stack Developer

2 Comments(s) ↴

Copy linkTweet thisAlerts:
@scragarAug 11.2008 — hmn, you could store the locker co-ords on a map to a DB with a quick flag for taken/not taken, then 1 of 2 images(for taken/not taken) to the right location on the map based on the flag, the 2 ways I see this as being achiveable and completely compatable are:
[list=1]
  • [*]a simple bit of PHP GD to add said images to the map, then a HTML imagemap to set the links.

    -- Advantages: minimal load, no complaints of things not matching up.

    -- Disadvantages: increase in server load, server needs more RAM to handle the image library.


  • [*]You make your 2 images in 2 files, then in your HTML do the positioning on the map using position: absolute;
    margin-top: ...
    margin-left: ...     - Oh, and the images will have to be in a link to where-ever you want

    -- Advantages: don't need PHP.

    -- Disadvantages: gonna be a fair bit of HTML

    • [/list]


    the 3rd, which I do not recommend, is to use a few javascript functions to achieve this effect, but then a user turning javascript off will not get a very nice experience.
    Copy linkTweet thisAlerts:
    @ray326Aug 11.2008 — Describe or upload an image of what you envision as your "locker map".
    ×

    Success!

    Help @wick3dsunny spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 — BETA 5.17,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @AriseFacilitySolutions09,
    tipped: article
    amount: 1000 SATS,

    tipper: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,
    )...