I am working on new site, the top navigation clickable items will be imagegen text. They will be one colour. What i want to do is on hover have same text different colour. Using non standard font so must be image gen.
Realized after posting the question that it was not complete doh! And agree with your point think we need new forum for now too's and many thanks for the answer exactly what i need.
I don't think using imagegen for hovering images is correct way to go. There will be a noticable delay. Just use sIFR for using exotic fonts or fixed images. Menu items do not change that often.
Since the images created by ImageGen are cached after the first hit the performance will be basically the same as reading a file straight from disk (which is what ImageGen does with it's cached files). Since the images don't change the brower will just get a 304 not modified response and not send the file down again.
And the forthcoming ImageGen Professional v3 will allow for setting an expiration date so once the images are cached on the visitors browser there won't even be a request to ImageGen after that. I think that's pretty cool.
I'd strongly recommend cufon over sifr every time for custom fonts. The consensus seems to be that sifr = "thanks for getting us here", but it's now a bit old, a bit stagnant, a bit fat and a bit reliant on flash.
Sifr is quicker to set up and use, respects more css properties and usually renders as the page loads, not up two 2 seconds after (as is often the case on sifr-heavy sites).
The benefit of using these over imagegen for custom fonts is that the text still lives on the page, indexable and readable from screen readers etc.
Sifr is quicker to set up and use, respects more css properties and usually renders as the page loads, not up two 2 seconds after (as is often the case on sifr-heavy sites).
For what it's worth... I try not to use stylized text in navigation for the same reasons I don't in body text. If I have to I've used custom images (css sprite), sIFR, and ImageGen with success, even for screen readers. Haven't had a chance to use cufon yet but it seems to be excellent and if Dan recommends it then it must be good!
We could debate the relative merits of each approach mentioned so far, pros/cons, when (not) to use a particular approach, and if there are other alternatives to consider. Ismail originally asked "how" and it was in the spirit of clarifying how ImageGen works that I explained ImageGen is a good option if one is disposed to using images for navigation in the first place.
Yes web typography is a HUGE discussion in itself now with services like TypeKit that allow you to legally use the font with the @font-face rule. But as you said best for another thread/forum entirely.
You can use imagegen to create the differency colours, then apply these as background images on your navigation <a> tags. Using standard <a> tag css hover you can change the background image.
This would allow you to output the text in standard <ul><li><a> structure, but then hide or offset the text. I'm not too sure what's more accessible.
Image for hover
Doug,
I am working on new site, the top navigation clickable items will be imagegen text. They will be one colour. What i want to do is on hover have same text different colour. Using non standard font so must be image gen.
Regards
Ismail
I think I should make a new 'how to' forum for ImageGen since this isn't a bug :)
Seriously, though... what's the question? Put imagegen.ashx?text=blah in your css and I think it'll work just fine!
cheers,
doug.
Doug,
Realized after posting the question that it was not complete doh! And agree with your point think we need new forum for now too's and many thanks for the answer exactly what i need.
Cheers
Ismail
ImageGen "How To" forum created and at http://our.umbraco.org/projects/imagegen/imagegen-how-to
cheers,
doug.
I don't think using imagegen for hovering images is correct way to go. There will be a noticable delay. Just use sIFR for using exotic fonts or fixed images. Menu items do not change that often.
Since the images created by ImageGen are cached after the first hit the performance will be basically the same as reading a file straight from disk (which is what ImageGen does with it's cached files). Since the images don't change the brower will just get a 304 not modified response and not send the file down again.
And the forthcoming ImageGen Professional v3 will allow for setting an expiration date so once the images are cached on the visitors browser there won't even be a request to ImageGen after that. I think that's pretty cool.
cheers,
doug.
I'd strongly recommend cufon over sifr every time for custom fonts. The consensus seems to be that sifr = "thanks for getting us here", but it's now a bit old, a bit stagnant, a bit fat and a bit reliant on flash.
Sifr is quicker to set up and use, respects more css properties and usually renders as the page loads, not up two 2 seconds after (as is often the case on sifr-heavy sites).
The benefit of using these over imagegen for custom fonts is that the text still lives on the page, indexable and readable from screen readers etc.
Dan
oops
That sentence was mean to start with "cufon".
For what it's worth... I try not to use stylized text in navigation for the same reasons I don't in body text. If I have to I've used custom images (css sprite), sIFR, and ImageGen with success, even for screen readers. Haven't had a chance to use cufon yet but it seems to be excellent and if Dan recommends it then it must be good!
We could debate the relative merits of each approach mentioned so far, pros/cons, when (not) to use a particular approach, and if there are other alternatives to consider. Ismail originally asked "how" and it was in the spirit of clarifying how ImageGen works that I explained ImageGen is a good option if one is disposed to using images for navigation in the first place.
cheers,
doug.
Fair point Doug! For another thread, methinks.
Yes web typography is a HUGE discussion in itself now with services like TypeKit that allow you to legally use the font with the @font-face rule.
But as you said best for another thread/forum entirely.
Ismail,
You can use imagegen to create the differency colours, then apply these as background images on your navigation <a> tags. Using standard <a> tag css hover you can change the background image.
This would allow you to output the text in standard <ul><li><a> structure, but then hide or offset the text. I'm not too sure what's more accessible.
Cheers,
Chris
is working on a reply...