Слои слайд-шоу изображений - PullRequest
Новая
       11

Слои слайд-шоу изображений

0 голосов
/ 10 апреля 2010

У меня есть div, содержащий слайд-шоу изображений jQuery, я хочу поместить еще один div / layer поверх слайд-шоу. Является ли это возможным? Это так же просто, как установить свойство div z-index css? 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Title</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
#SlideShow { display: none; width: 868px; height: 296px; }
-->
</style>
<script type="text/javascript" src="includes/jquery-1.4.1.js"></script>
<script type="text/javascript" src="includes/jquery.cj-simple-slideshow.js"></script>
<script type="text/javascript">
<!--
$(function() {
   $(document).ready(function() {

      //initialize the first slideshow container
      $("#SlideShow").cjSimpleSlideShow();

   });

});
//-->
</script>
</head>

<body>

  <table width="100%" align="center" cellpadding="0" cellspacing="0" class="main">
  <tr>
    <td width="50%">&nbsp;</td>
    <td><div class="header_top"><div class="header_logo"><img src="images/logo.png" alt="Logo" width="120" height="148" border="0" /></div>
      <div class="header_text"><img src="images/header_text.png" alt="" width="573" height="84" border="0" /></div>
        </div>
      <div class="header_image" style="z-index:0;"><div id="SlideShow" style="display:none;">
         <img src="images/header_image.jpg" width="868" height="296" alt="This is caption 1." /><br />
         <img src="images/header_image1.jpg" width="868" height="296" alt="This is caption 2." /><br />
         <img src="images/header_image2.jpg" width="868" height="296" alt="This is caption 3." /><br />
      </div>
      </div><div class="content">
      <div class="content_inner"><div><img src="images/heading_2.png" alt="Content" /></div>
        <p>Content.</p>
        <p>Content.</p>
        <p>Content.</p></div>
<div class="content_right">
  <div><img src="images/heading_1.png" alt="Content" /></div>
  <p><br />
Content.</p>
  <p>Content.</p>
  <p>Content. </p>
  <p>Content.</p>
  <p>Content<br />
    <br />
  </p>
  </div><br />
<div class="content_service"><div><img src="images/heading_3.png" alt="Content" /></div> 
  </div>
      </div>
</td>
    <td width="50%">&nbsp;</td>
  </tr>
</table>
</body>
</html>

Я хочу, чтобы половина div 'content_right' лежала поверх div слайд-шоу

Ответы [ 2 ]

0 голосов
/ 10 апреля 2010

Я на самом деле поместил div поверх самодельного jquery-слайд-шоу, и он работает нормально во всех браузерах, кроме IE6 - IE8.

В IE есть какая-то странная ошибка, из-за которой вы должны задать цвет фона для div сверху, чтобы он имел размеры. И сделайте его прозрачным, чтобы избавиться от цвета фона ...

Также см. мой вопрос об этой проблеме .

0 голосов
/ 10 апреля 2010

Возможно, вы сможете использовать свойство z-index, или вы можете использовать position: absolute; в элементе div, который вы хотите показывать над слайд-шоу. 

#top_most_element
{
z-index: 99; /* or whatever, just so long as it's higher than those elements 'below' it */
}

Или использовать альтернативу position: absolute;: 

#container_element
{
position: relative; /* in order to position the child-element relative to this element, not the window or other parent element */
}

#top_most_element
{
position: absolute;
}

<div id="container_element">

  <div class="slide">...</div>
  <div class="slide">...</div>

  <div id="top_most_element">
    <!-- content to show -->
 </div>

</div>

Это может работать, а может и не работать, это зависит от того, какое решение javascript вы используете для создания слайд-шоу и как оно работает. Если бы вы могли опубликовать это (js / jQuery / etc и соответствующие (x) html и css), мы могли бы помочь вам более эффективно.

...