画像に画像を重ねる 画像にクラスをつける

Question

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
NetBeensでアルゴリズムのシステムを作っています。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

<li>
            <a><img src="resources/images/Title2.png"  
                onmouseover="this.src='resources/images/Play.png'"
                onmouseout="this.src='resources/images/Title2.png'"></img></a></li>

試したこと

画像の上に画像を重ね、その後にサイズを調整して縦に並べたい。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[Lhankor_Mhy]

具体的にお願いします。
『画像の上に画像を重ね』とのことですが、下の画像は隠れてよろしいのでしょうか？
『サイズを調整して』とは具体的にはどのような調整をしたいのですか？
『その後に……縦に並べたい』とのことですが、この「後」とは時間的な「後」ですか？　そうであるなら何秒後でしょうか？　それとも位置的な「後」、つまり「下」に配置するという意味ですか？

[mennderu]

画像を重ねてから、下の画像は隠れないように調整したいです。
画像を重ねた後に下の画像が隠れないようにしたあと、
縦に項目の様に並べたいです。

[Lhankor_Mhy]

『画像を重ねてから、下の画像は隠れないように調整したい』とのことですが、もう少し具体的に例を挙げるなどはできますか？

『画像を重ねた後に下の画像が隠れないようにしたあと、縦に項目の様に並べたい』とはつまり、こういうことですか？

1. A画像を配置
2. B画像をA画像の上に配置
3. B画像のサイズをA画像が隠れないように調整
4. C画像を配置
5. D画像をC画像の上に配置
6. D画像のサイズをC画像が隠れないように調整
7. A+BセットとC+Dセットを縦に並べる

[mennderu]

説明がうまくできず、すみません。
そうです！そういう感じのことがしたいです！

[Lhankor_Mhy]

『下の画像は隠れないように』というのは、下の画像が上の画像の透明部分以外と被らないように、という意味ですか？

[mennderu]

jqueryでフェードインとフェードアウトの間に画像を３つ、挿入したいです。

[mennderu]

いま、このコードで書いてます
$(function(){
$(".image1").hover(function(){
$(this).fadeOut(1000);
},function(){
$(this).fadeIn(1000);
});
});

$(function(){
$(".image2").hover(function(){
$(this).fadeOut(1000);
},function(){
$(this).fadeIn(1000);
});
});

[Lhankor_Mhy]

『画像を重ねた後に下の画像が隠れないように』というのは、フェードイン・フェードアウトのことなのですか？

[mennderu]

はい！

Answer 1

こういうことですか？

<ul>
  <li>
    <img class="image1" src="http://placehold.jp/150x150.png?text=image1">
    <img class="image2" src="http://placehold.jp/150x150.png?text=image2">
  </li>
  <li>
    <img class="image1" src="http://placehold.jp/150x150.png?text=image1">
    <img class="image2" src="http://placehold.jp/150x150.png?text=image2">
  </li>
  <li>
    <img class="image1" src="http://placehold.jp/150x150.png?text=image1">
    <img class="image2" src="http://placehold.jp/150x150.png?text=image2">
  </li>
</ul>

li{
  position:relative;
}
.image1{
  position:absolute;
}

サンプル

補足欄でご提示されたクロスフェード？のスクリプトをそのまま使っていますが、これはちょっとおかしいと思うので、修正してくださいね。

Comments

[mennderu]

ありがとうございました！