onclickで２枚の画像を表示してみる

ほんとは・・・スライドショーを表示させようとして調べてたら

いつの間にか気になる記事を見つけたのでTRYしてみましたｗ

 

午後ずっとHTMLの羅列見ながら格闘してたら気持ち悪くなりダウンｗ

４時間ほど不貞寝をし、何とか完成。

 

  

↓画像をクリックすると　２枚の画像が交互に表示されます

  

 

 

 

<

<

 

 

 

そんだけと言えばそんだけですが・・・・

 

式はこんなんです。（<>は大文字にしてあります） 

 ＜span style="font-size:0px;"＞＜＜div id="number" width=0＞＜/div＞＜＜img src="http://blogimg.goo.ne.jp/user_image/33/32/fde8cfe67a1f94634ae29bf103cf0cd3.jpg" onclick="U='http://blogimg.goo.ne.jp/user_image/';if(number.width==0){this.src=U+'51/86/5d4ee92b00a464416851d546efa09474.jpg';number.width=1;}else{this.src=U+'33/32/fde8cfe67a1f94634ae29bf103cf0cd3.jpg';number.width=0;}"＞＜/span＞

 

 

何て言うか、今までに使ったこと無いタイプです。

ここで使っているワザはUという変数を代入することでURLを短縮する事です。

ブログにアップした画像の頭は一緒なのでそこを短縮すると言うのが狙いです。

U='http://blogimg.goo.ne.jp/user_image/'

わしのやり方がまずいのか判らないけど・・・
これが、一回アップすると式が変化するらしく、二度目アップロードすると壊れますｗ(´・ω・`)

 

 

 

 

どんぐり様をそのまま参照にさせていただきました。

画像表示についてや小技など色々なワザが載せてあり凄いです。

他にも色々試してみようかと思いました。