リアルタムピグ＆マウスオーバー

(function real_time_pigg() {var lt=String.fromCharCode(0x3c),gt=String.fromCharCode(0x3e),amp=String.fromCharCode(0x26);document.getElementById('id1').innerHTML = lt+'input id=\"id2\" value=\"knife1968\"'+gt;function change(){var url='http://contents.pigg.ameba.jp/api/0/user/';var id=document.getElementById('id2').value;var p=document.getElementById('part').selectedIndex;var w=new Array(264,180,120,60,104,104);var h=new Array(308,210,140,70,104,104);var part=document.getElementById('part').options[p].value;var shadow=document.getElementById('shadow').options[document.getElementById('shadow').selectedIndex].value;var type=document.getElementById('type').options[document.getElementById('type').selectedIndex].value;var direction1=document.getElementById('direction1').options[document.getElementById('direction1').selectedIndex].value;var direction2=document.getElementById('direction2').options[document.getElementById('direction2').selectedIndex].value;var action1=document.getElementById('action1').options[document.getElementById('action1').selectedIndex].value;var action2=document.getElementById('action2').options[document.getElementById('action2').selectedIndex].value;var src1=url+id+'/image?part='+part+amp+'direction='+direction1+amp+'shadow='+shadow+amp+'action='+action1+amp+'type='+type;var src2=url+id+'/image?part='+part+amp+'direction='+direction2+amp+'shadow='+shadow+amp+'action='+action2+amp+'type='+type;var l=document.getElementById('link').selectedIndex;var lnk1=lnk2=lnk3=lnk4='';var ta1=lt+'textarea readonly onclick=\"this.select();\"'+gt;var ta2=lt+'/textarea'+gt;var d=new Date();var ts=d.getTime();switch ( l ) {case 0: break;case 1:lnk1=lt+'a href=\"http://ameblo.jp/'+id+'\" target=\"_blank\"'+gt;lnk2=lt+'/a'+gt;lnk3='<a href=\"http://ameblo.jp/'+id+'\" target=\"_blank\">';lnk4='&lt/a>';break;case 2:lnk1=lt+'a href=\"http://now.ameba.jp/'+id+'\" target=\"_blank\"'+gt;lnk2=lt+'/a'+gt;lnk3='<a href=\"http://now.ameba.jp/'+id+'\" target=\"_blank\">';lnk4='&lt/a>';break;case 3:lnk1=lt+'a href=\"http://pigg.ameba.jp/core/main?tid='+id+'\" target=\"_blank\"'+gt;lnk2=lt+'/a'+gt;lnk3='<a href=\"http://pigg.ameba.jp/core/main?tid='+id+'\" target=\"_blank\">';lnk4='&lt/a>';break;case 4:lnk1=lt+'a href=\"http://life.pigg.ameba.jp/user/'+id+'\" target=\"_blank\"'+gt;lnk2=lt+'/a'+gt;lnk3='<a href=\"http://life.pigg.ameba.jp/user/'+id+'\" target=\"_blank\">';lnk4='&lt/a>';break;case 5:lnk1=lt+'a href=\"http://world.pigg.ameba.jp/user/'+id+'\" target=\"_blank\"'+gt;lnk2=lt+'/a'+gt;lnk3='<a href=\"http://world.pigg.ameba.jp/user/'+id+'\" target=\"_blank\">';lnk4='&lt/a>';break;case 6:lnk1=lt+'a href=\"http://cafe.pigg.ameba.jp/user/'+id+'\" target=\"_blank\"'+gt;lnk2=lt+'/a'+gt;lnk3='<a href=\"http://cafe.pigg.ameba.jp/user/'+id+'\" target=\"_blank\">';lnk4='&lt/a>';break;case 7:lnk1=lt+'a href=\"http://island.pigg.ameba.jp/user/'+id+'\" target=\"_blank\"'+gt;lnk2=lt+'/a'+gt;lnk3='<a href=\"http://island.pigg.ameba.jp/user/'+id+'\" target=\"_blank\">';lnk4='&lt/a>';break;}document.getElementById('img1').innerHTML = lnk1+lt+'img src='+src1+' /'+gt+lnk2;document.getElementById('tag1').innerHTML = ta1+lnk3+'<img src=\"'+src1+'\" />'+lnk4+ta2;document.getElementById('img2').innerHTML = lnk1+lt+'img src='+src2+' /'+gt+lnk2;document.getElementById('tag2').innerHTML = ta1+lnk3+'<img src=\"'+src2+'\" />'+lnk4+ta2;document.getElementById('img3').innerHTML = lt+'sty'+'le'+gt+'span#pigg_mouseover { display: inline-block; width: '+w[p]+'px; height: '+h[p]+'px; background-image: url('+src1+'); } span#pigg_mouseover:hover { background-image: url('+src2+'); }'+lt+'/sty'+'le'+gt+lnk1+lt+'span id=\"pigg_mouseover\"'+gt+lt+'/span'+gt+lnk2;document.getElementById('tag3').innerHTML = ta1+'<sty'+'le>span#rtpmo'+ts+'{display:inline-block;width:'+w[p]+'px;height:'+h[p]+'px;background-image:url('+src1+');}span#rtpmo'+ts+':hover{background-image:url('+src2+');}&lt/sty'+'le>'+lnk3+'<span id=\"rtpmo'+ts+'\"></span>'+lnk4+ta2;/*var s1=document.getElementById('url1').childNodes[0].scrollHeight;var s2=document.getElementById('url2').childNodes[0].scrollHeight;eval('document.getElementById(\'url1\').childNodes[0].sty\'+\'le.height = Math.max(s1,s2)+2;');eval('document.getElementById(\'url2\').childNodes[0].sty\'+\'le.height = Math.max(s1,s2)+2;');eval('document.getElementById(\'sc\').childNodes[0].sty\'+\'le.height = document.getElementById(\'sc\').childNodes[0].scrollHeight+2;');*/};change();onchange=function() { change(); };})();リアルタイムピグ画像などと呼ばれる、ピグ上でのきせかえが、ブログの画像にリアルタイムに反映される仕組みを、初心者でも使いやすいように作りこんでみました。

また、マウスオーバーで向きやアクションを切り替えるということも出来るようにしてあります。
※但し、他人のIDを利用する場合などは、本人に了承を得るようにしてください。

更に、画像のリンク先も選べるようにしました。

かなり使い勝手は良いはずです。（自画自賛？）

ID
表示	全身: 264px × 308px全身: 180px x 210px全身: 120px x 140px全身: 60px x 70px顔□: 104px x 104px顔○: 104px x 104px
影	影あり影なし
ﾌｫｰﾏｯﾄ	.png.gif
リンク	リンクなしブログなうピグライフワールドカフェアイランド
向き	左前向き右前向き	左前向き右前向き
ｱｸｼｮﾝ	デフォルトあいさつうれしい(1)うれしい(2)かなしい(1)かなしい(2)いらいら(1)いらいら(2)プリーズスマイルびっくり考える(1)考える(2)シャイクール	デフォルトあいさつうれしい(1)うれしい(2)かなしい(1)かなしい(2)いらいら(1)いらいら(2)プリーズスマイルびっくり考える(1)考える(2)シャイクール
画像
imgタグ ソース
マウス オーバー
マウス オーバー ソース

念のため、使い方を説明しておきます。

IDには、表示したいアメーバのIDを入力します。

その他の設定は、いろいろ変更して確認してみてください。

画像が三つありますが、
上の左がマウスが当たっていないとき、
上の右がマウスを当てたとき、
下がマウスを当てたり外したりの動作確認用です。

リンクをリンクなし以外に設定してあると、画像をクリックすると新しいタブで開くことを確認出来ます。

背景透過ピグの画像ファイルが欲しいということであれば、画像を右クリックし、名前を付けて画像を保存でよいでしょう。
※マウスオーバーの画像は背景画像なので保存は出来ません。

それぞれの画像の下にあるhtmlタグは、ブログの記事やフリースペースなどにコピペするためのものです。
クリックするだけで全文選択されるようにしてありますので、<Ctrl]+<C>やマウスの右クリックでコピーし、記事やフリースペースなどに<Ctrl>+<V>やマウスの右クリックでペースト(貼り付け)してお使いください。

※Firefoxの標準エディタ以外での記事投稿ではマウスオーバーのソースが壊れてしまう症状が出ておりました。
どうやら<style>タグに空白や改行があることが原因のようでした。
修正いたしましたので、ご確認ください。

なお、新エディタにおいては、表示の確認や公開で<style>タグが消去されてしまうため、こちらは今のところ未サポートとします。

一応、Firefox、Chrome、Edgeでの動作確認はしていますが、不具合やご要望などございましたら、コメントください。

使って頂けるのであれば、この記事のリンクなどを記事として上げて頂ければ幸いです。