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

katrukhin · 24 Сен 2010

Существует ли скрипт, который бы мог определить ширину бока и если ширина блока совпадает с шириной определенного изображения, то вставить его в блок?

jo0o00nyy · 24 Сен 2010

Скрипта не встречал, но написать его можно с помощью 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

Но надо помнить, о том, что в разных браузерах, некоторые блоки могут быть разной ширины.

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

katrukhin

Местный житель

jo0o00nyy

Постоялец