右側にスライドショーとメニューがあるサイトを作っています。
これについてできるだけ詳しく説明し、コードと写真も提供します (以下を参照)。
スライドショーには、4 つの写真と、特定の写真がスライドショーでアクティブになったときにマークされる 4 つのパラグラフを含むメニューがあります。
例：
画像 1 を表示--------->パラグラフ 1 アクティブ 画像 2 を表示--------->パラグラフ 2 アクティブ など。
また、各スライドショー内にテキストを含む小さな長方形の背景があります: 画像:
http://imageshack.us/photo/my-images/198/mysiteq.jpg/
上の図からわかるように、スライドショーが変更されたときに特定の段落を指す矢印を追加しようとしています。ご覧のとおり矢印を追加しましたが、問題はメニューの後ろに表示されることです。
矢印の半分をメニューの上に置きたいのですが、何らかの理由でこれを機能させることができません。
私のhtml：
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="ProductsSectionHoverControl.ascx.cs" Inherits="TTLine.Templates.Units.ProductsSectionHoverControl" %>
<script type="text/javascript" src="/Scripts/JquerySlideShowPlugin.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#showcase").awShowcase(
{
content_width: 430,
content_height: 205,
fit_to_parent: false,
auto: true,
interval: 3000,
continuous: true,
loading: true,
tooltip_width: 200,
tooltip_icon_width: 32,
tooltip_icon_height: 32,
tooltip_offsetx: 18,
tooltip_offsety: 0,
arrows: true,
buttons: false,
btn_numbers: true,
keybord_keys: true,
mousetrace: false, /* Trace x and y coordinates for the mouse */
pauseonover: true,
stoponclick: true,
transition: 'vslide', /* hslide/vslide/fade */
transition_delay: 300,
transition_speed: 500,
show_caption: 'onhover', /* onload/onhover/show */
thumbnails: true,
thumbnails_position: 'outside-last', /* outside-last/outside-first/inside-last/inside-first */
thumbnails_direction: 'vertical', /* vertical/horizontal */
thumbnails_slidex: 0, /* 0 = auto / 1 = slide one thumbnail / 2 = slide two thumbnails / etc. */
dynamic_height: false, /* For dynamic height to work in webkit you need to set the width and height of images in the source. Usually works to only set the dimension of the first slide in the showcase. */
speed_change: true, /* Set to true to prevent users from swithing more then one slide at once. */
viewline: false /* If set to true content_width, thumbnails, transition and dynamic_height will be disabled. As for dynamic height you need to set the width and height of images in the source. */
});
});
</script>
<div id="showcase" class="showcase">
<!-- Each child div in #showcase with the class .showcase-slide represents a slide. -->
<div class="showcase-slide">
<!-- Put the slide content in a div with the class .showcase-content. -->
<div class="showcase-content">
<div class ="One">Unna er en kryssning till Travemunde</div>
<div class="ArrowOne"><img src="/images/ArrowUse.png" alt="01" width="100" height="50" /></div>
<img src="/images/TTlineFlying.jpg" alt="01" width="430" height="200" />
</div>
<!-- Put the thumbnail content in a div with the class .showcase-thumbnail -->
<div class="showcase-thumbnail">
<!-- <img src="images/01.jpg" alt="01" width="140px" /> -->
<!-- The div below with the class .showcase-thumbnail-caption contains the thumbnail caption. -->
<p class="showcase-thumbnail-content">Kortresor</p>
<!-- The div below with the class .showcase-thumbnail-cover is used for the thumbnails active state. -->
<!-- <div class="showcase-thumbnail-cover"></div> -->
</div>
<!-- Put the caption content in a div with the class .showcase-caption -->
<%--<div class="showcase-caption">
<h2>Be creative. Get Noticed!</h2>
</div>--%>
</div>
<div class="showcase-slide">
<div class="showcase-content">
<!-- white image with low opacity-->
<div class ="Two">Unna er en kryssning till Travemunde</div>
<img src="/images/TTLineTest2.gif" alt="02" width="430" height="200" />
</div>
<div class="showcase-thumbnail">
<p class="showcase-thumbnail-content">Kryssningar</p>
<!-- <div class="showcase-thumbnail-cover"></div> -->
</div>
<!-- Put the tooltips in a div with the class .showcase-tooltips. -->
<div class="showcase-tooltips">
<!-- Each anchor in .showcase-tooltips represents a tooltip. The coords attribute represents the position of the tooltip. -->
<a href="http://www.awkward.se" coords="634,130">
<!-- The content of the anchor-tag is displayed in the tooltip. -->
This is a tooltip that displays the anchor html in a nice way.
</a>
<a href="http://www.awkward.se" coords="200,440">
This is a tooltip that displays the anchor html in a nice way.
</a>
<a href="http://www.awkward.se" coords="600,440">
This is a tooltip that displays the anchor html in a nice way.
</a>
<a href="http://www.awkward.se" coords="356, 172">
<!-- You can add multiple elements to the anchor-tag which are display in the tooltip. -->
<img src="images/glasses.png" />
<span style="display: block; font-weight: bold; padding: 3px 0 3px 0; text-align: center;">
White Glasses: 500$
</span>
</a>
</div>
</div>
<div class="showcase-slide">
<div class="showcase-content">
<div class ="Three">Boka konferens här!</div>
<img src="/images/TTlineTest3.jpg" alt="03" width="430" height="200" />
</div>
<div class="showcase-thumbnail">
<p class="showcase-thumbnail-content">Konferens</p>
<!-- <div class="showcase-thumbnail-cover"></div> -->
</div>
</div>
<div class="showcase-slide">
<div class="showcase-content">
<div class ="Four">Unna er en kryssning till Travemunde</div>
<img src="/images/TTLineTest4.jpg" alt="04" width="430" height="200" />
</div>
<div class="showcase-thumbnail">
<p class="showcase-thumbnail-content">Shopping</p>
<!-- <div class="showcase-thumbnail-content">Just some text<br/> I'm not <b>bold</b></div>
<div class="showcase-thumbnail-cover"></div> -->
</div>
</div>
</div>
私のCSS：
.showcase-thumbnail
{
width: 170px;
height: 50px;
/* cursor: pointer;
border: solid 1px #333; */
position: relative;
bottom:10px;
right: 11px;
background: url(/Images/Button.png);
}
.One
{
position: absolute;
top: 0px;
left: 0;
padding: 14px 0 0 0 !important;
font-size: 135% !important;
font: bold 0.8em arial;
width: 430px;
height: 35px;
background-color: White;
opacity:0.85;
}
.Two
{
position: absolute;
top: 50px;
left: 0;
padding: 14px 0 0 0 !important;
font-size: 135% !important;
font: bold 0.8em arial;
width: 430px;
height: 35px;
background-color: White;
}
.Three
{
position: absolute;
top: 100px;
left: 0;
padding: 14px 50px 0 0 !important;
font-size: 135% !important;
font: bold 0.8em arial;
width: 430px;
height: 35px;
background-color: White;
}
.Four
{
position: absolute;
top: 150px;
left: 0;
padding: 14px 0 0 0 !important;
font-size: 135% !important;
font: bold 0.8em arial;
width: 430px;
height: 36px;
background-color: White;
}
.ArrowOne
{
border:1px black solid;
position: absolute;
/*background: url("/images/ArrowUse.png");
background-repeat: no-repeat;
width: 100px;
height: 100px;*/
left: 400px;
top: 0px;
opacity:100;
z-index: 10000;
}
.showcase-thumbnail p
{
text-align: left;
padding: 5px 0 0 30px;
}
.showcase-thumbnail-caption
{
/*position: absolute;
bottom: 2px;
padding-left: 10px;
padding-bottom: 5px;*/
}
.showcase-thumbnail-content
{
/* padding: 10px;
text-align: center;
padding-top: 25px; */
padding: 0px 0px;
/*border: 1px solid #dcdcdc;
border-radius: 6px;*/
color: #FBF8F8;
text-decoration: none;
font: bold 0.8em arial, sans-serif;
width: 120px;
font-size: 140%;
cursor: hand; cursor: pointer;
}
より多くの css と jquery プラグイン全体がありますが、この問題には関係ありません。
私は元々、このリンクからデモ 2 を取得しました: http://showcase.awkwardgroup.com/index2.htmlで、写真に表示されているものに変更しました。
に追加しようとしましz-index: 1た".showcase-thumbnail"が、うまくいきませんでした。追加しようとしz-index: 10000ましたshowcase-contentが、結果はありませんでした。「showcase-thumbnail p」(現在の css には表示されていません) も試しましたが、求めている結果が得られませんでした。 .
さらに情報が必要な場合は、お尋ねください。提供できるよう最善を尽くします。
ありがとう！