2020/11/28 :: 画像入れ替え
「ロリポップ！マネージドクラウド」は
WebアプリケーションやWebサイトを「楽」に運営するためのサーバーサービスです。
保守・メンテナンスなどサーバー運用のための専門知識や人材確保は必要ありません。
インフラを気にすることなく、Webサービス開発やビジネスに集中することができます。



[:目がまわる:] タグ「＜と＞」は、全角文字に取り換えていますので、ソースをコピーする場合は、半角文字に変えてください。

このカテゴリは、サイトの作成当初（実は昔から・・）から必ず作る・・という考えはあった。

「タグソース」や「便利」というカテゴリは、
私のメインサイトでも、同じように昔から作りたかったカテゴリで、
特に「タグソース」は、このサイト・・でショ！
と、いうことで、

今回は、今日サイトのホーム・・トップページで使ってみた、
常に表示されている画像に、マウスオーバーで、別の画像に切り替わるように、
＜img src="img/■.jpg" width="？px"＞ のようなソースを、


▼▼▼▼▼▼▼▼【マウスオーバーで画像入れ替え】▼▼▼▼▼▼▼▼

＜img src="img/■.gif" width="100%" onmouseover="this.src='img/□.gif'" onmouseout="this.src='img/■.gif'" alt="名前" title="説明"＞

▽▽ 以下は、要らない！！無視してください　▽▽
＜img border="1" src="img/□.gif" width="1" height="1"＞

▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲

img/■.gif　の代わりに、切り替わる　img/□.gif を用意しておく。

＜img src="img/■.gif" width="100%" onmouseover="this.src='img/□.gif'" onmouseout="this.src='img/■.gif'"＞

■.gif は２か所に書き込んで、用意した２個目の画像は、img/□.gif に書くだけです。

CSSファイルによって、同じように表示させる方法もありますが、
上記の方法は、とにかく簡単なのでページや設置個所が少ないなら、
絶対にお勧めです。
　!!$img1!!