• Познакомьтесь с пентестом веб-приложений на практике в нашем новом бесплатном курсе

    «Анализ защищенности веб-приложений»

    🔥 Записаться бесплатно!

  • CTF с учебными материалами Codeby Games

    Обучение кибербезопасности в игровой форме. Более 200 заданий по Active Directory, OSINT, PWN, Веб, Стеганографии, Реверс-инжинирингу, Форензике и Криптографии. Школа CTF с бесплатными курсами по всем категориям.

Картинка поверх другой

  • Автор темы NetLady
  • Дата начала
N

NetLady

Урлы картинок продукта выводятся из БД, затем стоит функция по подгонке размера картинки, поэтому она стоит в обычном <img src= а не на бакграунде
вот в таком виде:
<img src='".$photos['pic']."' width='".$showout[0]."' height='".$showout[1]."'>
Мне необходимо чтобы другая картинка (лупа) выводилась поверх этой картинки в правом нижнем углу, я добавила:
<img src='http://".$domain."/".$photos['pic']."' width='".$showout[0]."' height='".$showout[1]."' style='z-index:1;'>
<img src='http://".$domain."/images/zoom.png' style='position:relative; right:0; bottom:0; z-index:9;'>
Все равно рядом картинку выводит а не поверх. Вот пример как выводит сейчас:
Если бы не функция, можно было бы выводить впринципе картинки продукта в бакграунде, но увы..
Вобщем на сколько я поняла, реализовать это можно посредством яваскрипта. Только трабл, в яваскрипте, каюсь не сильна. Подскажите пожалуйста как.
 
T

TimeDontWait

<!--shcode--><pre><code class='css'>position: absolute; /* Абсолютное позиционирование */
bottom:?px; /* Положение от нижнего края */
right: ?px; /* Положение от правого края */[/CODE]

Позиционируется от родителя. Должно работать
 
T

TimeDontWait

И еще одно, нужно забить один див в другой:
Код:
<div class="layer1">
<div class="layer2">
<img src="__">
</div>
</div>
 
N

NetLady

<!--shcode--><pre><code class='css'>position: absolute; /* Абсолютное позиционирование */
bottom:?px; /* Положение от нижнего края */
right: ?px; /* Положение от правого края */[/CODE]

Позиционируется от родителя. Должно работать

Нет, не работает так, пробовала
 
T

TimeDontWait

Задай для родительского элемента позиционирование релятив
 
R

Rayled

NetLady вам вообще-то TimeDontWait все правильно подсказал. Странно, что не работает. Ну можно еще так попробовать (инлайн-стили потом вынесете):
<!--shcode--><pre><code class='html'><div style="position:relative">
<img src="__" alt="__" >
<img src="__" alt="__" style="position:absolute;bottom:?px;right: ?px">
</div>[/CODE]
 
T

TimeDontWait

Если не получится киньте сюда ссылку на страницу или сам файл прикрепите
 
N

NetLady

Если не получится киньте сюда ссылку на страницу или сам файл прикрепите

Дело в том, что absolute ставить нельзя, так как катринок бывает несколько
вот пример на сайте:
вот код:


Функцию не привожу
-- Функция --

Стили в css файле относящиеся к коду:

div#gallery {
padding:0;
margin:0;
}

div#gallery div {
border:0;
float:left;
width:130px;
height:130px;
margin:6px;
text-align:center;
padding:0px;
border:0px solid black;
position:relative;
}

div#gallery div img {
CURSOR:pointer;
vertical-align:middle;
border:0;
background: none;
}

div#gallery a:link {
color: #ffffff;
}


<div id="gallery">

<?
// ФУНКЦИЯ

$geticon = mysql_query ("select * from prodpic where prodid = '$id' order by id desc",$db);
if (mysql_num_rows($result1)>0)
{

while ($photos = mysql_fetch_array($geticon))
{
$showout=get_proper_img_size(120,$photos['pic']);

echo
"<a href='http://".$domain."/".$photos['pic']."'>
<div>
<img src='".$photos['pic']."' width=".$showout[0]." height=".$showout[1].">
<img src='images/zoom.png' style='position:relative; bottom:0px; right:0px'>
</div>
</a>
";
}

}
?>
</div>
 
Мы в соцсетях:

Обучение наступательной кибербезопасности в игровой форме. Начать игру!