I am in need of an icon for representing an elevation display, i.e. I have a label containing an elevation in metres, and I need a small (22x22 pixel) icon next to it to indicate thats what it is.
I have tried some things, like a vertical arrow, but none quite look right.
Anyone got any ideas?
I know this isn't strictly a programming question, but it is about a user interface, and therefore software related (i think).
Cheers
Edit:
In the end I went for this icon:
It represents it pretty well.
Something like this : (http://www.waymarking.com/images/cat_icons/elevationSigns.gif)
actually 24x24
look at this
alt text http://www.vectorportal.com/symbols/img/opengutter.gif
alt text http://t1.gstatic.com/images?q=tbn:7DqRw9FL5c9IfM%3Ahttp://media.peeron.com/ldraw/images/19/3044b.png
alt text http://t3.gstatic.com/images?q=tbn:jfs_Abjx3BnXEM:http://media.peeron.com/ldraw/images/272/50746.pngalt text http://t3.gstatic.com/images?q=tbn:L8injTgVVHLlIM%3Ahttp://media.peeron.com/ldraw/images/27/61409.png
alt text http://t1.gstatic.com/images?q=tbn:WXHlgHgon09alM:http://upload.wikimedia.org/wikipedia/commons/thumb/1/1f/Japanese_Road_sign_(Descent).svg/470px-Japanese_Road_sign_(Descent).svg.png
See also http://mutcd.fhwa.dot.gov/services/publications/fhwaop02084/index.htm
Don't forget about copyrighted © images
Create an icon form templates using axialis icon workshop. It is really convenient to use. As I remember there was a template. If no you can ealily import a image and edit or draw a one.
I don't think that's a sensible use of an icon; they're OK as visual cues to find something quickly once you've learned to recognize one, but as you have noticed, they suck at conveying actual information. Abbreviated text ("El.") would be more useful if you really lack the space for a full-length text label.
If it's for a plane:
alt text http://www.pekkagaiser.de/stuff/Plane.gif
Would need some re-working to look good on 22x22, though.
Plane stolen from here.
bullet_arrow_top from here any good:
http://www.famfamfam.com/lab/icons/silk/previews/index_abc.png
Download the set here:
http://www.famfamfam.com/lab/icons/silk/
Related
I'm using the code found here to create my text links located on this page. What I am trying to accomplish is having the rollover text be the description of the link ie: 'Insight' goes to the 'About' page. Some of descriptions are too long and are getting cut off and when I try to make them bigger they just overlap the link next to it. Any suggestions on how to fix it or a better method I should be using? Here is the HTML I'm using.
<span data-title="Services">Ingenuity.</span>
Sounds like you're asking for design advice as well.
Judging by the way you have your links presented (each list item with an equal fixed width in a row), a longer description will certainly overlap other links if you do end up finding a solution to make them not "cut off" (it exists, but I'm just not sure if it'll give you a desired result that you're looking for).
Either customize the widths of each list item so they don't overlap, or use some other cool transition (i.e. have the description slide down under the link rather than flip it). That's what I would suggest personally; however, it's up to you to choose what's considered a "better method" of displaying your descriptions.
I am really hoping someone can help me. I am trying to create a round menubar in CSS and I've searched and searched for solutions but have found nothing. I know how to create round areas (by setting the radius), and I know how to create a simple straight line menu using <ul> & <li> but, as said, I want to create a round one.
there is a picture of something alike what I'd love to get working:
If anyone could help me on this I'd be so thoroughly grateful.
Closest things I know of are these:
http://www.cssplay.co.uk/menus/cssplay-round-and-round.html
http://codepen.io/tgrant54/pen/lBHwK
Is that what you're after?
This menu looks almost like Path's Button.
You can find the link to Path's Button here.
You just need to modify it a bit so the menu displayed in full sphere.
This isn't something you really want to be doing in pure CSS.
You may be able to make circle shapes with border-radius, but you're not actually making a circular object -- it's still a regular box shape as far as the browser is concerned, just with the corners rounded off. This has absolutely no bearing at all on your ability to do anything else to do with circles or curves in CSS.
Yes, it's possible to do something along the lines you're after, by putting every character into its own element, and styling each of them with a specific position, but that's going to be painful, inflexible, and difficult to work with. If you really want to do this, there's a code generator you could try out here, but I'd say you're barking up the wrong tree.
If you want to do this kind of thing properly, what you really need to be thinking about is doing it in graphical format, using either Canvas or SVG, plus plenty of javascript code.
I'd suggest looking into a JS library like Raphael for this; there are people who have tried similar things already using Raphael, which may help you -- see here, for example: Radial Pie Menu With Raphael JS
Hope that helps.
We are desperate to convert an image so that it can be used as an image map. Everything I have tried, really doesnt cut the mustard. I havent the experience to work at very high resolutions.. plus I dont know the terminology and neither have the skills or resources to invest in learning how to do this, knowing many others on here and the internet have far greater experience.
I have downloaded and played with Inkscape, but really am going round in circles...
So thought I would ask here.
What I am after is similar to Raphael Australia Map or David Lynchs, http://davidlynch.org/js/maphilight/docs/demo_usa.html
No frills, no effects, just change the state color of the map on hover and retain that event on click.
Here is what we have ...
What we have is a MAP like this.
We lost the original file, which was pure gray. I have this left :(
Anyway, we want it so that each state ( including the territory ACT ) not indicated on the above map, represented in pink #ec008c . On hover
Map needs to be FLAWLESS !! Also require that any imagery must be png and transparent bg.
Must remain exact size as above. Must be extremely accurate on svg coordinates, and optionally would like the STATE text to appear , like the QLD is shown on the image above, but not wholly necessary.
Can anyone point me in the right direction please.
Have you tried Path > Trace Bitmap in Inkscape? If you play with the settings you should be able to get a decent vectorised image.
Vectorised:
EPS:
http://dl.dropbox.com/u/13402937/Australia.eps
Adobe Illustrator:
http://dl.dropbox.com/u/13402937/Australia.ai
try to use this tool, its the potrace part to trace pixelpictures in inkscape with many features. potrace traces pictures from commandline
I have obtained extraordinary results with https://vectormagic.com/ , which can be tried online.
<img src="young-girl-in-red-gown.jpg"
alt="young girl in red gown"
title="Young girl in red gown"/>
Is my above example a good example? Should it be always like this?
In above example I used a file name, alt text and title text that are almost the same.
Is it ok to use same text for alt and title even if it's not a link, or can this repetition can create problems for screen reader? (I'm repeating the text because FireFox doesn't show alt as a tooltip, and the client wants a tooltip.)
Should we use title with image if the image is not in a link?
Should alt and title be different always?
Do screen readers speak all these attributes for images?
Image file name
alt text
title text
Should I always use a descriptive image file name?
I use the Jaws screen reader and having both alt and title set isn't an issue. Jaws reads the alt tag by default if present and ignores the title unless specifically told to read it. I can't say what other screen readers do though.
No idea about screen reader users, but it bugs the heck out of me.
I doubt search engines care.
See:
The Importance of Images On Your Site
ALT vs. TITLE
The alt and title attribute are there for different things, they are not the same, they won't irritate anything, they are made to make things much more clear to both humans as well as search engines.
Using alt tag is good for standard-compliant, validated html and it is also equally respected by search engines.
I dont think that this should cause a problem unless you are stuffing keywords into that to increase keyword density on the pages. otherwise it is alright to have it the way your client wants.
It used to be that alt was how you created mouseover tooltips over images. Luckily, with the advent of title, this is not really needed.
If you wish to provide such a tooltip today, over either a text link or an image, title is the thing to use.
alt is what you use to make your images "visible" as text to browser technology that doesn't actually support images (such as screen readers, or text-based browsers). Thus, it doesn't have any meaning in the context of text links - since text in those is already, well, text.
Search engines' algorithms are a bit of mystery. If I had to guess, I would say that for web searches, there is so much signals available through text links, that there is no need to rely on titles and alts. Image search may be a different story. It's much harder to get information about what's contained in a picture and correlate it to textual keywords. Therefore, these attributes may be given more weight in that context.
For example:
<img alt="Facebook logo" src="http://facebook.com/images/facebook-logo.gif" title="Link to home page"/>
Which has more importance for Search engine, Alt text or image file name or title or all?
In general, the three most important things for image SEO are:
Image filename. Make it descriptive, i.e. "TabbyCat.jpg" or "tabby-cat.jpg" rather than "DSC0001.jpg".
Alt text. This should generally describe the image in a short phrase or sentence, e.g. "a picture of my cat, Tabby." Think of it like you were telling someone who can't see the image.
Text surrounding the image. This seems to be pretty important. The text that's close to the image would generally reference it in some way (e.g. in the same paragraph, or a caption under the image).
The title text is generally only important for links - it shows a tooltip to users when they hover the mouse over it. For images, you would rarely need that since it's either obvious what the image is or the text around it describes it fine. However sometimes you may want a little more info for users that attempt to look for it (various web comics put a little joke or addendum in the title text).
Finally, remember this: do what's best for users, not search engines.
Might be of interests: http://www.seroundtable.com/archives/007366.html.
Also there are tons of google results relevant.
In my experience, I would say both are important, and I tend to use CamelCase to name images.