Форум Flasher.ru - Наложение прозрачного PNG или GIF на картинку, в зависимости от её ширины

Форум Flasher.ru (http://www.flasher.ru/forum/index.php)

- HTML/DHTML/CSS/JS/VB (http://www.flasher.ru/forum/forumdisplay.php?f=66)

Наложение прозрачного PNG или GIF на картинку, в зависимости от её ширины

Здравствуйте.

Суть задачи такая:

1) Есть бесконечно большое число картинок, у которых будет одинаковая высота, но разные длины.
2) Есть две прозрачные картинки, которые нужно накладывать сверху, на каждую картинку из первого множества.

Принцип накладывания PNG будет таков:

координата _x PNG = ширина картинки - 100px;

Проблема: Изначально не известно, какая длина будет у картинки, на которую сверху будут накладываться PNG, поэтому задать смещение строго в пикселях не получится.

Прилагаю картинки как должно быть, и из чего должно собраться (просьба не обращать внимания на то, что на конечном вариантеприсутствует ещё и фоновая картинка):
http://www.flashist.ru/images/gamebo_truble_1.jpg
http://www.flashist.ru/images/gamebo_truble_2.jpg

За ранее спасибо.

P.S.: Если такая задача силами только вёрстки не реализуема, то есть ещё идеи, как можно это сделать на стороне сервера. Если скрипту передавать картинку, а он, чтобы считывал её размеры и в нужное место вставлял поверх неё картинки пластырей.

Буду рад любому, кто покажет, в какую сторону нужно копать, я уже молчу о примерах. Если у кого-то есть решения подобных задач, то буду вам примного благодарен.

А давно у картинок длина появилась?

Что-то мне подсказывает, что вам надо работать в процентных отношениях + поля.

Код:

<span class="left"></span><img /><span class="right"></span>

из спанов делаете блок по размеру пластырей, на фон сами пластири.
а затем смещаем их отрицительными марджинами.

2 __etc:
Я думаю понятно, что речь идёт о ширине картинки, почему-то я думал, что длина и ширина в данном случае понятия равнозначные. на счёт вашего ответа не понял. Какие поля, и соотношение процентное чего брать?

2 Mnilionic:
Спасибо за совет, буду пробовать, надеюсь смогу осилить.

1й пластырь.

Код:

position:absolute;top:0;left:0;

2й пластырь.

Код:

position:absolute;top:0;right:0;

родитель ( .plasters)

Код:

position:relative;

Код:

<div class="plasters">

<div class="plaster_1"></div>

<div class="plaster_2"></div>

</div>

Я сейчас буду пробовать ваш код, но проблема в том, что родительский ~~клип~~ <div>, вне зависимости от того, какой длины картинка внутри него, растягивается на всю ширину экрана. Я, как мне кажется, догадался, что можно просто левее и правее него вставлять пустые <div>, которые бы занимали пустое пространство и ограничивали его, но пока не очень сообразил, как это должно работать, вернее, как реализовать это.

2 KidsKilla:
Описанный вами способ работает в FF 3, Opera и Safari, но не хочет работать в IE 7 (я подозреваю, что в 6-м дела не на много лучше обстоят). Не знаете случайно способа обойти этот баг в IE ?

Но в любом случае спасибо вам большое за подсказанный способ =)

;) лиса, опера , сафари, ИЕ6

Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>



<style type="text/css">

.img_box{/*border:1px solid black;*/

    margin:0 20px; padding:10px;

    float: left;

}

.img_box img{ position: relative; z-index: 10; }



.corners{/*border:1px solid red;*/

    position: relative; z-index: 20;

    display: block; padding-left: 40px;

    margin: -5px -5px -20px -5px;

    background: url(http://www.flasher.ru/forum/images/russian/style3/statusicon/user_online.gif) no-repeat 0 0;

}

.corners span{/*border:1px solid red;*/

    display: block; padding-top:25px;

    background: url(http://www.flasher.ru/forum/images/russian/style3/statusicon/user_online.gif) no-repeat right 0;

}

</style>

</head>

<body>





<div class="img_box">

<span class="corners"><span></span></span>

<img src="http://www.flasher.ru/forum/image.php?u=26879" alt="1" />

</div>



<div class="img_box">

<span class="corners"><span></span></span>

<img src="http://www.flasher.ru/forum/image.php?u=16552" alt="2" width="150px" />

</div>





</body>

</html>

Огромное спасибо =))) Блин, у вас работает на все 100%, теперь буду пытаться в свой проект внедрить =) спасибо вам большое ещё раз =)

способ от Mnilionic не подойдёт полупрозрачным пнг + ие 6 =/

а чего с ие7? чтобы ширина родителя была равна контенту а не 100% 2 варианта: float:left или display:inline. прозреваю 2й лучше.