この Wordpress サイト: http://www.2eenheid.de/cloud/には、メニュー付きのスライドショーがあります。ユーザーがメニュー項目にカーソルを合わせると、背景画像が付随する画像に変わります。ユーザーが画像をクリックすると、付随する画像にとどまります。また、ユーザーが (クリックせずに) 別のメニュー項目にカーソルを合わせると、付随する画像に戻ることになっています。
ある意味でこれを行いますが、ページに付随する画像ではなく、最後にホバーされた画像を記憶します。
要するに:
- ユーザーが「クラウド」をクリックすると、付随する画像に変わり、ホバーアウトしたままになります。
- ユーザーが「Webhosting」にカーソルを合わせてから「Unit4 multivers」にカーソルを合わせると、背景画像が「Webhosting」の付随する画像に戻ります。これが記憶されている最後の項目であるためです。
- ユーザーがこのページにいるため、付随する「雲」の画像に戻るはずです。
ここで私が何を間違えたのか誰にもわかりませんか?
ジャバスクリプト
<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>