コンパクトデジカメ画像で、日常&花&趣味など!ボチボチ弄ってまぁ~す♪

 ジャプラノート2

 コンパクトデジカメ画像で、日常&花&趣味など!
 ボチボチ弄ってまぁ~す♪

Google
 

Yahoo!検索


pc1
       いらっしゃいませ♪ 現在ジャプラノート2をご訪問の方は 名様ですぅ~♪    

<<03 12345678910111213141516171819202122232425262728293005>>
スポンサーサイト
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
--/--/-- --:-- | スポンサー広告 | page top↑
イメージマップ♪
今回はイメージマップ(クライアントサイド・イメージマップ)を
利用してのオンマウスですぅ~♪

【花の雌蕊にマウスカーソルを乗せてくださいね♪】
<花の雌蕊にマウスカーソルを乗せてくださいね♪><><キク画像01♪><カリフォルニア ローズ♪><キク画像02♪><バラ咲きインパチェンス♪><>

このように、1枚の画像の何処でも♪お好きな所にリンクなどを
貼り付ける事の出来るタグですぅ~♪
色々と応用が出来ますので♪小技には面白く使えるかもしれませんね♪

※ 前回、前々回の記事も♪その応用ですので。。。
今回のソースは、あくまでも一例ですぅ~♪

**********************************************************

 今回のソースですぅ~♪ (gooブログでも使えるようにしてあります。)
<center><font color="#ffffff" style="font-size:1px;"><<img border="0" src="★" usemap="#csi01" alt="最初の画像の説明文" width="395" height="555" name="ara01">><<map name="csi01">><<area onmouseover="ara01.src='☆'"onmouseout="ara01.src='★'"shape="circle" alt="説明文" coords="254,137,69">><<area onmouseover="ara01.src='☆'"onmouseout="ara01.src='★'"shape="circle" alt="説明文" coords="70,278,65">><<area onmouseover="ara01.src='☆'"onmouseout="ara01.src='★'"shape="circle" alt="説明文" coords="270,360,65">><<area onmouseover="ara01.src='☆'"onmouseout="ara01.src='★'"shape="circle" alt="説明文" coords="130,450,68">><</map>></font></center>

【説明】
色の数値は、画像サイズです♪
今回は、395×555 の画像を五枚使用しています。
五枚とも同じサイズにしてくださいね。

色は、IDですので2ヶ所に同じ物を記入してください。

色も、IDですが。。。
 グリーンとは違う物を9ヶ所に記入して下さいね♪

★印の所には、最初に表示される画像アドレスを記入して下さいね。

☆印の所には、残りの4枚の画像アドレスをそれぞれ入れてくださいね。

最後に色の数値ですが。。。
ここが今回、一番!重要な部分ですぅ~♪
今回の画像は、395×555 ですので 220,176 個の点で出来ていますので
それぞれの点は、0,0(左上隅)~ 395,555(右下隅)までの
位置が、割り当てられています。
(ペイントソフトで、画像にカーソルを乗せると下に表記されます。)

これを図形として、表す場合は色の部分を。。。
円の場合(今回)⇒ shape="circle"
四角形の場合⇒ shape="rect"に変え!

ピンク色の数値の部分を♪
円の場合(今回)⇒ coords="123,96,80" (円の中心点・半径)
(左からの距離)(上からの距離)(半径)と、順番に並べます。
四角形の場合⇒ coords="265,44,420,157" (左上の点・右下の点)
で、表記します。

下の図形を参考にして下さいねぇ~♪(460×200の画像です)
マウスポインターを図形の上に乗せてみてくださいね♪(リンクは有りません)
点の座標画像♪円形♪四角形♪

2006/11/04 19:05 | Blogカスタム | トラックバック(0) | コメント(34) | page top↑
<<無謀な試み? | ホーム | キク&インパチェンス♪>>
コメント
タマには難しかったですが、
クリックする範囲(今回の場合は円)を 中心を定める事により定義する という理解でよろしいのでしょうか?
よくお考えになりましたねぇ。
これって、かなり凄いですよねぇ。
拍手です。v-10
2006/11/04 23:28URL | タマでございます #-[ 編集] | page top↑
タマさん♪ おばんでやんすぅ~♪
コメント♪ ひじょ~に!嬉しいですぅ~♪

座標を指定する部分が、解り辛いかもしれませんねぇ~。。。
円形は、その通りですぅ~♪
四角形は、二点を指定します。
その他の多角形は、一番上の点から左回りに。。。
各頂点を順番に、指定しますぅ~♪
一応?これが決まり事のようですぅ~♪
もし、各図形が重複してしまう場合は。。。
最初に指定した物が、優先するようです♪

どうですか?
面白そうでしょ~(笑
2006/11/05 00:20URL | ますたー。 #kJ7UNJBs[ 編集] | page top↑
ますたー。さん♪こんばんわぁ~♪
ヽ(^o^)ノ 早速のソースありがとうございますm(_ _)m
こんなに早くアップして頂いて、もーーーー感謝♪感激♪ですぅ♪
  (-_☆)イタダイテモイイノカァーー!!!
     でもなんだか難しそう。。。(ー。ー)ボソッ
とりあえず頂いて.......猛勉強せねば。。。(笑)ノーテンキナママ
  今日は遅いので。。。タイキャーク
2006/11/05 00:31URL | 出羽ママ #-[ 編集] | page top↑
ややっや!おはようさんどす>ますた~。

こりゃまた黄色と赤の鮮やかなこと、そしてもう小枝じゃなく、小技の域から大技だ~。v-11

2006/11/05 07:06URL | 管理人@しんじワールド #mQop/nM.[ 編集] | page top↑
まうたー。さんお早うございます。v-25
昨日頂に来ました、そして「在庫の物」で今朝作りUPしました。有難うございました。
兎に角できましたのでご報告です。
変なところあったらごめんなさい。
次はゆっくりと勉強して見ますね。
2006/11/05 08:28URL | 玲 #-[ 編集] | page top↑
ごめんなさい、名前が打ち間違い、寝ぼけていたかもしれません。
2006/11/05 08:29URL | 玲 #-[ 編集] | page top↑
ますたー。さん、こんにちは♪
わぁ~♪ソース公開されているんだぁ~
さっそく使ってみなくちゃ!
時間がタップリ取れるときに練習してみま~す♪
 
☆この前、『イメージマップ』のコメントを読んでいたらS嬢のことが書いてあったので、誰のことかと気になって(何で気になるの?私!アハ♪)ブログをさかのぼって読んでいたら、S嬢のことが書いてあるページにたどり着けました。
あごが、はずれたのは超面白かったです光景が手に取るようにわかり、大笑いしてしまいました。
私の中で]“かっこいいますたー。さん→ドジなますたー。さん”にイメージが変わりつつあります(笑)
2006/11/05 11:29URL | きょろ #-[ 編集] | page top↑
★とにかく凄すぎてビックリ!!
たまたま巡り巡ってたどり着いたのですが
うぅ~んと唸ったまま固まりました。
良いですね。楽しいですね。
今は時間が無いけどそのうちじっくり
挑戦したいなぁ・・・。
2006/11/05 12:36URL | MAKO #5sg77xo.[ 編集] | page top↑
出羽ママさん♪  こんちゃぁ~っす!
コメント♪ありがとう!めっちゃ!嬉しいですぅ~♪

藻ぉ~~~♪感謝♪感激♪とは、嬉しいですねぇ~(笑
昨日は、いろいろな使用方法を模索していましたが。。。
かなり?使い道が多そうなので♪ソースをUPしましたぁ~♪

ソース自体は、いたってシンプルですので。。。
後は、点の座標の書き方だけだとおもいますぅ~♪
前の記事は、四枚の画像をくっつけて!
1枚の画像にしたものを四角形で、四分割した物ですので
殆ど同じですぅ~♪(笑
がんばって♪色々と試して見てくださいねぇ~☆彡
2006/11/05 14:17URL | ますたー。 #kJ7UNJBs[ 編集] | page top↑
しんじさん♪ こんちゃぁ~っす!
コメント♪ あんがとねぇ~!

やっぱ!黄色と赤色は、難しいですねぇ~(泣
コンデジ推進派?としましては。。。
このての鮮やかな色は、永遠のテーマのようですぅ~♪(笑
2006/11/05 14:21URL | ますたー。 #kJ7UNJBs[ 編集] | page top↑
玲さん♪ こんちゃぁ~っす!
コメント♪ありがとう!めっちゃ!嬉しいですぅ~♪

ほんと!玲さんは、フットワークが良いですねぇ~☆彡
以外と簡単だったでしょ?(笑

本来このタグは、HPなどのメニューを画像で作った物に♪
リンクを貼り付ける時に、使われることが多いのですが。。。
面白そうでしたので♪ちょこっと遊んでみましたぁ~(笑
きっと?いろいろな使い方が出来ると思いますよ~♪
2006/11/05 14:29URL | ますたー。 #kJ7UNJBs[ 編集] | page top↑
きょろさん♪ こんちゃぁ~っす!
コメント♪ありがとう!めっちゃ!嬉しいですぅ~♪

きょろさんのお好きそうな?タグでしょ~?(笑
お忙しそうですが。。。
お体には、充分!気を付けてくださいねぇ~♪

ゲッ!!!
見付けちゃいましたねぇ~(笑
きょろさんも?小悪魔の素質を。。。
充分、お持ちのようですねぇ~(泣
お願いですからぁ~。。。
イメージだけは、今まで通りで♪
お願いしますぅ~(笑
でも。。。
真実には、確実に近付いていますよ~(泣
2006/11/05 14:37URL | ますたー。 #kJ7UNJBs[ 編集] | page top↑
MAKOさん♪ はじめまして。
コメント♪ありがとう!めっちゃ!嬉しいですぅ~♪

MAKOさんは、PC教室の先生なのですか?
昔から。。。
先生と聞いただけで、物陰に隠れる習性の有る!おいらとしましては。。。ビックリこいて?思わず隠れ場所を
探してしまいましたぁ~(笑

自己流ですので、お恥かしい限りなのですが。。。
これからも宜しく、おねがいしますね♪
今日は、とぉ~っても嬉しかったですぅ~☆彡
2006/11/05 14:59URL | ますたー。 #kJ7UNJBs[ 編集] | page top↑
こんばんは。ますたー。さんはどんどん斬新なことをして
楽しませてくれますね♪
アタマの堅い私はなかなか納得出来なくて・・・(^^*;アセ

実は今日も先日教えていただいた「クリック後の画像の大きさを指定する」
をやってみたのですが 投稿したとたんにみ~んな
消えてしまいました…|||(~□~;)||| ガーン
仕方なく以前と同じオンマウスでアップしました。
二分割も四分割もスクロールもやりた~い・・・

ここに来られるみなさんは とても精通されていて少々気後れがしますが
私も少しずつマイペースで納得していこうと思っています。
宜しくです!頑張るぞ~ o(○`・д・´○)ノ  
2006/11/05 22:44URL | nom #-[ 編集] | page top↑
ますたー こんばんは
私が一寸忙しくしていた間に超一流なものを!!
明日ゆっくり考えて使わせてくださいね。
こんなことやってみたかったのでソース嬉しいです。
考えても無理だよ って聞こえてきそうですが…。 
2006/11/05 23:58URL | 青空 #-[ 編集] | page top↑
ますたー こんにちは 
今 完成です。今日の勉強はゴミ消しは最初に1回入れればいいのですね。今までは<<の度に消していました。

それからもう一つ自分の指定する位置が四角の中にあるか円の中にあるかでshapeを変えるのですか?
私の場合はペイントに置くと2点で指定があったのでrectにしましたが…。
2006/11/06 16:30URL | 青空 #-[ 編集] | page top↑
nomさん♪ おこんばんわぁ~♪
コメント♪ありがとう!めっちゃ!嬉しいですぅ~♪

頭の硬さ?ては、負けませんよ~(笑
交通事故で!フロントガラスを木っ端微塵に砕きましたからねぇ~♪(笑
それ以来。。。
頭の冴えが無くなってしまったようですぅ~(笑

あれまっ!
使えませんかぁ~???
今度、おいらのgooブログで試してみますね♪
こちらのブログにUPしたソースは、gooブログでも♪
使えるはずですので、がんばってくださいねぇ~♪
解らない事が有れば、出来る限りお答えしますよ~♪

今日は、同級生のお通夜でしたので。。。
お返事が遅くなって、ごめんなさいね。
2006/11/06 19:10URL | ますたー。 #kJ7UNJBs[ 編集] | page top↑
青空さん♪ おこんばんわぁ~♪
コメント♪ あんがとねぇ~!

やはり、そこの部分の説明が足らなかったようですねぇ~。。。
先程、ソースを拝見して来ましたがぁ~♪
数字は、横からの距離と上からの距離で1つの点を表しますので♪
2つで!1組ですぅ~♪
円形の場合は、中心点で2つの数字です。
そこに、半径の距離を記入しますので!
全部で、三個の数字の塊になるわけです。
四角形は、ドラックする要領で左上の点と右下の点を
書き入れますので、全部で四個の数字の塊になりますぅ~♪
青空さんのソースの数字は、2つの数字の塊しか記入されていませんので、誤作動をおこしているようですぅ~♪
円形にする場合は、shape の後ろを circle にして!
円の半径(ピクセル表示)を円の中心点の2つの数字の後ろに、『,』で区切ってから記入してくださいね。
あまり数字が小さいと、探し辛いので♪
25くらいが、良いと思いますぅ~♪
これで、直径が 50px の円になるわけですぅ~♪
2006/11/06 19:40URL | ますたー。 #kJ7UNJBs[ 編集] | page top↑
ますたー Re.ありがとうございました。
お忙しい中見ていただいて嬉しいです。
ペイントに現われた数字はポイントした位置を示しているのですね。ポイントでは探しづらいので四角か円で範囲を広げてあげるということですね。今度は良くわかりました。これに懲りずによろしくです。
ではゆっくりお休みください。私も安眠できそうです。
「マウスオンだからこうなるのかな なんて浅はかなことを考えていました。とほほ!!」
2006/11/07 00:22URL | 青空 #-[ 編集] | page top↑
青空さん♪ こんちゃ~っす♪

少しは、お役に立てたでしょうかぁ~?(笑
ペイント以外にも、他の画像処理ソフトでも見れると思いますぅ~♪

文字での説明は、なかなか難しいですねぇ~♪
昨夜は、ゆっくりと安眠できましたかぁ~?(笑
2006/11/07 12:28URL | ますたー。 #kJ7UNJBs[ 編集] | page top↑
こんばんは。ますたー。さん。
ご友人のご冥福をお祈りします(-人-)
>お返事が遅くなって、ごめんなさいね。
綺麗な画像と楽しいワザに魅かれて 勝手にコメントしているのに
そぉんなことを言われると恐縮しますです。はい。お暇なトキで…はい。

私は記事の写真をどのように見せたら 一番いいのかを考えます。
だからまたますたー。さんのワザはとても頼りになるんです。
>解らない事が有れば、出来る限りお答えしますよ~♪
とっても嬉しいお言葉です。よろしくです(:D)┓

それから余計な事かもしれませんが・・・
誰かを亡くしたら どこか平常心ではいられないものです。
(自分では気付かないかもしれませんが)
ケガ・事故・病気など十分気をつけてくださいね。

今ちょっとだけ何とも怪しげで(笑)楽しい音楽を聞きました。
次回作も楽しみにしています♪(作曲のサイノ~もおありなんですね!)
2006/11/07 18:03URL | nom #-[ 編集] | page top↑
nomさん♪ おばんでやんすぅ~♪
コメント♪めっちゃ!うれぴぃ~っす♪

お気遣い♪誠におそれいりますぅ~♪
同じ歳の人が、逝ってしまったかと思うと。。。
ちょっと、寂しい感じがしますねぇ~。。。
そう考えると、1日!1日の大切さを!
改めて!考えてしまいますぅ~♪

>私は記事の写真をどのように見せたら 一番いいのかを考えます。
ハイハイ!おいらも、そう思いますよ~☆彡
どうしても!画像を絞り切れない時の為に考えた小技も
結構、多いんですよねぇ~♪(笑

そうなのですぅ~♪
怪しいと言うのが!ピッタンコですぅ~(笑
自分でも!何か変だなぁ~って、思っているのですが。。。
やっぱ!音楽には、なんらかのルールみたいな物が
有るのですねぇ~♪きっと!(笑
もう少し。。。
怪しさを魅力に変えれるように♪
がんばってみるのだぁ~(笑
2006/11/08 01:02URL | ますたー。 #kJ7UNJBs[ 編集] | page top↑
ますたーさん今晩は やってみましたが難しいーーーー 頭悪いんでしょうねv-9
2006/11/08 20:07URL | こすもすといいます #-[ 編集] | page top↑
ますたーさん、お久しぶりです。
いつも伺ってはショボクレて帰ってきているんですよ。
最近のものは、私の理解力では難しいものばかりです。
でもソースはチャンと頂いていこうと思ってます(笑)
衰え始めた頭の体操に、勉強教材(テキスト)としてですよ。


2006/11/09 11:12URL | えったん #-[ 編集] | page top↑
こすもすさん♪ こんちゃぁ~っす!
コメント♪ありがとう!めっちゃ!嬉しいですぅ~♪

最初から、ちょいと面倒臭かったですねぇ~。。。
明日!簡単に使えるようにした物をUPしようと思っていますので
お暇でしたら、参考にしてみて下さいねぇ~♪
2006/11/09 14:40URL | ますたー。 #kJ7UNJBs[ 編集] | page top↑
えったんさん♪ こんちゃぁ~っす!
コメント♪ありがとう!めっちゃ!嬉しいですぅ~♪

あれまっ!ショボショボクレクレなのですかぁ~?
今回の物は、大変!評判が悪かったので。。。
もう少し簡単に、使える物を♪明日!UPする予定ですぅ~(笑
どうも!先走ってしまって。。。
何とも!お恥かしい限りですぅ~(笑

これに懲りずに、また!ショボショボしてねぇ~☆彡(笑
2006/11/09 15:36URL | ますたー。 #kJ7UNJBs[ 編集] | page top↑
色付きの文字ますたーさんおはようございます 頭悪いのでそのように(^ー^)ノ ヨロシクね
2006/11/10 10:18URL | こすもすといいます #-[ 編集] | page top↑
こすもすさん♪ こんちゃぁ~っす!
コメント♪ありがとう!めっちゃ!嬉しいですぅ~♪

UPしましたよ~♪
今度のは、アドレスを入れるだけですぅ~♪(笑
2006/11/10 16:35URL | ますたー。 #kJ7UNJBs[ 編集] | page top↑
初めてお便りします。
先日より ソ-ス ≪ サムネイルクリック(縦スクロール)、オンクリック、別ウインドウ4分割 ≫をお借りして記事をアップしています。
パソコンの勉強の一環でブログを開始しました。
最近は ジャプラノート2 さんのソースにハマッテいます。
サムネイルクリック(横)をアップしたら、次は イメージアップ利用のオンマウス(11/4UP分)に挑戦したいと思っています。
なかなか画像が揃いませんが 数値の出し方は おおよそ判りました。
「ペインソフトで~  」これは 別に何かソフトが必要なのでしょうか?
初歩的な 質問でごめんなさい。

これからも 取り掛かりやすいソフトを使わせてください。宜しくお願いします。

2006/11/25 22:40URL | shigeko #-[ 編集] | page top↑
shigeko さん♪ はじめましてぇ~☆彡
コメント♪ありがとう!めっちゃ!嬉しいですぅ~♪

ご利用くださいまして、とぉ~っても嬉しいですぅ~♪
ブログをやっている方は、博識な方が多いので。。。
とぉ~っても、勉強になりますので?(笑
沢山!お友達を作ってくださいねぇ~☆彡

>「ペインソフトで~」これは 別に何かソフトが必要なのでしょうか?
ウインドウズのアクセサリーにもともと入っている!
ペイントでも!他の画像処理ソフトでも、大丈夫です。
殆どの場合!画像を開いて、マウスポインタを乗せると
ソフトの画面の右下の方に、座標の数値が表記されると思います。
私の場合は、無料で使える♪『JTrim』というソフトを。。。
ダウンロードして、使用しています♪

こちらこそ!宜しくお願いします。
今日は、ありがとうございました。
2006/11/26 15:39URL | ますたー。 #kJ7UNJBs[ 編集] | page top↑
ますたーさん こんばんわ!
サムネイルクリック(横)のアップの前に、イメージアップ利用のオンマウス(11/4UP分)に挑戦しました。
画像が 揃わなかったので 三ヶ所のオンマウスで終了しました。
座標は 手計算で出しました。

「ますたーさんのソース」を一通り済ませないと 他の事は気分が乗りません。
これからも 宜しくお願いします。
2006/12/10 23:50URL | shigeko #-[ 編集] | page top↑
shigekoさん♪ こんちゃぁ~っす!
コメント♪ありがとう!めっちゃ!嬉しいですぅ~♪

一通りご利用下さいまして♪ありがとうございますぅ~(笑
イメージマップのソースも、完璧にご理解くださいましたようで♪
ほんと嬉しいですぅ~♪
イメージマップは、画像のお好きな部分にリンク先などを
指定できますので、色々な方法で試してみてくださいね♪

こちらこそ♪
宜しくお願いしますですぅ~☆彡
2006/12/11 17:21URL | ますたー。 #kJ7UNJBs[ 編集] | page top↑
こんばんわ!玲さんの紹介でお邪魔しました。
ブログではイメージマップできないと諦めていました。ソースをお借りしたいと思います。よろしくお願いします。
2008/02/06 22:58URL | satomine #-[ 編集] | page top↑
satomineさん♪ こんちゃ~っす♪
コメント♪めっちゃんこ、嬉しいですぅ~☆彡

ようこそ♪いらっしゃいましたぁ~゚・*:..。o☆゚・*:..。o♪
無理矢理?イメージマップを使いたくて。。。
適当に作りましたので♪
あまり気の利いた使い方ではありませんが。。。(笑
色々とカスタムして、ご利用くださいね♪
2008/02/07 23:06URL | ますたー。 #kJ7UNJBs[ 編集] | page top↑
コメントの投稿












管理者にだけ表示を許可する(内緒話にはチェックを入れてね♪)

トラックバック
トラックバックURL
http://japra.blog34.fc2.com/tb.php/393-7b3b77d2
この記事にトラックバックする(FC2ブログユーザー)
ホーム

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。