0

私は自分のサイトに問題があります。kirandarren.comで作業しています。サイトにあるアイコンは、ボタンであることを示すためにホバー時になんらかの画像を入れ替えたり、ロールオーバーしたりしたいと考えています。最初はdreamweaverでロールオーバーイメージスワップを試してみましたが、うまくいきましたが、fancyboxを実装するとすぐにロールオーバーイメージスワップと衝突するようです。何か案は？

正しい方向への支援をいただければ幸いです。私は結婚式のサイトを正しい方向に完成させようとしているだけの初心者です。お早めにどうぞ！以下に正しいコードを添付していただければ幸いです。

<body onload="MM_preloadImages('images/our_story_rollover.png','images/directions_rollover.png','images/bridal_party_rollover.png','images/chicago_spots_rollover.png','images/registry_rollover.png')">

2013 年 10 月 13 日夕方 5 時にご参加ください

セレモニーは5:30に始まります | カクテルアワーとレセプション

 

<p align="center">

<a class="fancybox fancybox.iframe" href="http://player.vimeo.com/video/58303552"><img src="images/our_story_off.png" name="our_story" width="206" height="210" hspace="14" vspace="0" border="0" id="our_story" /></a>
4

1 に答える 1

1

iframe は常にさまざまなブラウザーと競合し、解決策よりも多くの問題を引き起こす可能性があるため、使用しないでください。

画像がボタンであることを示したいとおっしゃいましたが、これがリンクまたはボタンであることをユーザーに知らせるために、IMG タグで onmouseover と onmouseout を使用することをお勧めします。カスタムjQueryまたはjavascriptを使用して、必要に応じてアニメーションまたはトランジションを提供します。例えば

<script>
function bigImg(x)
{
x.style.height="64px";
x.style.width="64px";
}

function normalImg(x)
{
x.style.height="32px";
x.style.width="32px";
}
</script>
</head>
<body>

<img onmouseover="bigImg(this)" onmouseout="normalImg(this)" border="0" src="smiley.gif" alt="Smiley" width="32" height="32">

<p>The function bigImg() is triggered when the user moves the mouse pointer over the image.</p>
<p>The function normalImg() is triggered when the mouse pointer is moved out of the image.</p>

</body>
</html>

ヒント: 見栄えの良いボタンを作成するには、box-shadow (作成するスクリプトの css プロパティ) を使用します。

于 2013-02-01T05:12:01.933 に答える