ブログパーツ

趣味の工房

☆マウスオーバーで画像を変更する方法☆

みなさん、こんばんは♪
そろそろネタに詰まってきた感のあるこのシリーズですが(はやっ
タイトルにある通りマウスオーバーで画像を変更する方法について。


ま、口で説明するより、下の画像にカーソルを乗っけてみてくださいw


HAF932



記述はこんな感じ。

<span onmouseover="document.画像タグ.src='変更後の画像のURL';" onmouseout="document.画像タグ.src='元画像のURL';">

<img name="画像タグ" alt="代替文字列の名前" title="画像の名前" width="600(幅のピクセル値" height="450(高さのピクセル値)" border="0(境界線のピクセル値)" src="変更後の画像のURL">

</span>



わけがわかりませんね( ̄∇ ̄;)
※それでも見やすくするために途中に1行空けてますが、本来必要ありません。
 黄色以外の部分は任意の名前や数字、URLになります。


最初の<span style=○○○○>の部分と、</span>で挟まれた部分にマウスを乗っけると、指定した画像を変更する記述です。

で、その挟まれた部分(img name=から始まる部分)に画像の記述がされていることになります。
さらに「name=”画像タグ”」は先日特定の文字にリンクさせる方法でご紹介した、文字や絵に「タグ」をつける記述でしたね。
それ以外の中身については、画像リンクを貼る方法で、説明しています。
中身の「alt」など、属性の順番が変わっているので、わかりづらいかもしれませんが…( ̄∇ ̄;)




では、上の記述の真ん中を文字にしたらどうなるか!?


ここにカーソルを乗せてください。

HAF932




画像に乗せても変わらないのに、文字に乗せると変わりましたね。


記述はこんな感じ。

<span onmouseover="document.画像タグ.src='変更後の画像のURL';" onmouseout="document.画像タグ.src='元画像のURL';">

ここにマウスをのせてください。

</span>


<img name="画像タグ" alt="HAF932" title="HAF932" width="600" height="450" border="0" src="変更後の画像のURL">



最初の<span style=○○○○>の部分と、</span>の間には文字のみで、タグをつけた画像の記述をその後に書くとこうなります。
と、言うことは、間に別の画像(アイコンなど)を差し込んでおいて、変わるのは他の画像って事もできるわけですね。v( ̄∇ ̄)


わかりましたか!?…わかりませんよね…(爆)



ま、早い話、変更前と、変更後、2つの画像をアップロードしておいて、URLを取得しておけば、コチラのサイト様で変換してくれますw


下の方に自動変換してくれるとこがありますので、ご活用ください♪
先に言えって!?
















しまった~~~!!!
ムスカ




では。




ランキングに参加しております。クリックにご協力を♪


にほんブログ村 PC家電ブログ 自作PCへ
にほんブログ村





関連記事


    22:05 | Trackback : 0 | Comment : 6 | Top
Comment
さすがパパさんw

最後まで隠しておくwww
でも、勉強になりますね^^

どんどん授業よろしくですw
  [URL] [Edit]
2010.09.05 Sun 22:47  |  りくんちゅ。パパ #-
>夜王さん

こんばんわ♪
いや、先に書いちゃうと3行でネタ終了なので(爆)
  [URL] [Edit]
自分なんか、もう書くことないですよ~(*´-ω-`)・・・フゥ
  [URL] [Edit]
2010.09.05 Sun 23:08  |  りくんちゅ。パパ #-
まぁ、なければ無理して書かなくてもいいと思いますよ♪

気になってるパーツとかでもいいと思いますし。
単なる日記みたいな記事でもいいと思いますよ~。

…そしたら夜王さんの生態がわかるwww
  [URL] [Edit]
17日までは、金欠なので、なにも出来ずにいます^^;

まぁ、適当に書いてみますwww
  [URL] [Edit]
2010.09.06 Mon 08:10  |  りくんちゅ。パパ #-
>夜王さん

17日って…具体的ですねぇ(爆)
しかもまだ10日以上あるじゃないですかw
まぁボクは万年金欠ですが(ToT)

ネタにつまったら、ボクのパソコン載っけてください(爆)
  [URL] [Edit]









(編集・削除用)


管理者にだけ表示を許可
Trackback
http://rikuntyudady.blog101.fc2.com/tb.php/296-047dc7cf
プロフィール

りくんちゅ。パパ

Author:りくんちゅ。パパ
初歩的な話からオーバークロックまで、PCに関することやその他趣味に関することを思い付きで書いています。
コメントはお気軽にどぞ。

「rikuntyudady」の名前で出没することもあります(笑)

rikuntyudady01.jpg

このサイトはFirefox,Google Chrome用に最適化されています。
IEでは一部表示が正しく行われない場合があります。
ご了承ください。


アクセスカウンター
signbot_20101017072856.gif
現在の閲覧者数:

galleryロゴ02
cmcrogo2.png
RikuntyudadyのCM690をUP!!
☆ただ今34台展示中☆



みんなのPC♪ギャラリーはコチラ。

Page 1 Page 2


Categories...

クリックで全て開閉↓

openclose


○自作をしてみたい方へ
○オーバークロックについて

「+」はフォルダクリックでOPEN

全ての記事を表示する


見つからない場合はコチラ
(記事内検索)

最新記事
最新コメント
☆MY GEAR☆
カスタマイズ工程はコチラ
画像
画像
画像
画像
画像
画像
画像
ATCS840
COSMOS II
CORE1500
MasterCase5Mod

<製作依頼PC>
画像
Overclock.net work log
MNPCTECH"Case Mod Blog"
画像
画像
【CORSAIR Vengeance® C70】
HAF X MOD

<コラボ企画> 画像
SNIPER
☆おもな活動サイト☆

Cooler Master Forum
CoolerMaster

techPoweUp! Case Mod Gallary-
techPowerUp!

Overclock.net
   -Case Mod Work Logs-
Overclock.net

Case Modding Forum
Case Modding Forum

こだわりの持ち物を登録しよう♪
2010y05m05d_221238218.jpg

Web page translation
THIS IS MY GEAR
2016y03m23d_233159886.png 2016y03m23d_233204419.png
感染者増殖中...
りくんちゅ。パパにメールする







本文:

☆掲示板☆

趣味の工房 ~みんなの休憩室♪~
お気に入りブログ♪
カメラ熱上昇中♪
【Canon】EOS 70D 70D.png ○レンズ
【Canon】
EF-S18-135mm F3.5-5.6 IS STM
EF-S55-250mm F4-5.6 IS STM 【SIGMA】
18-35mm F1.8 DC HSM|Art
APO 50-150mm F2.8 EX DC OS HSM


【Canon】G7 X canon_g7x_20150528010550367.png
☆広告☆
ブロとも申請フォーム
QRコード
QRコード
RSSリンクの表示