[web] Small Imaging Problem :(
Hi guys,
I have a page. The only thing on this page is a background image. All the content of the page has been drawn into this background image *including* the buttons for navigating from section to section.
1.)Is it possible to use image maps on these buttons in the background image?
People are telling me it is not.
2.) If it really is impossible, is there a close alternative? How do i do this?
3.) Failing to get 1.) or 2.) to work, I would just use small foreground button images on top of the background image and image map those instead.
in which case, any there any pitfalls to doing it this way?
PS: please forgive me for not posting the URL. I would really love for 1.) to work. if not then 2.). If not then i guess i'll ahve to do foreground image buttons plus image mapping.
Thank you very much for your help.
Your site is poorly designed if the main navigation is part of the background image ;) However, if you really must do things this way, you might check out A List Apart's Night of the Image Map article inwhich invisible anchors are used to simulate image maps. Or your could just position a huge transparent gif over your background image and apply a traditional image map that way..
[Edited by - Fuzztrek on May 16, 2005 11:12:35 AM]
[Edited by - Fuzztrek on May 16, 2005 11:12:35 AM]
The 'night of the image map' one requires CSS and Xhtml to work, both of which I am unfamiliar with.
So,...
Quote:
Or your could just position a huge transparent gif over your background image and apply a traditional image map that way..
How do I go about this then? Transparent gif? how do i make one?
And are there any pitfalls to doing things this way.
All you need is a very small transparent gif stretched to the size of your background image. Then you can apply an image map to this transparent gif to make the buttons selectable.
Or you could just remove the background image and place it on the page as a regular image, or better yet slice up everything in an image editor and build a page correctly ;)
The pitfalls to your method include poor indexing by search engines such as Google, poor usability by users, poor scalability, etc.
Or you could just remove the background image and place it on the page as a regular image, or better yet slice up everything in an image editor and build a page correctly ;)
The pitfalls to your method include poor indexing by search engines such as Google, poor usability by users, poor scalability, etc.
I am using macromedia firefox for my images. I have done this:
file -> new-> transparent image.
In fireworks, it seems transparent.
So in my code, I load the background and then the transparent PNG on top of it. But when I load the page under IE, it seems that the transparent PNG has become solid and is covering my background.
It does the same thing when i use a GIF instead :( help!
Any idea what this is? or how i can fix this? or what i should do instead?
Make sure the image is actually transparent. A purely transparent gif and png should show up equally transparent in every browser. In Photoshop, a transparent image appears as a grey and white checkerboard pattern. I'm not sure what it looks like in Fireworks, though. Also make sure the url to the image is correct, and that when you are viewing the page you don't have the image highlighted or selected. If you highlight or select even a transparent image, IE will cover it with the text selection color.
Weird.
In firefox, my transparent image is also just a checkered board.
But when i load it in Internet Explorer over my background image, it still coveres it up. When i open my transparent gif or png in MSpaint, it shows up as a white blank sheet like the "untitled.bmp" ones are.
I am using the right url. I have not clicked or highlighted the pic.
Could there be something else i may be doing wrong?
Quote:Original post by Kylotan
I don't believe IE handles transparent PNGs properly.
A transparent 8-bit PNG should behave in the same way as a GIF. IE has problems with the alpha channel and variable levels of opacity, though, which they say will be fixed in IE7.
Quote:I am using the right url. I have not clicked or highlighted the pic.I can't think of anything else... perhaps you could link your transparent image here so I could take a look?
Could there be something else i may be doing wrong?
This topic is closed to new replies.
Advertisement
Popular Topics
Advertisement