Sign in to follow this  

[web] Small Imaging Problem :(

This topic is 4594 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

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.

Share this post


Link to post
Share on other sites
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]

Share this post


Link to post
Share on other sites



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.



Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites




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?

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites




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?

Share this post


Link to post
Share on other sites
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.
Could there be something else i may be doing wrong?
I can't think of anything else... perhaps you could link your transparent image here so I could take a look?

Share this post


Link to post
Share on other sites

This topic is 4594 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this