I’m starting work with a site for any musician friend and included in the design (yet that they are approved) plan to have a keyboard managing down one facet. I would want to have, on the particular white keys, links like " Discography, " Videos" and so on.
I thought in relation to image mapping but it looks very much time winded in CSS (I’m keeping away from DreamWeaver where it’s very easy and trying to undertake web coding " properly" ).
Another option is usually to have the keyboard image as being a background and placement text over them using css. I recently have concerns which dependant on cell phone browser window size this text and keyboard image may be out of position.
What is the experienced developers approach to the best approach
Gives thanks, Lol
I’m keen the background considering the text over that idea….
mainly because links would end up being real text, certainly not graphic images.
That is certainly good for SEARCH ENGINE OPTIMISATION and Accessibility (for display screen readers).
You might also need another advantage… the particular links (words) demonstrating can
be dynamically changed based on which page is actually opened, and
whom the viewer is actually.
I guess you could show us the actual keyboard image you could use,
and we could figure-out a browser compatible method to make it work
.
Formerly suffering with tinnitus messing with this idea with the last few several weeks, and I’ve noticed it cut down a lot on time and resource. It’s known as sprites. Basically, what one does is you create one graphic of which combines both a person’s " on" and also " off" consequences (in your instance, the way you style the text for the keys). This is the background. When the particular mouse is hovered, the particular background position improvements. So in the truth of your piano menu, you’d actually possess two columns associated with keys (assuming you could use a left-side list, which is what you’d want to do to make the particular text legible). The left column can be your " off", and the right column can be your " on".
You can add text into the links you use how you normally would, except that you’d probably add a course attribute and placement the span somewhere off of the screen (usually utilizing the text-indent property. ) To ensure that solves your SEO and your accessibility issues as well, and you implement whatever font you wish.
The disadvantage in this approach is always that it requires some rather funky business to pull everthing off. When this works, it’s sleek as crunchy peanut butter, but it’s tough to pull off.
You don’t want any section of image mapping in CSS if you’re able to avoid it. It’s an utter bugger. I’ve accomplished it exactly as soon as… never, EVER for a second time.
I did not remember about sprites… that’s another preference.
And the part about layouts and accessibility… using alt and also title properties within the src tag
can satisfy the " readable" section of a graphic website. But if you have sprites, they sort of become
a hybrid sort of thing – a combination of graphics in addition to CSS.
Thanks with the replies. I’m seeing the particular guy tomorrow all of which put the keyboard notion to him. Once I have taken the photo of the keys I’ll start out building the page – and that’s where the help from you males starts; -) I can say it’s happen to be tremendously satisfying so far creating stuff in Notepad++ however the ideas I have because of this site may be the same as climbing Everest in sandals for any css newbie for instance me!
Give thought to having two images with the keyboard – one considering the keys untouched, then one with a essential depressed as in the event being played. The second one would be your active image for any links – you’d have to sync it ” up ” visually by CSS positioning but it would an awesome influence…
And congrats on having Notepad++ – you’ve made a fantastic beginning, and providing they are really sturdy sandals, you have to be fine!
Thanks with the encouragement!
Avoid, depressed key can be an option, another for you to pass to my own " client" (friend).
Gives thanks, Lol.