07月≪ 2017年08月 ≫09月

12345678910111213141516171819202122232425262728293031

2011.02.10 (Thu) 18:18

クリックすると別の画像が表示される

今日は、西の方からご質問のあった画像表示のご案内をさせていただきに参りました。

Windows7も、快調に動作していますので
心配なく記事を投稿できそうです。


ということで、その画像表示とはなに!?というところですが


いえ、そんなに大層なことではないのですよ。


   クリックしてみてね ↓


うまい~


クリックすると、単に同じ画像であったり、同じ画像の拡大バージョンが表示されるのではなく
別の画像を表示させる方法です。



とても簡単ですよ♪


上の画像のコードは、このようになっています。

<a href="http://blog-imgs-26.fc2.com/c/o/g/cogipearl/IMG_0205(1).jpg" target="_blank"><img src="http://blog-imgs-26.fc2.com/c/o/g/cogipearl/IMG_0205.jpg" alt="うまい~" border="0" width="538" height="375" /></a>


青文字の箇所が、記事に最初に表示されている画像です。
それに対して、赤文字の箇所が、クリック後に別ウィンドウで表示される画像です。


これは、ファイルアップロードを使って2枚の画像をアップロードします。

ファイルアップロード画面


その際、赤丸の「サムネイル」の箇所にチェックが入っていると
自動的に縮小された画像もアップロードされます。

その場合は、青囲みのようなボタン表示になります。


「サムネイル」の箇所にチェックが入っていないと
赤囲みのようなボタン表示になります。


どちらのケースでも良いので
「この画像で記事を書く」ボタン、もしくは「サムネイルで記事を書く」ボタンをクリックします。

すると

こんな風に画像が記事に挿入されますね♪
ここまでは、みなさんいつもされていると思いま~す。

  クリックすると同じ画像が別ウィンドウで表示されます↓
  (クリックする意味がないですね)
うまい~

上の画像のコードはこのようになっています。

<a href="http://blog-imgs-26.fc2.com/c/o/g/cogipearl/IMG_0205.jpg" target="_blank"><img src="http://blog-imgs-26.fc2.com/c/o/g/cogipearl/IMG_0205.jpg" alt="うまい~" border="0" width="538" height="375" /></a>

赤文字も青文字も同じ画像であることがわかります。

つまり、別の画像を表示させるためには、赤文字の部分を別の画像にすればよいことになります!

そこで、2枚目の画像が必要になります♪

クリック後に表示させたい画像をもう1枚アップロードしましょうね!


ファイルアップロード画面2


緑枠で囲んでいるのが、クリック後に表示させたい画像のファイル名です。
これを、下のコードであれば緑文字のところに貼りつけるわけです。

<a href="http://blog-imgs-26.fc2.com/c/o/g/cogipearl/IMG_0205(1).jpg" target="_blank"><img src="http://blog-imgs-26.fc2.com/c/o/g/cogipearl/IMG_0205.jpg" alt="うまい~" border="0" width="538" height="375" /></a>

すると、こんな風になります。
クリックしてびっくりしないでねヾ(≧▽≦)ノギャハハ☆
やめられない~


おしまい。
2011-02-10 (木) 18:18  |  PC講座  |  TB(0)  |  コメントはこちらへ(6)  |  EDIT  |  Top↑

2011.02.09 (Wed) 00:06

マウスを重ねると画像が変わる

こんばんは~~~♪

以前にチャヌパパさんに質問されていた画像表示のテクニックがあるのですが
それは、次回にということで(いつまで待たせるねん!)
こっちの方が、使い道があるかな??

と思ったので、今日は

マウスを重ねると表示画像が変わるテクニックのご紹介です。

下の写真は以前の使いまわしですが
マウスポインタを画像に重ねる→画像から外すを繰り返してみてください。

マウスポインタが乗っている時の画像と、離れた時の画像が違うのが確認していただけたでしょうか??


パールの写真


これは下のようにコードが記入されています。

<img src="画像パス1" alt="画像の名前" onMouseOver="this.src='画像パス1'" onMouseOut="this.src='画像パス2'">

 ↑コードをコピーしてメモ帳などに保存しておくと便利です


これを実際のコードで見るとこんな風になります。

1つ目の下線が「画像パス1」
2つ目の下線が「画像の名前」
3つ目の下線が「画像パス1」
4つ目の下線が「画像パス2」


<img src="http://blog-imgs-44.fc2.com/c/o/g/cogipearl/IMG_0226-1.jpg" alt="パールの写真" onMouseOver="this.src='http://blog-imgs-44.fc2.com/c/o/g/cogipearl/IMG_0226-1.jpg'" onMouseOut="this.src='http://blog-imgs-44.fc2.com/c/o/g/cogipearl/IMG_0227-1.jpg'">


画像のパスというのは、FC2ブログであれば、画像のアップロードをした直後に表示される赤文字の部分です。
これをコピーして使用するといいですね♪
キャプチャ


みなさんのブログの画像に楽しみが増えれば幸いです。

書かなければならないPC講座がたまってきております。

まだまだ先延ばしになりそうです。(笑)

今日はパールのシャンプーをして、片づけにクタクタです。。。
2011-02-09 (水) 00:06  |  PC講座  |  TB(0)  |  コメントはこちらへ(4)  |  EDIT  |  Top↑
 | HOME |