オンマウスで吹き出し( ゚∀゚)o彡゜PON! PON! PON!


下の画像、文字にマウスをあててみてください。

 説明

ロトシミュレーションみたいな感じですね
やり方は追記で( ゚∀゚)o彡゜


まず、以下のコードをどこかに貼り付けます。
※ ブログの場合、テンプレートのHTML内に貼ると、毎回貼らずに済みます。
<script type="text/javascript"><!--
var poptext = "";
var popvisible = 0;
document.write("<div id='PopupText' style='visibility:hidden;'></div>");
window.document.onmousemove = getMouseXY; //IE,Chrome以外に対応するため
function getMouseXY(PopEvent){
  Popup=document.getElementById("PopupText");
  if(popvisible == 1){
    if (undefined !== window.ActiveXObject) {//IE
      var __base__scroll__;
      if(document.compatMode=='CSS1Compat') {//IEモード1
        __base__scroll__ = document.documentElement;
        x = __base__scroll__.scrollLeft + event.clientX;
        y = __base__scroll__.scrollTop + event.clientY;
      }
      else {//IEモード2
        x = document.body.scrollLeft + event.clientX;
        y = document.body.scrollTop + event.clientY;
      }
    }
    else{//IE以外
      x = PopEvent.pageX + 0; //ズレる場合は数値を変えてください
      y = PopEvent.pageY + 0;
    }
    Popup=document.getElementById("PopupText");
    Popup.innerHTML = poptext;
    Popup.style.position = "absolute";
    Popup.style.zIndex = 10000;
    Popup.style.margin = 0 + "px";
    //----- 自由に変更(吹き出しデザイン) ここから -----
    //変更したくない部分は、スラッシュ2個(//)でコメントアウトしてください。
    Popup.style.left = x + 10 + "px"; //マウスからの横座標(吹き出し位置)
    Popup.style.top = y + 15 + "px"; //マウスからの縦座標(吹き出し位置)
    Popup.style.maxWidth = 300 + "px"; //横幅の最大値
    Popup.style.border = "solid #bb7f44 2px"; //枠色・太さ
    Popup.style.padding = 3 + "px"; //枠内の余白
    Popup.style.color = "#eeeeaa"; //文字色
    Popup.style.fontSize = 13 + "px"; //文字サイズ
    Popup.style.fontFamily = "Osaka","MS Pゴシック","sans-serif"; //文字種類(左から優先)
    Popup.style.lineHeight = '1.25'; //行と行の間隔
    Popup.style.backgroundColor = "#000000"; //背景色
    //----- 自由に変更(吹き出しデザイン) ここまで -----
    Popup.style.visibility = "visible";
  }
  else{ Popup.style.visibility = "hidden"; }
}
// --></script>
オレンジ部分を書き変えると、吹き出しのデザインを変更できます。
※ 記事内に貼る場合は、「自動改行」ではなく「HTMLタグのみ」にしてください
※ サイトによって、IE以外では少々ズレる場合があります。各々で調節してください。


これで準備完了!


あとは好きなHTMLタグに、以下のコードを追加するだけです。
onMouseover='poptext="吹き出させたい文章";popvisible=1;' onMouseOut='popvisible=0;'

この記事の上のやつを例にあげると
道士服の画像
<img src="http://blog-imgs-55.fc2.com/k/o/u/kou0120/rotoitem31.png" border="0" width="32" height="32" onMouseover='poptext="古い道士服";popvisible=1;' onMouseOut="popvisible=0;" />
画像横の説明
<font size=5 onMouseover='poptext="これはシーフの防具です。";popvisible=1;' onMouseOut="popvisible=0;">説明</font>
となります。


気になった方は、一度やってみてください( ゚∀゚)o彡゜


でもまあ、タグにコードつけたすのが結構めんどいんで、
使い道なんて全然ないんすけどWW



じゃあのOh!Yeah!!

対応ブラウザ:IE、Chrome、firefox、Opera、safari
java,javascript,script,ジャバスクリプト,吹き出し,マウスオン,マウスオーバー,かざす,onmouseover,onmousemove,ポップアップ,ツールチップ,tooltip,popup,hukidashi,fukidashi,hukidasi,fukidashi,マウス座標,firefox
スポンサーサイト

コメント

あめ

これは上級者テクすぎる・・・!
やってみようかなと思ったけど無理はしないでおこうwwwwwww

こぅ >あめちゃん

一回やってみたら結構カンタンだよ!!
暇なときにやってみて( ゚∀゚)o彡゜

コメントの投稿

今日のこぅくん
テニスと映画とプログラムが好きです
頑張るぞー( ゚∀゚)o彡゜
リンク先の更新!
プロフィール

こぅです(゜∀゚()
REDSTONEの青鯖にいます。
ギルドラオス共和国に所属。

引退してます。

九州住みの大学生です(  ̄^ ̄)ゝ

・Twitter: koukunRS
・Skype: yamadashi_skype
・Discord: kou#9204
・Gmail: koukun0120@...



赤石( ゚∀゚)o彡゜
リンク
いつもより余計に回っております


こっそり