html　オンマウスで変化する画像の位置の指定方法

Question

よくHPなどで使われるオンマウスによって変化する画像。
私は今その変化する画像の位置を指定のに苦労しています。
画像が添付してあると思われます。
今現在こういった感じになっています。

緑・・・オンマウス位置
赤・・・オンマウスによる画像表示位置
青・・・現在のオンマウス位置
黄・・・現在のオンマウスによる画像表示位置

私はこの青、黄を緑、赤の場所まで移動させたいと思っています。

http://copicopi.com/onmousepic.html

こちらのサイトのオンマウス画像4を参考にしています。
また、たまに表示される画像が激しく点滅する事もあります。
どういった風に書き換えれば位置を綺麗に指定する事ができるのでしょうか。
教えて頂けると幸いです。

ORUKA1951 · Accepted Answer

＞私はHTMLを使ったページ製作は初めての初心者です。　それでしたら、最初に仕様書の下記の部分を読んでおいてください。とっても大事なことです。 ★2.2.1 HTMLの略歴 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 ) ★14.1 スタイルシートの概説 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 ) ＞画像などの配置場所を指定するために使うと思われる何px左右に、何px上下にと＞動かすhtmlコードとそのコードを上記のコードのどこに書き入れればよいのか　上を読まれれば、それはHTMLの仕事ではないことがわかると思います。HTML(Hyper Text Markup Language)は、Hyper(リンク機能を持つ)テキストを(文書構成要素で)マークアップする方法---と言う意味です。すなわち、ここは見出しだったら

見出し

、引用文でしたら

この部分は引用です。

、段落でしたら

ここからここまで段落

(PはParagraph--段落と言う風に・・・。それをどのように見せるかは、ブラウザが持つスタイルシートに、全面的に任せるのです。　これが、HTMLを作成するもっとも重要な基本中の基本なのです。「画像などの配置場所を指定する・・」はHTMLではないのです。もっとはっきり言うと、ワープロやDTP ( http://ja.wikipedia.org/wiki/DTP )と、まったく違うのです。・・・私もそうでしたから理解できるのですが、初心者がもっとも誤解してしまう部分なのです。私は、HTMLがシンプルだったHTML1(1993)の時代から、HTMLがプレゼンテーションに使われていたHTML3.2(1997)、そしてその反省から生まれたHTML4.01(1999)を経験していますから、もっとも振り回された世代かもしれません。　あなたが参考にされた資料は、その意味ではあまり良い物ではありません。というか最悪のものを見てしまったと言えるかもしれません。初心者はとにかく仕様書を目を通してください。最初はチンプンカンプンでも一通り読み通しておくこと。そうすれば、必要なときに必要なところをすぐ見つけられますからね。そして、書いてみてはAnother HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html )でチェックしてみる。　なお、最初に練習するのは「はじめてのWebドキュメントづくり ( http://www.asahi-net.or.jp/%7Esd5a-ucd/www/ )」がよいでしょう。　スタイルシートは、同様に「REC-CSS2 邦訳 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cover.html#toc )」があります。練習には「1と2の間辺りからはじめるCSS講座 ( http://www6.plala.or.jp/go_west/beginner/css/ )」とか・・ [CSS]　test.cssと言うファイル名でShift_JISでHTMLと同じ場所に保存する。 @charset "Shift_JIS"; html,body{margin:0;padding:0;} #albumList{ width:640px;height:500px;/* サイズを決める */ margin:0 auto; /* 画面の左右中央に */ border:ridge 3px lime; /* 枠のデザイン */ position:relative;/* 位置の基準とするため */ } #albumList,#albumList li{ display:block;list-style:none;/* リストをブロックに変えておく */ text-align:center;/* 文字は左右中央に */ } #albumList li{ float:left; /* リストは横に並べる */ width:9em; /* 巾はとりあえず 9文字分 */ border:1px gray solid; /* わかりやすくするため枠をつけて */ margin:0.2em 1em; /* 上下と左右のマージン */ } #albumList li p{ position:absolute; /* position:relativeされた#albumListに対して絶対配置 */ width:100%; /* 巾もそれを基準に100% */ top:3em;left:0; /* リスト分だけ下げておく */ } #albumList li p img{ width:540px;height:auto;/* 巾と高さ */ margin:0 auto; /* 横の中心 */ display:none; /* 見えないように隠す */ } #albumList li:hover p img{ display:block;/* liにマウスオーバーするとdisplay:none→block */ } [HTML] test.cssと言うファイル名でShift_JISでCSSと同じ場所に保存する。・960px×720px程度の画像を４枚用意してください。(サイズや縦横比は多少変わっても良いです。) 　ファイル名は1.jpg,2.jpg,3.jpg,4.jpgとでもしておきましょう。　HTMLソースには、印刷時の写真のサイズを書いておきます。実サイズの半分程度　なお、 ★Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) ★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input ) 　で検証済みです。 ※タブは、＿に置換してありますから、元に戻してください。半角スペースでも良いです。 (確認) →このスタイルでは印刷時には画像が印刷されないので、screen(PC用のブラウザ)のみ適用するようにしてある。ためしに印刷プレビューしてみるとスタイルが適用されていない。 →画像の縦横比やサイズが多少変わっていても、それなりに縮小(横幅統一)で表示される。 →HTMLにはデザインに関することは一切書かれていない。＿＿サンプル＿＿＿＿＿＿

サンプル

＿

なんとかの写真＿＿＿
＿＿
かんとかの写真＿＿＿
＿＿
もうひとつの写真＿＿＿
＿＿
これは関係ない写真＿＿＿
＿＿

ORUKA1951 · Answer

質問の意味がわかりません。マウスを乗せるのはどこですか？また、HTMLが記載されていないため説明の方法がありません。たとえば、それが画像の一覧でしたら

画像一覧

なんたらの画像
なんたらの画像
なんたらの画像

とかのはずですね。 ★HTMLは決してデザインを元に記述してはなりません。あくまで文書構造だけです。　そのうえで、div.albumListを何ピクセル×何ピクセルの枠にして、リストをどこに表示して、そのリストにマウスオンすると画像をどの位置に表示させる・・・と言う風に考えます。(この場合、div.albumListにposition:relativeを指定して、div.albumList ul li imgの位置をposotion:absoluteで、div.albumListの位置を基準に配置して、display:noneで消して、li:hoverで表示(display:block)させれば良いだけです。

html オンマウスで変化する画像の位置の指定方法

＞私はHTMLを使ったページ製作は初めての初心者です。

質問の意味がわかりません。

この回答への補足

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

html　オンマウスで変化する画像の位置の指定方法