スポンサーサイト

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

夏の草花(画像のロールオーバー)

暑かった8月も終わる。今朝方は激しい雷雨だった。近くへの落雷だっただろう、ド~ンという音と地響きで目が覚めた。
暑さで草花も枯れかけていた。この雨でいくらか生き返ったようだ。
「ハツユキソウ」と「サフランモドキ」(多分?)の写真を掲載しておく。

※マウスを乗せると画像が変わります。外すと最初の画像になります。これは『Sakuraの勉強室』内のソース「ss-01」がINternetExplorer 10では動作しないので改修しました。ソースも書いておきます。枠線の色は #0000cd のカラーコードを書き換えます。クリックの場合は前日のブログ同様、onmouseover を onclick に onmouseout を ondblclick に書き換えるだけです。


ソース
<IMG galleryimg="false" style="border-width:5px;border-style:solid;border-color:#0000cd;"src="画像1URL" width="590" height="442" onmouseover="src='画像2URL';"onmouseout="src='画像1URL';">
スポンサーサイト

PS-08のソースを作り変えた

『Sakuraの勉強室』に掲載してあるソースがブラウザによって動作しないことがあります。私の場合ある日突然動作しなくなりました。調べてみるとInternetExplorerがいつのまにかバージョン10になっていました。どうも自動的にアップデートされたようです。別のパソコンでは動作します。こちらのバージョンは9でした。そこでぼちぼちとソースの作り変えをしています。
今回は「PS-8」を作り変えました。枚数も10枚に減らしています。サムネール画像のクリックで変わりますが、オンマウスオーバーに変更してみました。クリックの場合はソースの onmouseover を onclick に変えるだけです。
なお PS-18 は改修済です。6月24日をご覧下し。
テストに使用した画像は使いまわしです。
コメント1


<table border="0" style="background-color:#ddffbc;"><tbody><tr><td></td><td
align="center"></td><td align="center"></td></tr><tr><td
style="align:center;"><img id="wak8pn" border-width:4px;border-style:double;border-color:#7cfc00;
width="520" height="390"src="画像1URL" border="0"></td><td
align="center"><table><tbody><tr><tr><td
style="border-collapse:collapse;border:2px solid #7cfc00;background-color:#e0ffff;"><div><img
src="画像1URL"width="50"height="30"vspace="6"onmouseover="wak8pn.src=this.src;bun8pn.innerText='コメント1';"></div><div><img
src="画像2URL"width="50"height="30"vspace="6"onmouseover="wak8pn.src=this.src;bun8pn.innerText='コメント2';"></div><div><img
src="画像3URL"width="50"height="30"vspace="6"onmouseover="wak8pn.src=this.src;bun8pn.innerText='コメント3';"></div><div><img
src="画像4URL"width="50"height="30"vspace="6"onmouseover="wak8pn.src=this.src;bun8pn.innerText='コメント4';"></div><div><img
src="画像5URL"width="50"height="30"vspace="6"onmouseover="wak8pn.src=this.src;bun8pn.innerText='コメント5';"></div></td></tr></tbody></table></td><td
align="center"><div><table><tbody><tr></tr><tr><td
style="border-collapse:collapse;border:2px solid #7cfc00;background-color:#e0ffff;"><div><img
src="画像6URL"width="50"height="30"vspace="6"onmouseover="wak8pn.src=this.src;bun8pn.innerText='コメント6';"></div><div><img
src="画像7URL"width="50"height="30"vspace="6"onmouseover="wak8pn.src=this.src;bun8pn.innerText='コメント7';"></div><div><img
src="画像8URL" width="50"height="30"vspace="6"onmouseover="wak8pn.src=this.src;bun8pn.innerText='コメント8';"></div><div><img
src="画像9URL"width="50"height="30"vspace="6"onmouseover="wak8pn.src=this.src;bun8pn.innerText='コメント9';"></div><div><img
src="画像10URL"width="50"height="30"vspace="6"onmouseover="wak8pn.src=this.src;bun8pn.innerText='コメント10';"></div></td></tr></tbody></table></div></td></tr><tr><td
align="center" valign="middle" style="border-collapse:collapse;border:2px
solid #7cfc00;background-color:#ffffff;height:40px;" height="35"><span
id="bun8pn"style="font-size:16px;font-face:MS ゴシック;font-weight:bold;color:#0000ff;">コメント1</span></td><td></td><td
height="30"></td></tr><tr><td height="10"></td><td></td><td
height="10"></td></tr></tbody></table>

ここでは画像用とコメント用に2つのidを使っています。画像用が waki8pn コメント用が bun8pn です。
同じページでこのソースを複数使いますと動作しません。id はその都度変更するほうが無難です。



タグマのアルバム

タグマは我が家のペットでした。1984年に生まれてすぐに勤務先の同僚から貰い受けました。
雑種ですが、コロコロとしたぬいぐるみのような子犬でした。
大きくなって、やがて娘がアメリカから連れ帰ったペルシャ猫の「モモ」とは大の仲良しになりました。
2匹でよくじゃれあっていたものです。
ずいぶんと長生きしましたが、1999年の秋、11月10日でしたか、15年の寿命を全うし天国に旅立ち、もう14年の歳月が流れました。ホームページに残していたアルバムを編集してYouTubeにしてみました。思い出にブログに掲載しておきます。、

文字や画像を動かす その2

①まず下を見てください。

幅500pxの領域を設定し、背景を空色にしました。下がソースです。
<div style="width:500px;height:100px;background-color:#b0c4de;"><marquee><img src="画像URL"width="100"></marquee></div>

②次に画像の移動領域を400pxに、領域をcenterにしました。

左右に50px分の余白ができましたね。余白をタグで指定することもできますが、ブラウザによっては動作しないので使いませんでした。
<div style="width:500px;height:100px;background-color:#b0c4de;"><center><marquee width="400"><img src="画像URL"></marquee></center></div>

③次に画像を上下に動かします。

<div style="width:100px;background-color:pink;"><marquee height="70" direction="up"><center><img src="画像URL"></center></marquee></div>
direction="up" を direction="down" に書き換えれば上から下への動きになります。

④最後に、左右方向や上下の属性を組み合わせたものを掲載しておきます。ちょっと面白い動きですね。
テーブルを使っています。

下がソースです。
<table width="400"><tr><td><marquee width="400" height="100" bgcolor="#b0c4de" direction="down" behavior="alternate"><marquee behavior="alternate"><img src="画像URL"></marquee></marquee></td></tr></table>

ソースの選択とコピー  下のボタンをクリックするとそれぞれのソースのコピーができます。
① 



② 



③ 



④ 




天気予報で日曜日の北部九州の最高気温は37度と発表されていた。午後3時、庭の日蔭、1.5mのところで測定してみた。40度!「うぅ~ん 暑い!
外出したついでにひと月ぶりに給油した。リッター143円だったのが149円になっていた。上がるのは気温ばかりではない。

文字や画像を動かす その1

ページ上で文字や画像をスクロールすることをマーキーと言いますが、marquee要素で作成しますね。これは以前『旧Sakuraの散歩道』の書いたことがありますが、改めてFCブログ用に書き直しました。画面に変化があって面白いのですが、私自身は動きが早いと目にちらつくのであまり使いたくはありません。(scrollamaunt="距離")を指定することによって一度に動かす距離を指定することもできます。距離はピクセル値で指定します。小さくすると滑らかになります。)備忘録として2回に分けて書いておきます。
文字列を動かす
marqueeの基本は <marquee>(文字や画像)</marquee>です。
文字列
上のように右から左に流れるように動きます。

動きをゆっくりした例
<marquee behavior="alternate" scrollamount="2">文字列</marquee>
文字列

また、behavior属性を使えば(一方向に繰り返し)、(左右交互)、(端まで)と指定できます。
<marquee behavior="scroll">文字列</marquee>     一方向繰り返し(基本と同じ)
文字列
<marquee behavior="alternate">文字列</marquee>   左右交互
文字列
<marquee behavior="slide">文字列</marquee>      端までで止まる  
文字列
文字列の部分に画像のURLを入れれば画像が動くわけです。
tori
下で基本ソースのコピーができます。



次回はこれに背景色を付けたり、移動領域の幅や高さを指定してみましょう。

お得! 電子申請をしてみた

通知書先日、家内宛に「無線局免許の再免許申請手続きのお知らせ」が総務省から送られてきた。来年1月にアマチュア局の免許の有効期限を迎えるのだ。お知らせは総務省の新しいサービスのようだ。運転免許の場合は以前からあったが、再免許の申請は免許の有効期間の1年以内から1ヶ月前までの間に行わなければならないので、つい忘れて失効する方も多いのかもしれないね。国のこんなサービスは大歓迎だ。
申請の方法は『電子申請』と『書面申請』があるが、申請手数料が前者は1,950円、後者は3,050円と『電子申請』のほうがお得だ。しかも自宅のパソコンから3ステップで手続きが完了できる。手数料は近くのPay-easyが使えるATMから送金できる。(今回は郵便局のATMを使った。)Pay-easy利用のデモ体験もある。
電子申請は「電波利用 電子申請・届出システム lite」を使う。 利用するに当たってはまず「電波利用・届出システムlite」 にアクセスし、[新規ユーザー登録]をクリックし流れに従って「ID登録」をする。「ユーザーID発行依頼 到達のお知らせ」のメールが来る。数日後「ユーザーID通知書が郵送されてくる。ここに(ユーザーID)と(初期パスワード)が記載されている。「電波利用・届出システムlite」にアクセスして手順に従って(初期パスワード)を新しいパスワードに変更する。変更後一度[ログアウト]して、トップ画面の[申請・届出]から[再免許申請]をする。免許状を見ながら簡単に入力できる。送信して審査が終わると(間違いなければ)「申請・届出 到達のお知らせ」メールと、「申請手数料 電子納付手続きのお知らせ」メールが届く。これに「問い合わせ番号」が記載されているので指定のサイトにアクセスし、[1.収納機関番号 2.納付番号 3.確認番号]の納付情報を控えてATMから送金。この時管轄の総合通信局に免許状返送用封筒を郵送しておく。これですべて終了。後は新しい免許状が送られてくるのを待つだけだ。
納付情報
必要番号

画像のURLについて

何もしていなくても息苦しくなるような猛暑の毎日で、思考力も低下しそう。
ところで、先日クラブで「URLってなに?」と新しいメンバーの問いがありました。
他のメンバーの方が「アドレス、住所のようなものだよ」と教えていました。
私もソースの中で「画像のURL」というような表現をしていますが、初心者にはなかなか解りづらいのかも知れませんね。
[URL]とは「Uniform Resource Locator」の略で、「Yahoo百科事典」には(インターネットにある情報の場所を特定するための表記法(住所のようなもの)。具体的には、http://www.shogakukan.co.jp/magazines/のように表記し、その情報にアクセスするためのプロトコル(通信規約)、サーバー(情報を提供するもの)の名称、サーバー内の情報のありかで構成される。この書式で表現された情報のありかは世界で唯一である。URLはさまざまなものを表せるが、一般的にはWWWのページのありかを示すために使われることが多い。[ 執筆者:中島由弘 ])と記されています。
いま見ているこのブログのURLはアドレス欄に(http://ja6ei.blog118.fc2.com/)と出ています。これが[Sakuraの散歩道]のURLですね。
それはさておき、今日は画像ファイルのアドレスに絞って記しておきます。

氷山

例として氷山の写真を使います。写真の上で右クリックして表示されたメニューの(プロパティ)をクックします。(プロパティ)の画面が出ます。「アドレス(URL)」に『http://blog-imgs-62.fc2.com/j/a/6/ja6ei/8-11hyouzan.jpg』というのがありますね。これがこの画像のURLです。FC2の私の画像フォルダ中の(8-11hyouzan.jpg)というファイルであるということです。
ですから、この画像を表示しなさいという下の命令を与えると写真が表示されます。
<img src="http://blog-imgs-62.fc2.com/j/a/6/ja6ei/8-11hyouzan.jpg"border="0" width="500" height="372">
この画像URLをコピーしてブラウザのURL欄に貼り付けてEnterすると新しいページにこの写真が表示されますね。
それからこの写真は置き場所によってURLは変わりますよ。試しに写真の上で右クリックし、「コピー」します。それを適当な場所、例えば(デスクトップ)に貼り付けて、右クリックで(プロパティ)を見ると私の場合(場所)が(C:\Users\KONOMI\Desktop)となります。(web上ではないのでアドレスではなく場所になります。web上ではファイル名まで表示されています。)
ブログなどで写真を使うにはこういう仕組みがあるんだなということも知っておく必要がありますね。

8月 蝉

連日33度を超す猛暑、蝉だけは元気……  近くの公園  蝉の声が賑やかだ。
プロフィール

ja6ei

Author:ja6ei
FC2ブログへようこそ!

カレンダー
07 | 2013/08 | 09
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
最近の記事
最近のコメント
最近のトラックバック
月別アーカイブ
カテゴリー
ブロとも申請フォーム

この人とブロともになる

リンク
ブログ内検索
RSSフィード
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。