マウスオンロールオーバー

Windows10でウェブリブログを使用している方に
表示画像の上にマウスポインタを乗せた時に
別の画像を表示させる方法の一例を紹介します
そんなに難しく無いので 興味のある方は挑戦してみて下い
(JavaScript(ジャバスクリプト)を
無効にされているプラウザ上では動作しないと思います)

構文は下記のようになります
<img src="画像1URL" onmouseover="this.src='画像2URL';" onmouseout="this.src='画像1URL';">

画像1URL:最初に表示させたい画像のURL       
画像2URL:マウスが乗ったときに表示させたい画像のURL

***これ重要***
コピペされる方は貼り付けた構文の
先頭の<と最後の>を半角の<>に置き換えて下さい

最初から半角の<>を使えよと言われそうですが
半角の<>で囲むと 正式な構文と解釈され
記事ページ上に表示できないので わざと全角の<>を使っています

******
以上で完了ですが 良く分からないなと思う方は下記を参考にして下さい

************************************
ファイルマネージャーを開いて次の操作を行い URLをコピーします

HTMLと書いてある所をクリックして下さい
コメント 2019-08-31 110623.jpg


四角いマスの中に画像のURLが表示されますのでコピーしてください
コメント 2019-08-31 110719.jpg
コピーは同時に2個は出来ないので
コピーしたURLを貼り付ける時
記事作成とファイルマネージャーの間を
行ったり来たりをする事になり 煩わしいので
メモ帳を開いておいて使うと便利だと思います

私はメモ帳に構文を書いたものをファイルに保存して
必要な時に呼び出してメモ帳上で編集し記事にコピーして使っています
参考例
コメント 2019-08-31 160127.jpg

***これ重要***
ファイルを貼り付けする時には下記に注意してください
コピーしたURLの下記の青い部分に相当するところを
構文の「画像1URL」「画像2URL」に其々貼り付けて下さい


画像1URLの例
<div style="text-align: center"><a href="htps://userdisk.webry.biglobe.ne.jp/016/307/02/N000/000/000/156688472201999993172.jpg" target="_blank"><img alt="Mainsita01.jpg" src="htps://userdisk.webry.biglobe.ne.jp/016/307/02/N000/000/000/156688472201999993172-thumbnail2.jpg" width="400" height="266" border="0"></a></div>
(httpsをわざとhtpsにしてあります 理由は上記と同じで支障が出る為です)

2個の画像サイズ(width & height)は同じにする
自分の使用している記事蘭の横幅を超えないサイズにする事も重要です
(サイズオーバーの画像を使用すると記事蘭全てが崩れてしまいます)
******

以上ゴチャゴチャ書きましたが これでおしまいです
他にもやり方は何種類かあると思いますが 私は簡単なので此れを使っています
ご苦労様でした
皆さん 楽しいブログライフをおおくりください
動作確認プラウザ:Firefox, Microdoft Edge. Internet Explorer11

9月になったのに何時までも暑い・・・
すっかり出不精になってしまい ブログネタが厳しい・・・・
皆さんのブログを拝見すると暑さに負けず楽しんでいらっしゃいますね
今週中はまだまだ暑そう・・・
頑張らなくちゃと思いますが 多分無理だな・・・

画像提供”壁紙宇宙館さま”

ブログ気持玉

クリックして気持ちを伝えよう!

ログインしてクリックすれば、自分のブログへのリンクが付きます。

→ログインへ

なるほど(納得、参考になった、ヘー)
驚いた
面白い
ナイス
ガッツ(がんばれ!)
かわいい

気持玉数 : 0

この記事へのコメント