web-dev-qa-db-ja.com

Webページ上で画像を重ねることはできますか？

私は、さまざまなアクセサリーをクリックしてそれらが互いに重ねられる「ドレスアップ」ゲームであるWebサイトを構築したいと考えています。

説明するのが少し難しいので、私が何をしようとしているのかをうまく説明できるこれらの例を見つけました：

私は現在、何百もの異なるアクセサリーを画像として持っています。（上記のゲームと同様に）複数を選択できるようにする必要があります。だから私は王女の上にアクセサリーの組み合わせのすべての浸透の画像を事前に保存することを必要としないソリューションが必要です（それは何百万もの事前定義された画像になるでしょう）。

理想的には、Javascript/jQueryまたはCSSソリューションが欲しいのですが、人々の提案を取り入れます。 Flashの提案も役立ちます。

だから私の質問は：

  • 上記のサンプルのウェブサイトは、すべての画像を互いに上に並べているのですか？それを実行しているCSSまたはJavaScriptコードを見つけることができないようです。
  • このタイプのWebサイトを構築する方法について何か提案はありますか（リンク、チュートリアル、コード例はすばらしいでしょう）。
jqueryhtmlcssflashimage
12
leora

短い答えはイエスです。

これを処理する方法はたくさんあります。 HTML/CSSを使用すると、要素を簡単に重ね合わせることができます。

HTML：

<img id="imga" src="img1.png"/>
<img id="imgb" src="img2.png"/>
<img id="imgc" src="img3.png"/>

CSS：

img
{
    position:absolute;
    top: 0px;
    left: 0px;
}

それでは、ここで重要なことを見てみましょう。 HTMLドキュメントに3つの画像（imga、imgb、imgc）があります。これらをオーバーレイするには、まずpositionをabsoluteに設定して、画像がデフォルトのレイアウト動作を無視するようにする必要があります。次に、leftおよびtopプロパティを使用して、img要素のx、y座標をそれぞれ定義できます。上記の例では、すべての要素がページの左上隅にオーバーレイされています。どの画像を上に配置するかを制御するには、次のようにz-indexプロパティを使用できます。

#imga
{
z-index: 10;
}

#imgb
{
z-index: 20;
}

#imgc
{
z-index: 30;
}

これにより、imgcが前に表示され、imgbがimgcの後ろに表示され、imgaが他のすべての後ろに表示されます。 z-indexプロパティは、どの要素が他の要素の前に来るかを割り当てます。最大の要素z-indexが一番上になり、次に2番目に大きい要素が続きます。

あなたのプロジェクトのために、上のコードを少し調整することができます：

[〜＃〜] html [〜＃〜]

<img id="layer1" src="img1.png"/>
<img id="layer2" src="img2.png"/>
<img id="layer3" src="img3.png"/>

[〜＃〜] css [〜＃〜]

img
{
position:absolute;
top: 0px;
left: 0px;
}
#layer1
{
   z-index: 10;
}
#layer2
{
z-index: 20;
}

#layer3
{
z-index: 30;
}

これで何がどこにあるのか理解できたので、layer3が一番上（アクセサリーレイヤー）にあり、layer2が真ん中（ユーザー）にあることがわかります。そしてlayer1は下（背景）にあります。次に、次のようなアクセサリを作成できます。

<img src="accessory1.png" onClick="setAccessory('accessory1.png');"/>

そして、JavaScriptを使用して、最初のレイヤーのsrcを、クリックされたアクセサリのsrcと同じに設定できます。

function setAccessory(path){
     document.getElementById('layer1').src = path;
     //if you're using jQuery, $("#layer1").attr("src", path);
}

アクセサリはいくつでも作成できます。たとえば、人の上にアクセサリを追加したい場合は、簡単にレイヤを作成し、Zインデックスを割り当てることができます（さらに、JavaScriptを使用してこれを動的に行うこともできます）。

結論として、この小さなチュートリアルがお役に立てば幸いです。目的のために、jQueryと要素を確認することをお勧めします。彼らは使うのが楽しく、確かにあなたのアプリケーションを助けます。

あなたのアプリケーションに幸運を。

58
Kevin Wang

Position：absoluteの組み合わせを使用して、上と左の位置を定義し、上に表示する項目を制御するZインデックスを使用する必要があります。

6
Jason Miesionczek

より少ないコードを必要とするソリューションを探しているなら、これを試してください：

  1. Photoshopでアートを作成し、各アクセサリーを異なるレイヤーに配置します
  2. 各レイヤーを個別の画像として保存します。すべての画像を完全なキャンバスサイズにし、透明度を使用してください。 PNG-24として保存します。このように、各アクセサリの位置は画像内で「ハードコード」されるため、コードで処理する必要はありません。
  3. コンテナを作成する<div>、それを与えるposition: relative;。
  4. その中にすべての画像を入れてください<div>、 なので <img>タグ、正しい順序で（レイヤーをスタックし、背景画像を最初に）
  5. 適用position: absolute;毎<img>。

これで始められるはずです。次に、jQueryを使用して、各画像を表すボタンがクリックされたときに各画像を切り替えます。

6
bfavaretto

JQueryアニメーションを使用すると、「ドラッグ可能な」画像を作成できます。現在のマウスの位置に基づいて画像をX水平およびY垂直ピクセルに移動する関数を開始するonmousedownイベントを画像に与えます。このリンクをチェックして、jQueryでマウスの場所を見つける方法を確認してください。 http://docs.jquery.com/Tutorials:Mouse_Position

あるいは、jQuery UIの「ドロップ可能な」プラグインを入手して、任意の要素にドラッグアンドドロップ機能を簡単に追加できます。 http://jqueryui.com/demos/droppable/

2
Joshua Welker

CSS3は 複数の背景レイヤー をサポートします

#example1 {
  width: 500px;
  height: 250px;
  background-image: url(sheep.png), url(betweengrassandsky.png);
  background-position: center bottom, left top;
  background-repeat: no-repeat;
}
2
AlienWebguy

<canvas> タグとAPI。

これにより、アイテムや画像を簡単に完全に配置できます。また、新しいブラウザーを使用している場合は、ハードウェアアクセラレーションのメリットが得られ、全体のスピードが向上します。

IEの下位互換性のために、Googleの Explorer Canvas JavaScriptプラグインを使用する必要があります。

2
Alastair Pitts

Cssプロパティの組み合わせを使用すると、目的を達成できます。

アクセサリを正しい場所に配置するには、位置を絶対位置に設定し、絶対座標を使用して位置を指定できます。

それらを表示する順序を設定するには、z-indexプロパティを使用してそれらを「スタック」できます。

チェックアウト：

http://www.html.net/tutorials/css/lesson15.php

それに関するいくつかの詳細情報については。

1
Michael Shimmins