2

わかりましたので、スライダーの各写真にリンクを追加しようとしています。私は他の2つのWebサイトでそれを行いましたが、アンカータグを追加すると、このコーディングは他の2つとは異なります.

<a href="http://www.google.com

HTML テンプレートのさまざまな部分に配置しようとしましたが、機能しないため、ここに私のコーディングを示します。私が見逃しているのはおそらく単純なものだと思いますか？

<div class="pad-slider">
        <div class="main-slider">
            <ul class="items">
                <li>
                    <img src="images/slide1.jpg" alt="" />
                    <div class="slider-banner"><span>The Next Level of Your Success</span></div>
                </li>
                <li>
                    <img src="images/slide2.jpg" alt="" />
                    <div class="slider-banner"><span>We offer Different Ways of Problem Solving</span></div>
                </li>
                <li>
                    <img src="images/slide3.jpg" alt="" />
                    <div class="slider-banner"><span>We craft practical solutions</span></div>
                </li>
            </ul>
        </div>
    </div>

さらに情報が必要な場合はお知らせください。ホームページでライブで見られるスライダーで使用しているテンプレート Web サイトは次のとおりです。リンク

4

2 に答える 2

3

使用している特定のjQueryスライダーの名前はTMSlider0.4.1であり、HTMLを正しく設定すると、SPANテキストをリンクにすることができます。

divまた、実際の画像をリンク（上記のリンクと同じまたは異なる場合があります）にする場合は、CSSを追加してその機能を実現します。

jsFiddleデモ

HTMLセクション：

<div class="pad-slider">
    <div class="main-slider">
        <ul class="items">
            <li>
              <img src="http://img186.imageshack.us/img186/1866/halo3wallpaper1024copy9yf1.jpg" alt="" />
              <div class="slider-banner">
                <div class="imageLink" title="Click here to open Google IMAGES website." onclick="window.open('http://images.google.com/'); return true;"></div>
                <a href="http://www.google.com">
                  <span>Click here to open Google MAIN website.</span>
                </a>
              </div>
            </li>
            <li>
              <img src="http://img91.imageshack.us/img91/6278/telagawarnalakewallpapew.jpg" alt="" />
              <div class="slider-banner">
                <div class="imageLink" title="Click here to open Bing IMAGES website."  onclick="window.open('www.bing.com/images/'); return true;"></div>
                <a href="http://www.bing.com">
                  <span>Click here to open Bing MAIN website.</span>
                </a>
              </div>
            </li>
            <li>
              <img src="http://img393.imageshack.us/img393/9093/sky04jr4.jpg" alt="" />
              <div class="slider-banner">
                <div class="imageLink" title="Click here to open AltaVista IMAGES website"  onclick="window.open('http://images.search.yahoo.com/'); return true;"></div>
                  <a href="http://us.altavista.com/">
                    <span>Click here to open AltaVista MAIN website.</span>
                  </a>
                </div>
            </li>
        </ul>
    </div>
</div>

CSSセクション：

.imageLink {
  width: 950px;
  height: 440px;
  margin-top: -440px;
  cursor: pointer;
}

追加されたCSSの幅と高さを調整して、スライダーのサイズと一致するようにします。ただし、に負の値を使用する場合を除きますmargin-top。

代替リンク形式：クリックされた画像で別のタブ/ウィンドウを開かないようにする場合は、onclickイベントにこの構文を使用して、同じブラウザウィンドウを使用します。

onclick="window.location.href = 'http://www.bing.com/images/'; return true;"
于 2012-12-09T03:50:19.480 に答える
0

古い質問ですが、同じ問題を解決しようとしている他の人に役立つかもしれません。

li タグ内にリンクを追加するだけです。

<li>
 <img src="banner.jpg" border="0" alt=""/>
 <div class="banner"> </div><a href="http://www.google.com" class="banner"></a>
</li>

css 内に以下を追加します。

a.banner {width:100%; height:100%; position:absolute}

ソース: http://www.youtube.com/watch?v=0CyCyJkOD9Q&noredirect=1

于 2013-10-25T05:28:06.717 に答える