??????? ????????? Image Replacement ????? ???????? ??????????????

13 Oct. 2006

??? ?????? ?????????? IR ??? ????????????? ????? ???????? ????????? ?????????????? ???????? ?? ???????????????????????? CSS-?????????????? content ?? ???????????-???????????? :before. ????? ???????? ?????????? ?? ?????????????????? ????????????, ??????????????? ?? 20% ???????????????????. ????-?????????, ???????????????? ????? ???????. ???? ???????? ?? ???????????????? ???????????????????????? — ??????.

? ????????? ???????????????????? ???????????? CSS ????????????? ????:

h1 {
    overflow: hidden; 
    width: 300px;
    height: 30px; 
    }
h1:before {
    content: url(example.png);
    }

???????? ?????????????? ????????????? ???????????????, ?????? ???? ???????????? ?? ???????, ?????? ?????????????? ?????????????, ?? ?????? ???????? ???????????? ??? ????????????????????? ???????

font: normal 80% sans-serif;

Opera, ?????? ???????????????? ??????????????, ?????????????? ?????????? ??????????????????????????? ???????????? ????????? “Image”. ?????? ?????? ??? ????????????, ???????????????? ???????? ???????????-?????????? ????????? ???????? ????????????? ?? ?????, ??????????????????? ?? ?????????. ??????????????? ???????? ????????????? ????? ???????????? ????????????? ??? ????????? ??? ???????????.

color: #FFF; /* for  Opera */
font-size: 1px; /* for  Opera */

? ????????????? ????????????:

h1 {
    overflow: hidden; 
    width: 300px;
    height: 30px; 
    margin: 0;
    padding: 0;
    font: normal 80% sans-serif;
    }
h1:before {
    content: url(example.png);
    color: #FFF; /* for  Opera */
    font-size: 1px; /* for  Opera */
    }

???? ???????????????? MSIE ????????????????? ???????????? CSS-???????? Image Replacement, ?????????????? Phark Method. ??? JS, ??? ????????? HTML-????????????. ???? ???????????????? ?????????? ?? MSIE. ?????????? ????????????????: ?????? ???????????????? ??????????????, ???? ?? ???????????????? CSS, ????????? ??????????????? ???????? ??? ??????????. ? ???????????????, Phark Method — ????????????? ?? ???????????? ????????. ??????? ????????????????????.

?????????????????????? ?????? ????????? ???????????????????? ?? ???????????????????????? Conditional Comments, ?????? ????? ?????????? ?????????? MSIE.

h1 {
    background: url(_h1.png) 0 0 no-repeat;
    text-indent: 5000px; 
    }

?????????????? ???????, Firefox ??? ????????? ????????? ???????, ??? ???????????????????, ??????????????? ?? ?????? ???????????????? Phark Method-?. ?????????? ?????? ??????????? ??? ???????????????????.

????. ??????????? ???????????.

??????, ??? ?????????????? ???????? ????? ??????????????????? IE, ????????????? ????? ????? ?? ??????????????, ??? ?????????? ??????????????? ???????? ??????????? ???????? ???????????????????? ?????????????????? ??????????????. ??????????? ?? ????????? ??????? ????? ???????? ?? ????????.

???? ????? ?? ?? ??????????: ?????????? ??? ????? 100% ????? ?????????, ?? ??? 120 — ????? ???????????.

???? ??? ???????????? ?? ???????? ???????? ???????????????? (Image Replacement)

12 Responses to “??????? ????????? Image Replacement ????? ???????? ??????????????”

  1. YoYurec Says:

    ???????????? ???????????… ????? ?????????? ??????????? ??????????????? ?????????????????, ???? ??????????? ??????? ????????????????:
    * ? ????? ???????? ???????????????-??????????
    * ????? ????????????????? ???????-?????????????? (???????? 2 ??????????????, ??????? ????????? – ???? ???????? ?? ??? ???????? “?????????????” ???? ??????????… ? ???????? ????????????? ?????????? ???????????????? ??? ?? ????? ??? — ??? ??????????????)

    ??????? ??????????????? ?????????!

  2. uggallery Says:

    ????????? ????????????, ??? ??????? ??????????????????? ????? ?????????????? ??????? ?? ??????????????. ???????????????-????????? ???????? ??? ?????????????? ??? ?????????? ?? ??????????? ??????????? ?? ?.??. ????????????????????? ??????????? ????????????? ?? ?????.

    ?????????????? ?? ?????????????? ????????? ??????????? ????????????????. ???????? ?????????, ???????????????? ??????????? css-sprite.

    ???? ??? ?????????????? ?? ?????? ??? ??????? ????????????. ????? span-? ????????????????????, ???? ????? ??????????? ????????????? ?? ???????????????? ??????????????, ????????? ?????????????? ??? ?????.

    ?????????????? ??? ????????? ???? ??????? “????????????? ?????????? ???????????????? ??? ?? ????? ???”. ?? ???? ???????? “???????????????” ?? ??????????????? CSS. ?????????? ???????? ????? ????????????????.

  3. YoYurec Says:

    ?????????????? ??? ????????? ???? ??????? ???????????????? ?????????? ???????????????? ??? ?? ????? ??????.
    ?? ?????? ?????????? ????????????? ??????????? “css-sprite” (?????????????????????? ????????????? ????????????? ?????? ??????????????), ???????? ????????????? ??????????????? ????????????????????????????? ?????? ????? ????! ???? ??????? ????? ???????????? ????? IR (???????? background-image) ?? IE, ? ????? ???????????????? ?????????????? ??????? ????????????????? :content, ?????-??? ????? ??????????????????????????? ????????! :( ??????????? ????????? ???????? ????? ????????????????? hover ??????????????? ??????????????… ??????????? ????? ?????????? ???????????? ??????? ????????? 3 ??????????????: button1, button1over (Opera,FF) + button1sprite (IE).
    ?????? ????? ?????? ?????????????? 2 ??????????????, ???? ???????? ??? ?????????????? css-sprite :(

  4. uggallery Says:

    ?????????? “?????????”? ????????? ???????????????????? margin-left ?? ??????????????????? ?????????????.

    ?? ??????????? ?? ???????? ???????????? ??????????????? ??????:

    h1:hover:before {
    margin-left: -300px;
    }

    ?? ?????????????????????? ??????????????.

    ???? ??????????. ????????????????? ????????? ???????????????????? ???????????? ????????????, ??? h1.

  5. YoYurec Says:

    ????!!! ???????????!!! ??????????? :)
    ???????? ????????????????????????… ????????? ?????? NIR (???? ?? BIR), ? ????????? ???????????????? ??? ??????? ???????? ????????????????, ???? ????????? ????? ?????????? ???????????????, (?? ????!) ??????????? sprites. TNX!

  6. uggallery Says:

    ???????????????. ??????? ?????, ?????? ???????????????????.

  7. (???)??????????? ?????????????? | rotorweb.ru | ???????????? ?? ??????????? ?? Web-??????????? Says:

    [...] ????????????????????????? ??????????? Flash-?????????????. ??????? ????????? Image Replacement ????? ???????? ??????????????. ???????????? ????????? ????? [...]

  8. ????????? Says:

    ???? ???????? ????????:
    font-size:0;
    ?? ????????????? ?????? ??????????? ?????? ???????????????? ?????????????????? ????????? ??? ?????????????.
    ????? ????? ?? ????? ??????? ???????? ????? overflow:hidden; ??? ??? ????????? ?????????????? ?? ?????????????
    .fn:before{

    position:relative;
    left:-2px;
    }
    ?????????????? ?? ???????? 9.63
    ?????????.
    ???????? ??? ???????????????? ????????? ????? ??? ??????????

  9. uggallery Says:

    ??????? ?????????????????. ????-??? ?????????????? ?? ??????. ???? ?????????????, ????? ???? ???-?? ???????, ???? ?? ??????????? ??????? ??????????? ???????????? ??? ???????? ????????????. ????, ??? ?? ???????????, ???? ???????? ????? ????? ????????? ??????????????, ? ???????????????????? ?????? ????? ?????????? ?????????????. ???? ?? ??? :) ???????????, ???? ???????????????? ??????????? ??? ?????????? ?? ??????????????????? ????????????????? ???? ?? ????????????. ? ???????, ?????????? ???????????.

  10. namez Says:

    ?????????????? ????? ??????? ?????????????? ?????????? ????? ???????

    ???????

    ??? ?????????????
    ???????????? ????????? ?? ?????????!

  11. namez Says:

    …?? html ????????????????????

    ?? ??????? ?? h1 ???????????? ?????????!
    ??????????????? ????????? -)

  12. namez Says:

    ?????????????????? line-height ????? IE 6

    ??????????????? ????????? ???????????? -)

    ?????? ?????????????

    header-left address a {display: block; overflow: hidden; width: 104px; height:12px; }

    header-left address a:before {content: url(/images/telefonLink.png); color: #FFF; font-size: 1px;}

    ?????? ???????????????? ?????????????? ???????? ???????? ??? ?????????? ?? ???????? ???????!
    ??? ?????????? ??????? ?????????????? – ??????? ???????? ????????? ????? ?? ?????????

    ????? ??????????