0

Доброго всем времени суток господа.

// это помещаем на страницу
<div class="tippem">
    картинка 1
    <div class="tim">
        картинка 2
    </div>
</div>

// это в CSS
.tippem         { position:relative; text-align:justify; }
.tippem .tim        { display:none; position:absolute; top:-20px; left:+20px; }
.tippem:hover .tim      { display:block }

Есть такой код. очень удобно в место того, что я обозначил как - картинка, делать таблицы, другие дивы. Наводишь, и появляется область со скрытым кодом. Экономит место на странице.

Есть так же проблема с этим кодом. Если расположить несколько таких блоков на странице, то, при наведении если 'картинка 2' заезжает на одну из 'картинка 1', то 'картинка 2' - появляется как бы под ним. Что и должно быть, как и прописано в CSS.

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

p.s. я заранее должен извиниться за то, как задал вопрос

2
  • 1
    Помог бы скрин.z-index большой поставь ,может поможет.В каких браузерах проблема?
    – koza4ok
    Commented 5 окт. 2012 в 9:25
  • z-index? ок. подумаю в этом направлении (думал строго через JS будет беседа) . проблема кроссбраузерна
    – sergey
    Commented 5 окт. 2012 в 9:41

2 ответа 2

2

z-index

Любые позиционированные элементы на веб-странице могут накладываться друг на друга в определенном порядке, имитируя тем самым третье измерение, перпендикулярное экрану. Каждый элемент может находиться как ниже, так и выше других объектов веб-страницы, их размещением по z-оси и управляет z-index. Это свойство работает только для элементов, у которых значение position задано как absolute, fixed или relative.

4
  • вообще очень рекомендую htmlbook.ru
    – thunder
    Commented 5 окт. 2012 в 12:23
  • 1
    только как справочник .Форум ниже плинтуса,ценных статей очень мало
    – koza4ok
    Commented 5 окт. 2012 в 12:41
  • 1
    дописал. сработало. спасибо
    – sergey
    Commented 5 окт. 2012 в 13:04
  • 1
    как справочник и рекомендую лично для меня его использование отсекает много вопросов)
    – thunder
    Commented 5 окт. 2012 в 13:14
2

может вам вот такое пойдет:

 <div><a href="#open1" onclick="show('hidden_1',200,5)">Ссылка 1</a> <a href="#open3" onclick="show('hidden_3',200,5)">Ссылка 2</a></div>
    <div id=hidden_1 style="display:none;height:300px;width:720px;background-color:#f0f0f0">
    проверка работы (цвет фона настроите сами) 
    <center><img src="Ссылка на вашу картинку."/></center>
    </div>

    <div id=hidden_3 style="display:none;height:200px;width:720px;background-color:#f0f0f0">
    Проверка работы вкладки 2.
    </div>

     <script language="JavaScript" type="text/javascript">
     /*<![CDATA[*/
     var s=[],s_timer=[];
     function show(id,h,spd)
     { s[id]= s[id]==spd? -spd : spd;
     s_timer[id]=setTimeout(function() {
     var obj=document.getElementById(id);
     if(obj.offsetHeight+s[id]>=h){obj.style.height=h+"px";obj.style.overflow="auto";}
     else if(obj.offsetHeight+s[id]<=0){obj.style.height=0+"px";obj.style.display="none";}
     else {obj.style.height=(obj.offsetHeight+s[id])+"px";
     obj.style.overflow="hidden";
     obj.style.display="block";
     setTimeout(arguments.callee, 10);
     }
     }, 10);
     }
     /*]]>*/
     </script>
3
  • 1
    забудь этот кусок language="JavaScript" type="text/javascript". Что за /*<![CDATA[*/?Оно там нужно сейчас?
    – koza4ok
    Commented 5 окт. 2012 в 13:21
  • согласен))
    – thunder
    Commented 5 окт. 2012 в 13:27
  • возьму на вооружение
    – sergey
    Commented 5 окт. 2012 в 15:25

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.