Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 7 of 7
  1. #1
    Senior Member
    Join Date
    Feb 2011
    Location
    England
    Posts
    103
    Member #
    26718
    Liked
    3 times
    I'm starting work on a site for a musician friend and as part of the design (yet to be approved) plan to have a keyboard running down one side. I would like to have, on the white keys, links such as "Discography, "Videos" etc.
    I thought about image mapping but it looks very long winded in CSS (I'm keeping away from DreamWeaver where it's very easy and trying to do web coding "properly").
    Another option would be to have the keyboard image as a background and position text over it using css. I just have concerns that dependant on browser window size the text and keyboard image may be out of alignment.

    What's the experienced developers view on the best approach?

    Thanks, Lol

  2.  

  3. #2
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,748
    Member #
    5580
    Liked
    720 times
    I like the background with the text over it idea ....
    mainly because the links would be real text, not graphic images.
    That's good for SEO and Accessibility (for screen readers).

    You also have another advantage ... the links (words) showing can
    be dynamically changed depending on which page is opened, and
    who the viewer is.

    I guess you could show us the keyboard image you might use,
    and we can figure-out a browser compatible method to make it work?


    .


  4. #3
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    I've been messing with this idea for the last few months, and I've seen it cut down quite a bit on time and resource. It's called sprites. Basically, what you do is you create one graphic that combines both your "on" and "off" effects (in your case, the way you style the text on the keys). This is your background. When the mouse is hovered, the background position changes. So in the case of your piano menu, you'd actually have two columns of keys (assuming you are going to use a left-side menu, which is what you'd have to do to make the text legible). The left column would be your "off", and the right column would be your "on".

    You can add text to the links you use the way you normally would, except that you'd add a span attribute and position the span somewhere off of the screen (usually by using the text-indent property.) So that solves your SEO and your accessibility issues as well, and you can use whatever font you want.

    The downside to this approach is that it requires some rather funky math to pull it all off. When it works, it's smooth as crunchy peanut butter, but it's tough to pull off.

    You don't want any part of image mapping in CSS if you can avoid it. It's an absolute bugger. I've done it exactly once...never, EVER again.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  5. #4
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,748
    Member #
    5580
    Liked
    720 times
    I forgot about sprites ... that's another good option.
    And the part about graphics and accessibility ... using alt and title properties in the src tag
    will satisfy the "readable" part of a graphic link. But if you use sprites, they sort of become
    a hybrid type of thing - a mix of graphics and CSS.


  6. #5
    Senior Member
    Join Date
    Feb 2011
    Location
    England
    Posts
    103
    Member #
    26718
    Liked
    3 times
    Thanks for the replies. I'm seeing the guy tomorrow and will put the keyboard idea to him. Once I have taken the photo of the keys I'll start building the page - and that's where the help from you guys starts ;-) I have to say it's been tremendously satisfying so far creating stuff in Notepad++ although the ideas I have for this site may be akin to climbing Everest in sandals for a css newbie like me!

  7. #6
    WDF Staff AlphaMare's Avatar
    Join Date
    Oct 2009
    Location
    Montreal, Canada
    Posts
    4,570
    Member #
    20277
    Liked
    878 times
    Think about having two images for the keyboard - one with the keys untouched, and one with a key depressed as if being played. The second one would be your active image for the links - you'd have to sync it up visually by CSS positioning but it would be an awesome effect...

    And congrats on the use of Notepad++ - you've made a great beginning, and as long as they are very sturdy sandals, you should be fine!

    Good design should never say "Look at me!"
    It should say "Look at this." ~ David Craib


    http://digitalinsite.ca ~ my current site . . info@digitalinsite.ca ~ my email

    If you feel that someone's post helped you fix your problem, answered your question, or just made you feel better, feel free to "Like" their post. The "Like" link is at the bottom right of each post, along side the "reply" link. And if you are being helped here, try to help someone else - pass it on!

  8. #7
    Senior Member
    Join Date
    Feb 2011
    Location
    England
    Posts
    103
    Member #
    26718
    Liked
    3 times
    Thanks for the encouragement!
    Yeah, depressed key is an option, another to pass to my "client" (friend).

    Thanks, Lol


Remove Ads

Posting Permissions

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

Search tags for this page

any alternatives t0 image mapping html

,

image mapping alternatives

Click on a term to search for related topics.
All times are GMT -6. The time now is 04:44 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2020 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com