I am designing a simple virtual tour of the new library where I work. I want to add “elevator buttons” that can be clicked on to take viewers from the lobby to their choice of the three floors. It’s the simplest thing in the world to design: just a circle with a number in it, takes 5 seconds in MS Publisher or Word, etc… However, MS Frontpage 2000 (which is the only editor available to me) doesn’t have a “draw shape” feature that I’ve found, it’s impossible to layer drawings, and most cropping devices will only let me do straight lines.
Any ideas how I can save a round graphic AS a round graphic (preferably JPEG)?
Another thought I’ve had is to save the “elevator buttons” as a rectangle with all three numbers and do an “area hyperlink”, but I’m not sure how to do this. I’ve seen it on other pages, but do you know the terms that will allow you to make just a particular area of a graphic the hyperlink?
Thanks for any info.
(MS Frontpage will allow you to write directly in html if that helps in any way.)
I believe the only way to do something like that is to save it with transparency. I don’t think .jpg supports transparency, but .gif does. Gifs are usually better for this type of thing because they’re smaller as well.
As far as the “area hyperlink,” what you’re looking for is an “image map.” I’n Frontpage (I have XP, so it may not work on 2000), there are three bittons on the toolbar to let you add “hot spots” which link different parts of the image to different things.
Web sites are platform-independent. And it makes no difference that different sysytems using different browsers render web colors differently. The fact remains the rendering is consistent for a web page for any one system/browser.
FrontPage is not a graphics tool. It is a web editor.
Graphic images are rectangles. Even the smiles you see here are rectangles. Just make your image as intended, but with the the area outside the circle the same as the page background.
I do have to second (or third) the use of transparency for a round image. The GIF file format works with transparency, but also can only use 256 colors, so if you have any sort of color grading or photorealism in your buttons, it’s not useful. However, there is hope. Most image editing programs, and all current web browsers support the .PNG format, which is a high color, (16.7 million+), compressable format that supports transparency.
Yes, it is, but background color in an IMAGE is constant, while the background might be rendered differently. Thus, something that matches the background on a PC might not match the background on a Macintosh. (they use different color palettes) This can be easily avoided, of course, provided that the color you choose is one of the established ‘web colors.’ (photoshop and some others have the option to select ‘web colors only’ when accessing the color palette).
I’m not entirely sure what you’re getting at, Duckster. Different platforms can not be guaranteed to match background colors with images, especially when you’re dealing with systems using 8-bit color.
It sounds like all of you are talking in 1996 terms!
Go with a GIF which uses simple transparency, or with a PNG which uses alpha transparency. JPG doesn’t have any option for transparency.
On the other hand, if you go for imagemaps, where you can use a JPG if you wish, the basic concept is -
Create your buttons image, and include the tag of ISMAP and USEMAP= with a unique name:
<IMG SRC=“button.jpg” WIDTH=200 HEIGHT=150 USEMAP="#buttons" ISMAP ALT="" BORDER=0>
Then elsewhere on the page create your Map coordinates. There are different shapes you can use, but for a circular shape use this:
<MAP NAME=“buttons”>
<AREA SHAPE=“CIRCLE” COORDS=“100,50,30” HREF=“circle.htm”>
</MAP>
The coordinates represent pixel distance from the origin (the upper left corner of the button.jpg image) 100 x, 50 y, and the radius of the circle, 30 pixels.
You can add more AREA tags depending on how many different buttons on the single image you want to have.
If your background color has the same specified hexadecimal, RGB, CMYK or whatever color your using as the outside of your picture, of course they are going to display the same on each individual monitor. It might not be what the creator saw on his monitor but if the numbers are the same the deviation will be the same and you won’t see a difference.
I’ve never seen otherwise anyway, if you can show me i’ll gladly shutup.
Some browsers have limited color pallettes that may not properly display certain colors. (Older versions of Netscape are a particularly egregious offender.) Usually the actual color rendered is a best-match from the available pallette. If the image needs to be down-rendered to a lower bit-depth, there is no guarantee that the image’s colors will match the background colors. There’s a good discussion of this feature here.
Of course, it’s all really moot, since the best strategy is to use transparent GIFs in the first place.
Another reason for using transparency is to avoid maintaining the same information in two places, whether you are assured that the colors will match on the browser screen or not. If you match the background with the graphic color, when you decide to change the background, you’ve got to change the graphic. Or, if you have 50 such graphics, you have to change 50 of them. Or, suppose you decide to start displaying them on a textured background. In general, you should be displeased any time anything has to be maintained in two places which must be manually kept in sync with each other. There are sometimes good reasons for it, but you should find it distasteful.
No, color rendering is NOT consistent. Theoretically it is, practically it isn’t. Make a few images, just simple rectangles all the same color. Save one as a gif, one as a png, and one as jpg. Now place them together on one html page with the same background color as you used in the images. View this page with a variety of browsers, and you will see that they don’t all match.
This is why I am very careful to use the same image type on the page when colors must match.
ACK.
Even better trick:
Start out with an image twice as big as you need it. Set the background to match the background color on your page. Scale the image down to the proper size. Now, do “Select by Color” in your graphics program - with the tolerance set to zero. Click on the background area. This will select the background, but leave a small, color blended rim around your actual object. Set the selected are to transparent. Convert from rgb to indexed color and save the image as a gif (or png.) This image will display on your site without having jagged edges like you will often see - the smilies here are a good example of images the have the jaggies.
Yup. And if you’re concerned about your site looking good no matter who visits it, you don’t use transparency with a high color png. The versions of IE that I am familiar with screw up the alpha blending. You either get jaggies (simple transparency) or you get some screwed up color in the blended area between full color and full transparent.
Also remember, not everyone is using the most current browser. I know a good many people who still use Windows 98 and the version of IE that came with it. I also know that a good many of my customers use Win 98 or Win 2000 - and the original IE that was installed when the systems were installed. Those folks won’t be too terribly impressed with alpha blended png because IE on those machines will totally screw your images.
The 216-color web palette is effectively dead. The “standard” is around eight years old (notice the copyright on the link you provided). Since then, the industry has moved away from the limited 8-bit colors. At the same time, browsers have evolved to accommodate the hardware advances.
While some web designers may stick to the 216-color palette for those using older browsers, web sites often check their web stats to see if such support is justified.
As has been mentioned earlier, as long as you create the image with the same tool as you create the background color of the entire site, any color shifts among the different systems/browsers will remain constant.
Just weighing in on the issue of color consistency.
Recently, i was putting together some images for a webpage. I had set the background color of the webpage at #CCCC99, which is a rather pleasant green.
I then picked some small images for use on the site and resized them in Photoshop. Because i couldn’t be bothered rendering them as transparent gifs, i decided that i would just recolor the image backgrounds to the same color as the webpage (#CCCC99), which should theoretically give me the same result as a transparent gif.
When i inserted these images into my webpage, however, and opened it using IE6, i found that CCCC99 as rendered by the browser was slightly different than CCCC99 as rendered by Photoshop, so i could see the square outline of the gif and it didn’t look transparent.
I’m not sure why this happens, or if it can be fixed, but if my experience is any indication, then a transparent gif is the best way to guarantee that your odd-shaped graphics blend properly with the background.
IE6 was simply rendering an image that i had created in Photoshop.
But the CCCC99 background created by IE6 for the webpage appeared slightly different than the CCCC99 background of the picture that Photoshop had created. The difference wasn’t huge, but was significant enough to be noticeable.