0

この Wordpress サイト www.2eenheid.de でスライドショーをプログラムしました。Support / Beheer、Implementatie、Cloud などのスライドショーのメニューにカーソルを合わせると、別の背景画像が表示されます。メニュー項目をクリックすると、背景も変更され、その画像にとどまります。ただし、メニュー項目に再度カーソルを合わせると、最後にホバーした画像にとどまります。

これを行うことになっています：

  1. ユーザーがメニュー項目を選択すると、背景画像が変更されます
  2. メニュー項目をクリックすると、同じ背景画像のままです
  3. ユーザーが別のメニュー項目にカーソルを合わせると、別の画像に移動します
  4. ホバーアウトすると、背景画像が選択したページの画像に戻ります。

これはJavaScriptです：

<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/script/jquery-1.6.2.min.js"></script>

    <script type="text/javascript">
    $(function(){
     $('ul.slideshow-menu').find('a').fadeTo('slow', 1);
     $('ul.slideshow-menu').find('a').hover(function(){
      $(this).fadeTo('slow', 1);
      $('.pikachoose').css({ 'background-image' : 'url('+$(this).attr('src')+')' });
     }, function(){
      $(this).fadeTo('slow', 1);
     });
    });
    </script>

HTML:

            <div class="slideshow">
            <div class="pika-wrapper">
                    <div class="pikachoose <?php if (is_page('cloud')) { echo "cloudclass"; }?><?php if (is_page('implementatie')) { echo "implementatieclass"; }?><?php if (is_page('webhosting-en-hosting')) { echo "hostingclass"; }?><?php if (is_page('unit4-multivers')) { echo "unitclass"; }?><?php if (is_page('over-2eenheid')) { echo "overclass"; }?><?php if (is_page('algemene-voorwaarden')) { echo "voorwaardenclass"; }?><?php if (is_page('vacature')) { echo "vacatureclass"; }?><?php if (is_page('contact')) { echo "contactclass"; }?><?php if (is_page('supportenbeheer')) { echo "supportclass"; }?><?php if (is_page('home')) { echo "homeclass"; }?><?php if (is_page('testimonials')) { echo "testimonialsclass"; }?>">
                    <ul id="pikame" class="jcarousel-skin-pika">

                    </ul>
            </div>          

            <div class="slideshow-menu-wrapper">
            <div class="support-button"><a href="http://www.2eenheid.nl/tmv/tmv.exe" title="Remote support"><img src="<?php bloginfo('template_directory'); ?>/images/supportbutton.png" /></a></div><!-- supportbutton -->
            <div id="slideshow-main">
                    <ul class="slideshow-menu">
                        <li class="<?php if (is_page('supportenbeheer')) { echo "current_page_item"; }?>"><a title="Support / Beheer" href="/supportenbeheer" src="<?php bloginfo('template_directory'); ?>/images/slideshow/slideshow-4.jpg"><img src="<?php bloginfo('template_directory'); ?>/images/slideshow/slideshow-4.jpg" alt="2Eenheid"/><span>Support / Beheer</span></a></li>
                        <li class="<?php if (is_page('implementatie')) { echo "current_page_item"; }?>"><a href="/implementatie" src="<?php bloginfo('template_directory'); ?>/images/slideshow/slideshow-5.jpg"><img src="<?php bloginfo('template_directory'); ?>/images/slideshow/slideshow-5.jpg" alt="2Eenheid"/><span>Implementatie</span></a></li>
                        <li class="<?php if (is_page('cloud')) { echo "current_page_item"; }?>"><a href="/cloud" src="<?php bloginfo('template_directory'); ?>/images/slideshow/slideshow-11.jpg"><img src="<?php bloginfo('template_directory'); ?>/images/slideshow/slideshow-11.jpg" alt="2Eenheid"/><span>Cloud</span></a></li>
                        <li class="<?php if (is_page('webhosting-en-hosting')) { echo "current_page_item"; }?>"><a href="/webhosting-en-hosting" src="<?php bloginfo('template_directory'); ?>/images/slideshow/slideshow-8.jpg"><img src="<?php bloginfo('template_directory'); ?>/images/slideshow/slideshow-8.jpg" alt="2Eenheid"/><span>Webhosting / Hosting</span></a></li>
                        <li class="<?php if (is_page('unit4-multivers')) { echo "current_page_item"; }?>"><a href="/unit4-multivers" src="<?php bloginfo('template_directory'); ?>/images/slideshow/slideshow-2.jpg"><img src="<?php bloginfo('template_directory'); ?>/images/slideshow/slideshow-2.jpg" alt="2Eenheid"/><span>Unit4 Multivers</span></a></li>
                    </ul>
                </div>      
            </div>              
            </div>
            </div>

ここで私が間違っていることは誰にも分かりますか?

4

1 に答える 1

0

要素をホバーすると、ホバーした要素に関連する画像に背景が設定されます。

ホバーを終了しても、画像をホバー前の状態に戻すことはありません。

編集:コードサンプルを追加しますが、テストされていませんが、アイデアが得られるはずです:

var imgsrc = '';
$('ul.slideshow-menu').find('a').hover(function(){
 imgsrc = $('.pikachoose').css('background-image');
  $(this).fadeTo('slow', 1);
  $('.pikachoose').css({ 'background-image' : 'url('+$(this).attr('src')+')' });
 }, function(){
  $(this).fadeTo('slow', 1);
  $('.pikachoose').css({ 'background-image' : 'url('+imgsrc+')' });
 });
于 2013-07-19T14:27:03.987 に答える