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

Тема в разделе "HTML, CSS, XML, JavaScript", создана пользователем NetLady, 21 янв 2011.

  1. NetLady

    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;'>
    Все равно рядом картинку выводит а не поверх. Вот пример как выводит сейчас: http://www.hogart.ru/otoplenie/brand_alfal...vie_punkti/1284
    Если бы не функция, можно было бы выводить впринципе картинки продукта в бакграунде, но увы..
    Вобщем на сколько я поняла, реализовать это можно посредством яваскрипта. Только трабл, в яваскрипте, каюсь не сильна. Подскажите пожалуйста как.
     
  2. TimeDontWait

    TimeDontWait Well-Known Member

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

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

    TimeDontWait Well-Known Member

    Регистрация:
    4 янв 2010
    Сообщения:
    383
    Симпатии:
    0
    И еще одно, нужно забить один див в другой:
    Код (Text):
    <div class="layer1">
    <div class="layer2">
    <img src="__">
    </div>
    </div>
     
  4. NetLady

    NetLady Гость

    Нет, не работает так, пробовала
     
  5. TimeDontWait

    TimeDontWait Well-Known Member

    Регистрация:
    4 янв 2010
    Сообщения:
    383
    Симпатии:
    0
    Задай для родительского элемента позиционирование релятив
     
  6. NetLady

    NetLady Гость

    Нет, может кто еще идею подскажет?
     
  7. Rayled

    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]
     
  8. TimeDontWait

    TimeDontWait Well-Known Member

    Регистрация:
    4 янв 2010
    Сообщения:
    383
    Симпатии:
    0
    Если не получится киньте сюда ссылку на страницу или сам файл прикрепите
     
  9. NetLady

    NetLady Гость

    Дело в том, что absolute ставить нельзя, так как катринок бывает несколько
    вот пример на сайте: http://www.hogart.ru/otoplenie/brand_arbon...sesushiteli/170
    вот код:


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

    Стили в 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>
     
Загрузка...
Похожие Темы - Картинка поверх другой
  1. R4z0R
    Ответов:
    16
    Просмотров:
    1.291
  2. YGol
    Ответов:
    9
    Просмотров:
    1.342
  3. mirkul
    Ответов:
    2
    Просмотров:
    1.774
  4. nayke
    Ответов:
    7
    Просмотров:
    2.346
  5. поросенок
    Ответов:
    6
    Просмотров:
    6.314

Поделиться этой страницей