Скрипт для вставки изображения в зависимости от ширины

Тема в разделе "Другие языки", создана пользователем katrukhin, 24 сен 2010.

Статус темы:
Закрыта.
Модераторы: Цукер
  1. katrukhin

    katrukhin

    Регистр.:
    6 июн 2010
    Сообщения:
    168
    Симпатии:
    22
    Существует ли скрипт, который бы мог определить ширину бока и если ширина блока совпадает с шириной определенного изображения, то вставить его в блок?
     
  2. jo0o00nyy

    jo0o00nyy Постоялец

    Регистр.:
    12 май 2010
    Сообщения:
    65
    Симпатии:
    27
    Скрипта не встречал, но написать его можно с помощью Jquery примерно так
    Код:
    <html><body>
    <script type="text/javascript" src="jquery.js"></script>
    <div id="a1">
        <div id="b1">aaaa</div>
        <span id="b2">bbbbb</span>
        <div id="b3" style="float:left">cccccccccccccccc</div>
        <p id="b4">ddddddddd</p>
    </div>
    <script type="text/javascript">
    //задаем соответствия ширины и какую картинку грузить
    var imgs = {40:'a.jpg', 112: 'b.jpg'};
    //задаем какие объекты пройти
    var objs = ['b1', 'b2', 'b3', 'b4'];
    function start(objs)
    {
        var txt = '';
        var w = 0;
        for(var i in objs)
        {
            w = $('#' + objs[i]).width();
            txt += objs[i] + '=' + w; //debug
            if (typeof imgs[w] != 'undefined' && imgs[w] != '')
            {
                txt += ' -> ' + imgs[w];//debug
                $('#' + objs[i]).html('<img src="' + imgs[w] + '" />'); //заменяем содержимое на картинку
            }
            txt += "\n";//debug
        }
        alert(txt);//debug
    }
    start(objs);
    </script>
    
    После открытия страницы будет алерт следующего содержания.
    Код:
    b1=1264
    b2=40 -> a.jpg
    b3=112 -> b.jpg
    b4=1264
    
    Но надо помнить, о том, что в разных браузерах, некоторые блоки могут быть разной ширины.
     
Статус темы:
Закрыта.