画像にマウスを乗せた時のJava Script設定

解決済

質問者：kittan02
質問日時：2014/01/13 02:23
回答数：2件

閲覧有難うございます。
XHTML 1.0 Transitionalを使っています。
下の画像の様に写真を配置して「a:hover」した時に画像が隣で拡大表示される様にしてみたいです。
たんに拡大表示されるよりもサンプル画像を見せる場合はこちらの方が良いかと思ったのですがやり方が解らず困っています＞＜

下記のページを参考にしようと思ったのですが文字化けして解りません。
http://www.naima.jp/?pid=61730701

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： ORUKA1951
回答日時：2014/01/14 14:47

　HTMLはHyper Text Markup Languageの略で、文書をそれを構成する要素に分解して、それぞれがどのような要素であるかをマークアップする言語です。

<h1>ここは見出し(heading)</h1><p>ここは段落(paragraph)</p>とね。いっぽう、スタイルシートは、それをどのようにプレゼンテーションするかを指定するものです。スタイルシートのひとつがCSS(カスケーディングスタイルシート)。
　文書構造と、それをどのように表現するかは別個の物です。<h1>見出し</h1>と書いたら大きな文字で表示されるのは、ブラウザ自身が初めから持っているスタイルシートに由来するだけです。
　それが、HTMLでいうところの「構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」です。

　transitinalでなくstrictを薦めるのは、HTMLを書くのがとっても楽で、かつデザインが自由に出来るからです。

　実際の物を見ないと理解しがたいと思いますので、サンプルを上げておきます。HTMLさえ、きちんと文書構造に基づいてマークアップされていたら、スタイルシートでどのようにもなる実例です。

★./imagesホルダーに480×360pxの01.jpg,02.jpg,03.jpg,04.jpgを用意する。
　./images/thumbnailフォルダーに80×60pxの01.jpg,02.jpg,03.jpg,04.jpgサムネイルを用意する。

★HTML4.01strict + CSS2.1です。
★タブは＿に置換してあるので戻す。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
＿<title>サンプル</title>
＿<meta name="author" content="ORUKA1951">
＿<meta http-equiv="Content-Style-Type" content="text/css">
＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" >
＿<link rel="START" href="../index.html">
＿<style type="text/css">

＿</style>
</head>
<body>
＿<div class="header">
＿＿<h1>タイトル</h1>
＿＿<p>このページでは・・・・</p>
＿</div>
＿<div class="section">
＿＿<h2>順不同リストとしてマークアップされている</h2>
＿＿<ul>
＿＿＿<li><img src="./images/thumbnail/02.jpg" width="80" height="60" alt="">
＿＿＿＿<p><img src="./images/02.jpg" width="480" height="360" alt=""></p>
＿＿＿</li>
＿＿＿<li><img src="./images/thumbnail/03.jpg" width="80" height="60" alt="">
＿＿＿＿<p><img src="./images/03.jpg" width="480" height="360" alt=""></p>
＿＿＿</li>
＿＿＿<li><img src="./images/thumbnail/04.jpg" width="80" height="60" alt="">
＿＿＿＿<p><img src="./images/04.jpg" width="480" height="360" alt=""></p>
＿＿＿</li>
＿＿</ul>
＿＿<h2>定義リストとしてマークアップされている</h2>
＿＿<dl>
＿＿＿<dt><img src="./images/thumbnail/02.jpg" width="80" height="60" alt=""></dt>
＿＿＿<dd><img src="./images/02.jpg" width="480" height="360" alt=""></dd>
＿＿＿<dt><img src="./images/thumbnail/03.jpg" width="80" height="60" alt=""></dt>
＿＿＿<dd><img src="./images/03.jpg" width="480" height="360" alt=""></dd>
＿＿＿<dt><img src="./images/thumbnail/04.jpg" width="80" height="60" alt=""></dt>
＿＿＿<dd><img src="./images/04.jpg" width="480" height="360" alt=""></dd>
＿＿</dl>
＿＿<h2>単にdivで囲んであるだけ</h2>
＿＿<div class="section">
＿＿＿<h3><img src="./images/thumbnail/02.jpg" width="80" height="60" alt=""></h3>
＿＿＿<p><img src="./images/02.jpg" width="480" height="360" alt=""></p>
＿＿＿<h3><img src="./images/thumbnail/03.jpg" width="80" height="60" alt=""></h3>
＿＿＿<p><img src="./images/03.jpg" width="480" height="360" alt=""></p>
＿＿＿<h3><img src="./images/thumbnail/04.jpg" width="80" height="60" alt=""></h3>
＿＿＿<p><img src="./images/04.jpg" width="480" height="360" alt=""></p>
＿＿</div>
＿</div>
＿<div class="footer">
＿＿<h2>文書情報</h2>
＿＿<dl class="documentHistry">
＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt>
＿＿＿<dd>2012-08-10</dd>
＿＿</dl>
＿＿<address>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address>
＿</div>
</body>
</html>

- 0
- 件

通報する

No.1

回答者： ORUKA1951
回答日時：2014/01/13 12:12

スタイルシートを使うほうが楽ですね。

例えば、HTMLがきちんと・・
<ul>
　<li><img src="" width="" height="" alt="">
　　<p><img src="" width="" height="" alt=""></p>
　</li>
　<li><img src="" width="" height="" alt="">
　　<p><img src="" width="" height="" alt=""></p>
　</li>　<li><img src="" width="" height="" alt="">
　　<p><img src="" width="" height="" alt=""></p>
　</li>
</ul>
とか、
<dl>
　<dt><img src="" width="" height="" alt=""></dt>
　<dd><img src="" width="" height="" alt=""></dd>
　<dt><img src="" width="" height="" alt=""></dt>
　<dd><img src="" width="" height="" alt=""></dd>
　<dt><img src="" width="" height="" alt=""></dt>
　<dd><img src="" width="" height="" alt=""></dd>
</dl>
とか
<div class="albam">
　<h3><img src="" width="" height="" alt=""></h3>
　<p><img src="" width="" height="" alt=""></p>
　<h3><img src="" width="" height="" alt=""></h3>
　<p><img src="" width="" height="" alt=""></p>
</div>
とかマークアップされていても良いですしね。

＞XHTML 1.0 Transitionalを使っています。
　いくらなんでもtransitinalは卒業しましょう。ブラウザ間の表示差に悩まされますし、XHTML1.1以降はtransitinalは無いです。HTML5にも無い。
1999年:「HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」
スタイルシートを用いることで、「文書の構造をプレゼンテーションと切り離すことで広汎なプラットフォームや多様なメディアでの文書提供コストを低下でき、文書の改訂も容易になる( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」

この回答への補足

ORUKA1951さん回答有難うございます。
少し解らない事があります。無知な質問が多くてスミマセンm(__)m

スタイルシートとはCSSの事でしょうか？
＞例えば、HTMLがきちんと・・していればって事ですよね？
上記の書き方だと<ul><li>とかのタグをCSSに記述するように思えるのですが？

マークアップとは<div>で括る事を言っておられるのでしょうか？

その他ご指摘ありがとうございます。まだまだ初心者なので徐々に勉強していきたいと思います。

補足日時：2014/01/13 23:48

通報する