- ベストアンサー
画像にマウスを乗せた時のJava Script設定
閲覧有難うございます。 XHTML 1.0 Transitionalを使っています。 下の画像の様に写真を配置して「a:hover」した時に画像が隣で拡大表示される様にしてみたいです。 たんに拡大表示されるよりもサンプル画像を見せる場合はこちらの方が良いかと思ったのですがやり方が解らず困っています＞＜ 下記のページを参考にしようと思ったのですが文字化けして解りません。 http://www.naima.jp/?pid=61730701
- kittan02
- お礼率72% (8/11)
- JavaScript
- 回答数2
- ありがとう数6
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
HTMLはHyper Text Markup Languageの略で、文書をそれを構成する要素に分解して、それぞれがどのような要素であるかをマークアップする言語です。 <h1>ここは見出し(heading)</h1><p>ここは段落(paragraph)</p>とね。いっぽう、スタイルシートは、それをどのようにプレゼンテーションするかを指定するものです。スタイルシートのひとつがCSS(カスケーディングスタイルシート)。 文書構造と、それをどのように表現するかは別個の物です。<h1>見出し</h1>と書いたら大きな文字で表示されるのは、ブラウザ自身が初めから持っているスタイルシートに由来するだけです。 それが、HTMLでいうところの「構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4 )」です。 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"> <!-- div.section ul,div.section dl{list-style-type:none;} div.section ul,div.section ul li, div.section dl,div.section dl dt, div.section dl dd,div.section h3, div.section p{ margin:0;padding:0; } div.section ul,div.section dl, div.section div.section{ width:600px;height:380px; border:solid 1px gray; margin:10px auto; position:relative; background:url(./images/01.jpg) 10px 10px no-repeat; } div.section ul li, div.section dl dt, div.section h3{ width:100px;margin:10px 5px 10px 500px;; } div.section ul li p, div.section dl dt+dd, div.section div.section h3+p{ display:none;position:absolute; top:10px;left:10px; } div.section ul li:hover p, div.section dl dt:hover+dd, div.section div.section h3:hover+p{ display:block; } --> ＿</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>
その他の回答 (1)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
スタイルシートを使うほうが楽ですね。 例えば、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-html401j/conform.html#h-4.1 )」 スタイルシートを用いることで、「文書の構造をプレゼンテーションと切り離すことで広汎なプラットフォームや多様なメディアでの文書提供コストを低下でき、文書の改訂も容易になる( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )」
関連するQ&A
- DOCTYPE宣言を変更するとjavaが機能しない
ミスティーネットさんの「JavaScript 活用編 ポップアップメニューの表示」 の サンプルを使ってみたのですが、 http://java.misty.ne.jp/popup_menu.html DOCTYPE宣言を <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> に変更すると、ポップアップが固定となり、同じところにしか表示されなくなります。 該当ページのサンプルは、XHTMLでは機能しないのでしょうか。 それとも、javascriptの記述をどこか変更すれば動くようになるのでしょうか。 詳しい方がおられましたら教えていただきたいのですが、よろしくお願いいたします。
- ベストアンサー
- JavaScript
- サムネイル画像にマウスオーバーすると拡大表示するプログラムについて。
下記のように指定した場所に拡大表示をすることはできます。 http://www.alan1.net/jp/hawaii/oahu/sg/106/ag/5641/ この拡大表示される画像に角度をつけることはできますか？ 例えばポラロイド写真のような枠がすこしななめに貼付けてあるような感じにしてあって、そこに画像を拡大表示させたいのです。 できるでしょうか？ よろしくお願い致します。
- ベストアンサー
- JavaScript
- ページ上下余白0ピクセルに設定したが
はじめまして、まったくの初心者でございますが、 ページ上下余白0ピクセルに設定したが、下記を記載するとIE9では、上下に余白が出来てしまうのですが、下記を記載した状態で余白なしで表示する方法は、ありますでしょうか、 又、下記は何の為のものでしょうか、下記記載しなかった場合は、何か不都合があるのでしょうか、 宜しくお願いします。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- 締切済み
- その他([技術者向] コンピューター)
- マウスオーバーして画像を入れ替えたい
YahooのジオシティーズでHPを作成していますが、教えていただきたいことが２つあります。 １.javaスクリプトを使ってマウスオーバー、マウスアウトした時に写真を入替えたいと思っていますが、全くの初心者でどこにタグを入れていいのかわかりません。 どなたか下記ＵＲＬのページの写真(1)にマウスオーバーした場合に写真(2)に変わり、マウスアウトすると写真(1)に戻るよう、下記URLのソースをすぐに使えるように手直ししていただけませんか？http://sky.geocities.jp/hokuto5131/test.html ２．Yahooのジオシティーズでマウスオーバーして画像を入替えるHPを見てみると、入替える画像のURLはimg.1のようになっていますが、私がYahooのジオシティーズに画像データを送ると上記のURLのソースのように『http://sky.geocities.jp/hokuto5131/～』になってしまいます。なぜでしょうか？またそのページに貼り付けていない画像データをどうやってYahooのジオシティーズのサーバーに送るのでしょうか？ 以上よろしくお願いします。
- ベストアンサー
- ホームページ作成ソフト
- 画像の拡大とボタンについて
初めまして。 過去ログで該当するものがなかったので、質問させて頂きます。 「拡大画像01」と拡大画像01を縮小した「縮小画像01」をページに 配置し、縮小画像01をクリックすることで、ページ中央に拡大画像01 を表示したいと思っております。画像は全部で20枚以上あります。 さらにボタンをふたつ配置し「NEXT」「PREVIEW」として、クリック するごとに連番の順序通りに拡大画像を表示させたいのですが、こん なことはJava Scriptでできるものなのでしょうか？ 分りづらい質問で申し訳ありません。どなたかご存じの方がいらっしゃ いましたら、ご教授頂ければ幸いです。よろしくお願い致します。
- ベストアンサー
- JavaScript
- サムネイルをクリックすると画像が拡大表示されるようにするには？
下記のページの「SAMPLE」を、サムネイルをクリックすると、選択した画像が真ん中の段の陰付き白枠の中に拡大表示されるようにしたいです。 インラインフレームは使いたくないのでJavaScriptでできないかと思っています。 ちなみに当方はJavaScript初心者です。 白枠はcssで#subcon2というボックスの背景に設定しています。 画像については、サムネイルの画像はs01.jpg、s02.jpg・・・という名前で、拡大表示用の画像はサムネイルの名前からsを取って、01.jpg、02.jpg・・・と、名前を付けて、このhtmlと同じ階層にある「images」フォルダの中の「sample_nail」フォルダに入ってます。 この情報で足りますか？ どのようにすればいいでしょうか？よろしくお願い致します。 http://www.ac.auone-net.jp/~mrs/sample.html
- ベストアンサー
- JavaScript
- ie6で画像のpaddingを表示させたい
seesaaブログユーザーです。 seesaaはxhtmlで記述しているようでソースの先頭は 1:<?xml version="1.0" encoding="Shift_JIS"?> 2:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> (1:は一行目, 2:は二行目であることを表しています) のようになっています。 これを 1:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> もしくは 1:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2:<?xml version="1.0" encoding="Shift_JIS"?> としても問題ないのでしょうか？ と、質問させていただいた理由は 画像に枠をつけたいと思って、cssでimgにpaddingを指定したのですが ie6では表示されないのでこれを何とかしたいからです。 http://www.koikikukan.com/archives/2006/03/11-015552.php の記事を参照してわかったのですが、 この状態ですと画像のpaddingがie6では適用できないのですね。 そこで、記事にあるようにdoctype宣言を先頭に持っていくと ie6でも表示されるようになりました。 ということで、 「<?xml version="1.0" encoding="Shift_JIS"?>」 の扱いについて質問させていただきます。
- ベストアンサー
- XML
- 画像を入れ替えるジャバスクリプトでお聞きします！
下記のような画像入れ替えですが、サンプル１とサンプル２の 両方を同じページで利用する場合は、ソースはどのように 記載したらいいのでしょうか？ http://javascript.eweb-design.com/0802_ici.html .jsの外部ファイルを２つ用意しましたがエラーでした。 どちらも入れ替える速度は違うようにしたいのですが・・ 無理なんでしょうか？ 詳しい方宜しくお願いします。
- ベストアンサー
- JavaScript
- CSS 画像の配置について
http://www.handmc.jp/pc/index.html こちらのページにある メインの写真が2枚 バック画像の上に並べられていますが これをCSSで配置するにはどうしたらよいでしょうか？ 背景のグレーのグラデーションもあるので 写真の上に写真を並べているように見えます 今までのテーブルであれば簡単なのですが 沢山本を買ったり WEBで調べていますが 画像配置の方法が文字の回り込みのものばかりで このページのように画像背景の上に さらに画像背景を配置する方法を知りたいと思っております お手数ですがどなたがご教授お願いします
- ベストアンサー
- HTML
- xhtmlでの画像サイズ指定について質問です。
xhtmlでの画像サイズ指定について質問です。 htmlでは、例えば800×800の画像でも、スタイルシートのクラス指定（下記は外部にcssを記述）などで （中略） <link rel="stylesheet" href="size.css" type="text/css" media="screen" /> （中略） <img src="cat.jpg" class="wid180he50" alt="猫" /> 外部ファイルで・・・ .wid180he50 {width=180px ; height=50px ;} とすれば180×50で表示されますが、 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> のxhtmlでは無効となっているようで、そのままの800×800で表示されてしまいます。 どのように記述すれば180×50で表示されますでしょうか？
- ベストアンサー
- ホームページ作成ソフト
補足
ORUKA1951さん回答有難うございます。 少し解らない事があります。無知な質問が多くてスミマセンm(__)m スタイルシートとはCSSの事でしょうか？ ＞例えば、HTMLがきちんと・・していればって事ですよね？ 上記の書き方だと<ul><li>とかのタグをCSSに記述するように思えるのですが？ マークアップとは<div>で括る事を言っておられるのでしょうか？ その他ご指摘ありがとうございます。まだまだ初心者なので徐々に勉強していきたいと思います。