replace text with image.......

[Ben Rogers]

On my site (http://projep.t35.com) i wanna have it so the header is text, but then once the image loads up, it replaces the text...

sum of u r fricking geniuses bout dis so... maybe you'll have a solution i'm hoping.

[Jona]

JavaScript would be the only way I'd see doing this possible... Not CSS.

By the way, have you designed your site for other browsers, excluding IE?

[J]ona

[Ben Rogers]

sure, it doesn't look the best but it looks pretty much the same. i no sum elements go off the page at lower resolutions but they do on every site, so... yeah.

and to answer your question more clearly my site is ie compatible

[Ben Rogers]

and also i saw some thing on csszengarden, i forget where it was tho... :-\. anyways... could you give me the basics of the js solution? ii think i no wut ur thinking but i thot u could only apply onload to the bosy attribute.

[Jona]

You can, but that's just it. Preload the image, then onload, run a function to replace the SPAN node containing the text with an IMG node containing the preloaded image.

[J]ona

[Jona]

Originally posted by omega
sure, it doesn't look the best but it looks pretty much the same. i no sum elements go off the page at lower resolutions but they do on every site, so... yeah.

Your site doesn't seem to work very well in Mozilla FireBird on an 800x600 screen resolution... :rolleyes:

[J]ona

[Ben Rogers]

well how many ppl have mozilla firebird, and a 800/600 res?

the only browsers i have are ie6 and mozilla

[Jona]

As far as I know, most people using Internet Explorer, but more and more often have I found that people use Mozilla FireBird (not Mozilla). Which is kind of ironic, you'd think they'd use either Mozilla or IE, but not Moz FireBird. And the most common screen resolution is 800x600, as far as I remember.

[J]ona

[Ben Rogers]

well like i said my page looks the same just you have to scroll a bit sideways on 800*600... :-\ could u get a scrnshot of wut it looks like with moz fb?

[Jona]

Originally posted by omega
well like i said my page looks the same just you have to scroll a bit sideways on 800*600... :-\ could u get a scrnshot of wut it looks like with moz fb?

The horizontal scrolling isn't the biggest problem--your objects simply overlap each other. Attached is a screen shot...

[J]ona

[Jona]

I think I've come to realize just what you really are asking for. Here is an article that explains how to using a background image in the place of text (http://www.stopdesign.com/also/articles/replace_text/).

[J]ona

[Ben Rogers]

that is really bad. could you tell me, me being a dunce, how i could fix it in that browser and have it look good in others? its prob a thing with percentages, but i dont wanna go back to pixels, i want thelayout to stay fluid.... ull c wut i mean if u use mozilla or ie. dunno about ns.

[spufi]

Originally posted by Jona
As far as I know, most people using Internet Explorer, but more and more often have I found that people use Mozilla FireBird (not Mozilla). Which is kind of ironic, you'd think they'd use either Mozilla or IE, but not Moz FireBird. And the most common screen resolution is 800x600, as far as I remember.

[J]ona

On a couple of stat sites I check, 800X600 is the secnd most used and 1024X768, or whatever it is, is around 50% usage.

[Ben Rogers]

ah ok... thats... anyways. i just decided to do a text-indent: -1000em for the pic thing so that pplz without CSS would still see the text

[spufi]

If you link to your CSS via the import statement, then old browsers will ignore the CSS and show the text by default.

[Ben Rogers]

ok.. that was random... especially since i think it was u who advised me to use the link rel method.