画像にマウスを重ねると大きな画像を表示したい

質問

illustratorでスライスを作製し、画像を生成しました。
1000×1076のサイズで32個の画像で構成されるスライスになっています。

そのスライスの一部の画像にマウスオーバーするとスライス全体の
1000×1076と同じサイズの背景透明画像を上に表示したいのです。

よくあるボタンのマウスオーバーなどでやると元画像のまわりに画像がある想定ではないためか、マウスオーバーするとスライスが崩れてしまいます。

本来Flashなどでやるようなことと思いますが、
iPadでも見たいためCSSやJavascriptで実現したいと思います。

よろしくお願い致します。

回答No.1

ORUKA1951

そもそもスライスする必要もないのでは？？
プログラムに頼るとへんな物ができてしまう。「HTMLでページを作らずにプログラムに頼る。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )」
HTMLはあくまで文書構造しか書かない。プレゼンテーションはスタイルシートで行いましょう。

例えば、ある風景の説明だとするとHTMLは本来こんな構造のはずですね。
<div class="figure">
　<img src="" width="" height="" alt="">
　<div class="figcaption">
　　<ol>
　　　<li><a href="./photo/abc.jpg"><img src="" width="" height="" alt=""></a></li>
　　　・・・・
　　</ol>
　</div>
</div>
HTML5でしたら
<figure>
　<img src="" width="" height="" alt="">
　<figcaption>
　　<ol>
　　　<li><a href="./photo/abc.jpg"><img src="サムネイル" width="" height="" alt=""></a></li>
　　　・・・・
　　</ol>
　</figcaption>
</figure>

あるいは、単純に
<div class="albam">
　<p><img src="" width="" height="" alt=""></p>
　<ol>
　　<li>目<img src="サムネイル" width="" height="" alt=""></li>
・・・かもしれない。
★あるいは単なるナビゲーションでしたら・・
<div class="nav">
　<ol>
　　<li><a href=""></a></li>
　　<li><a href=""></a></li>
(HTMLだと)
<nav>
　<ol>
　　<li><a href=""></a></li>
かもしれません。良く使われるのはこれですが・・

　スタイルシートも何もない。文書の改訂や検索エンジンにわかるように文書構造だけをHTMLに書けば良い。それがスタイルシートを導入する最大の利点「構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )」なのですから。

心配なのは
＞そのスライスの一部の画像にマウスオーバーするとスライス全体の1000×1076と同じサイズの背景透明画像を上に表示したいのです。
　これって扱い難くないですか？
・その位置に達するまでに経由する他の区画の画像がかぶさってしまう。
・スライスした小さな画像を拡大すると画質が悪い
・ページ読み込みの際にランダムにバラバラに表示されてしまう。
・印刷への対応が出来ない

　どのような内容・文書構造か分かりませんがプレゼンテーションはリストなどから選択なりマウスオーバーして画像を変えるほうが良いと思います。

　まず、それを実現するために、デザインは一切考えずにHTMLを書いて見ましょう。