0

デザインでは、さまざまなキャラクターのサムネイルを含む画像ギャラリーが必要です。サムネイルをロールオーバーすると、画像の拡大版が表示され、左側のdivに各キャラクターのヘッダーと説明が表示されます。

1）両方のdivをロールオーバー制御する方法はありますか？（拡大画像と説明）

と

2）これをcmsと同期させるにはどうすればよいですか？

読んでくれてありがとう ：）

4

3 に答える 3

1

最初にこれを試してみてください。使用しているcmsなどがわからないので、その部分に答える方法をnfiしてください：

HTML:

<a class="info" href="" onclick="return false;">
  <img src="thumb.jpg"/>
  <span><img src="large.jpg" /><br />
   description goes here</span>
</a>

CSS:

a.info              {z-index:24; position:relative; color:#999; font-size:11px; text-transform:none; font-weight:normal; text-decoration:none; border:1px solid #999; padding-left:3px; padding-right:3px; margin:5px;}
a.info:hover        {z-index:25; text-decoration:none; color:#333; border-color:#333;}
a.info span         {display:none; position:absolute; top:15px; left:15px; width:240px; color:#000; font-size:12px; background-color:#fff; padding:2px; border:1px solid #333;}
a.info:hover span   {display:block;}
于 2009-09-29T04:04:41.157 に答える
0

はい、トリガー要素の id タグにキャラクターに関する情報を格納します。ミッキーマウスだと言うように、id="mickey" はプロトタイプを使用している可能性があります...

$$('.trigger').each(function (el) {el.observe('mouseover',showInfo.bind(el);});

次に、関数 showInfo は、より大きな画像と情報を持つ div を表示します

function showInfo(ev) {
    // this refers to the element that has the mouse over, which has the descriptive id
    var infoContainerId = this.id+"_info";
    var imageContainerId = this.id+"_image";
    $(infoContainerId).show(); // showing the div id="mickey_info"
    $(imageContainerId).show(); // showing the div id="mickey_image"
}

ええと..ほんの一例です...

于 2009-09-29T04:03:00.733 に答える
0

jQuery を使用すると、これはテストされていませんが、次のようになります。

$('#myImageThumbnail').mouseenter(function(){

    //Set the description text
    $('#descriptionDiv').html('Insert character description here');

    //Enlarge the image
    $('#myImageThumbnail').attr('height','300');
    $('#myImageThumbnail').attr('width','200');
});

$('#myImageThumbnail').mouseleave(function(){

    //Remove the description text
    $('#descriptionDiv').html('');

    //Return image/thumbnail to original size
    $('#myImageThumbnail').attr('height','150');
    $('#myImageThumbnail').attr('width','100');
});

説明のためにデータベースから動的な情報を取得する必要がある場合は、jQuery の $.ajax 関数を見て、説明 HTML を戻り値に設定するだけです。

于 2009-09-29T04:05:03.957 に答える