Как я могу сделать позицию <img>: относительную вложенность в позицию: абсолютную <div>, кликабельную с? - PullRequest
Новая
       37

Как я могу сделать позицию <img>: относительную вложенность в позицию: абсолютную <div>, кликабельную с?

0 голосов
/ 26 сентября 2011

Я перевожу флэш-карусель на javascript, и у меня проблемы с позицией. Это CSS div, который содержит изображения. 

#tiovivo{
height:382px;
    width:793px;
    background-color:#F5F5F5;
    z-index:-1000;
overflow:hidden; 
position:relative; }

Если позиция не является относительной, код javascript должен быть длиннее, и изображения выходят за границы

Изображения в div выглядят так: 

<div id="tiovivo">
<img id="tio4" style="cursor:pointer; position:absolute;" onClick="location.href='tio4.php'" height="150px" src="tio4.jpg">
<img id="tio5" style="cursor:pointer; position:absolute;" onClick="location.href='tio5.php'" height="150px" src="tio5.jpg">
</div>

Проблема в том, что когда #tiovivo равно position:relative Я не могу щелкнуть изображения, события «onclick» не работают и cursorpointer не отображается.

если #tiovivo находится в position:static, "onclick" и cursor:pointer работают правильно.

Мне нужны изображения "position: absolute", чтобы я мог легко поместить их в код JavaScript.

Спасибо.

Ответы [ 4 ]

0 голосов
/ 26 сентября 2011

Спасибо всем, это был z-index: -1000 Я использовал этот индекс, потому что я программировал эффект "3D", и я хочу, чтобы нижняя часть #tiovivo не покрывала изображения.

Это функция, которую я использую для обновления карусели 

pos0+=(offx-tempX)/5000;if(pos0> 6.28318531){pos0-=6.28318531}
image0.style.left=offx+310*Math.cos(pos0)+"px";
ytilt=Math.sin(pos0);
image0.style.top=offy+310*ytilt*((offy+tempY)/1000)+"px";
image0.style.zIndex=Math.round(ytilt*10);

pos1+=(offx-tempX)/5000;if(pos1> 6.28318531){pos1-=6.28318531}
image1.style.left=offx+310*Math.cos(pos1)+"px";
ytilt=Math.sin(pos1);
image1.style.top=offy+310*ytilt((offy+tempY)/1000)+"px";
image1.style.zIndex=Math.round(ytilt*10);

Я исправил проблему добавления смещения к zIndex изображений, потому что функция sin () переходит от -1 к 1. 

image0.style.zIndex=100+Math.round(ytilt*10);

И удаление z-index: -1000 из #tiovivo

0 голосов
/ 26 сентября 2011

Есть несколько проблем с вашим делом

  • здесь не задействован javascript, по крайней мере, он не имеет никакого отношения к позиционированию здесь
  • вы используете абсолютную позицию без других атрибутов позиции, например, слева, справа и т. Д.
  • удалить z-index CSS, и это будет работать. Вы размещаете все DIV ПОД все остальное, даже если оно прозрачное
0 голосов
/ 26 сентября 2011

1.) Удалите z-index:-1000, чтобы сделать все элементы в div активируемыми.
2.) Если absolute позиция для изображений, вы должны добавить к ним вертикальную и горизонтальную позиции (left или right, top или bottom).

Также смотрите мой jsfiddle .

0 голосов
/ 26 сентября 2011

Ваша проблема в настройке z-index: -1000.

Сравните это (с z-index на #tiovivo):

http://jsfiddle.net/ambiguous/5HZdp/

и это (без z-index на #tiovivo):

http://jsfiddle.net/ambiguous/HLp3Z/

Ваш отрицательный z-index подталкивает #tiovivo и его дочерние элементы к <body>, поэтому изображения никогда не получают события щелчка. Вам не нужно z-index, чтобы ваши абсолютно позиционированные изображения были сверху, по умолчанию они будут сверху.

...