Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Ismail Mayat 4487 posts 9969 karma points MVP 2x admin c-trib
    Sep 24, 2009 @ 15:38
    Ismail Mayat
    0

    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

  • Douglas Robar 3570 posts 4670 karma points MVP 6x admin c-trib
    Sep 24, 2009 @ 15:55
    Douglas Robar
    1

    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.

  • Ismail Mayat 4487 posts 9969 karma points MVP 2x admin c-trib
    Sep 24, 2009 @ 16:03
    Ismail Mayat
    0

    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

  • Douglas Robar 3570 posts 4670 karma points MVP 6x admin c-trib
    Sep 24, 2009 @ 16:11
    Douglas Robar
    0

    ImageGen "How To" forum created and at http://our.umbraco.org/projects/imagegen/imagegen-how-to

    cheers,
    doug.

  • Folkert 82 posts 212 karma points
    Sep 24, 2009 @ 16:28
    Folkert
    0

    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.

  • Douglas Robar 3570 posts 4670 karma points MVP 6x admin c-trib
    Sep 24, 2009 @ 16:34
    Douglas Robar
    0

    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.

  • dandrayne 1138 posts 2262 karma points
    Sep 24, 2009 @ 16:34
    dandrayne
    0

    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

     

     

  • dandrayne 1138 posts 2262 karma points
    Sep 24, 2009 @ 16:35
    dandrayne
    0

    oops

    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).

    That sentence was mean to start with "cufon".

  • Douglas Robar 3570 posts 4670 karma points MVP 6x admin c-trib
    Sep 24, 2009 @ 16:52
    Douglas Robar
    1

    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.

  • dandrayne 1138 posts 2262 karma points
    Sep 24, 2009 @ 16:58
    dandrayne
    0

    Fair point Doug!  For another thread, methinks.

  • Warren Buckley 2087 posts 4567 karma points MVP 6x admin hq c-trib
    Sep 24, 2009 @ 17:06
    Warren Buckley
    0

    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.

  • Chris Koiak 700 posts 2626 karma points
    Sep 24, 2009 @ 18:47
    Chris Koiak
    0

    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

Please Sign in or register to post replies

Write your reply to:

Draft