ホームページ作成日記
2021 / 01   «« »»
01
F
 
02
S
 
03
S
 
04
M
 
05
T
 
06
W
 
07
T
 
08
F
 
09
S
 
10
S
11
M
 
12
T
 
13
W
 
14
T
 
15
F
 
16
S
 
17
S
 
18
M
 
19
T
 
20
W
 
21
T
 
22
F
 
23
S
 
24
S
 
25
M
 
26
T
 
27
W
 
28
T
 
29
F
 
30
S
 
31
S
 
meaning of mark :: nothing , comment , trackback , comment and trackback
【HOME】  |  [TOP]
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 は2か所に書き込んで、用意した2個目の画像は、img/□.gif に書くだけです。

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

posted at 2020/11/28 5:23:52
lastupdate at 2020/11/28 5:38:51
-修正-  
 
▲ Pageの上へ ▲



Trackback URL

クリップボードへコピーする場合は こちらをクリック(Win+IEのみ)

Trackbacks

Comments

Post your Comment
name
mail
home
comment
文字装飾 グラデーション 絵文字



pplog2 by Rocomotion
pplog2 by Rocomotion
Designed by info-cache.com