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

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

  1. NetLady

    NetLady Гость

    Репутация:
    0
    Урлы картинок продукта выводятся из БД, затем стоит функция по подгонке размера картинки, поэтому она стоит в обычном <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

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

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

    TimeDontWait Well-Known Member

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

    NetLady Гость

    Репутация:
    0
    Нет, не работает так, пробовала
     
  5. TimeDontWait

    TimeDontWait Well-Known Member

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

    NetLady Гость

    Репутация:
    0
    Нет, может кто еще идею подскажет?
     
  7. Rayled

    Rayled Гость

    Репутация:
    0
    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

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

    NetLady Гость

    Репутация:
    0
    Дело в том, что 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. Ondrik8
    Ответов:
    107
    Просмотров:
    6.778
  2. R4z0R
    Ответов:
    16
    Просмотров:
    1.901
  3. YGol
    Ответов:
    9
    Просмотров:
    1.487
  4. mirkul
    Ответов:
    2
    Просмотров:
    1.922
  5. nayke
    Ответов:
    7
    Просмотров:
    2.503

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