0

この Wordpress サイト: http://www.2eenheid.de/cloud/には、メニュー付きのスライドショーがあります。ユーザーがメニュー項目にカーソルを合わせると、背景画像が付随する画像に変わります。ユーザーが画像をクリックすると、付随する画像にとどまります。また、ユーザーが (クリックせずに) 別のメニュー項目にカーソルを合わせると、付随する画像に戻ることになっています。

ある意味でこれを行いますが、ページに付随する画像ではなく、最後にホバーされた画像を記憶します。

要するに：

  1. ユーザーが「クラウド」をクリックすると、付随する画像に変わり、ホバーアウトしたままになります。
  2. ユーザーが「Webhosting」にカーソルを合わせてから「Unit4 multivers」にカーソルを合わせると、背景画像が「Webhosting」の付随する画像に戻ります。これが記憶されている最後の項目であるためです。
  3. ユーザーがこのページにいるため、付随する「雲」の画像に戻るはずです。

ここで私が何を間違えたのか誰にもわかりませんか？

ジャバスクリプト

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

            }, function () {
                $('.pikachoose').stop().fadeOut('slow', function () {
                    $(this).css({
                        'background-image': imgsrc
                    }).fadeTo('slow', 1);
                });

            });

        });
    </script>

HTML

            <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>
4

1 に答える 1

0

私が正しく理解していれば、問題は、ホバーによる変更の前ではなく、クリックの後に imgsrc の値を設定したいということだと思います。

于 2013-07-24T07:55:16.433 に答える