jQueryで動きのある吹き出しを設置してみた

Build a Better Tooltip with jQuery Awesomeness – Nettuts+

ソースは上記サイトにありますのでどうぞ。実際どのようになるかは下でお試しください。

日本語版ここわかりやすいお

http://weboook.blog22.fc2.com/blog-entry-104.html

引用元: jQueryで動きのある吹き出しを設置してみた.

googleの動画ＡＰＩを使って簡単にblogに簡単に動画を載せれます。 いままでみたいに、youtubeに行ってＵＲＬをＧＥＴして・・・・ ってやり方より簡単だとおもうんだ。 では、サンプルで 昔ＨＰを作らせてもらっていたDJKRUSHさんを の動画を出さしてもらいます。

サンプルソース　DJKRUSHさんの場合

<!-- ++Begin Video Bar Wizard Generated Code++ -->
  <!--
  // Created with a Google AJAX Search Wizard
  // http://code.google.com/apis/ajaxsearch/wizards.html
  -->

  <!--
  // The Following div element will end up holding the actual videobar.
  // You can place this anywhere on your page.
  -->
  <div id="videoBar-bar">
    <span style="color:#676767;font-size:11px;margin:10px;padding:4px;">Loading...</span>
  </div>

  <!-- Ajax Search Api and Stylesheet
  // Note: If you are already using the AJAX Search API, then do not include it
  //       or its stylesheet again
  -->
  <script src="http://www.google.com/uds/api?file=uds.js&v=1.0&source=uds-vbw"
    type="text/javascript"></script>
  <style type="text/css">
    @import url("http://www.google.com/uds/css/gsearch.css");
  </style>

  <!-- Video Bar Code and Stylesheet -->
  <script type="text/javascript">
    window._uds_vbw_donotrepair = true;
  </script>
  <script src="http://www.google.com/uds/solutions/videobar/gsvideobar.js?mode=new"
    type="text/javascript"></script>
  <style type="text/css">
    @import url("http://www.google.com/uds/solutions/videobar/gsvideobar.css");
  </style>

  <style type="text/css">
    .playerInnerBox_gsvb .player_gsvb {
      width : 320px;
      height : 260px;
    }
  </style>
  <script type="text/javascript">
    function LoadVideoBar() {

    var videoBar;
    var options = {
        largeResultSet : !true,
        horizontal : true,
        autoExecuteList : {
          cycleTime : GSvideoBar.CYCLE_TIME_MEDIUM,
          cycleMode : GSvideoBar.CYCLE_MODE_LINEAR,
          executeList : ["DJKRUSH"]
        }
      }

    videoBar = new GSvideoBar(document.getElementById("videoBar-bar"),
                              GSvideoBar.PLAYER_ROOT_FLOATING,
                              options);
    }
    // arrange for this function to be called during body.onload
    // event processing
    GSearch.setOnLoadCallback(LoadVideoBar);
  </script>
<!-- ++End Video Bar Wizard Generated Code++ -->

Google AJAX Search API – Video Bar Wizard

google動画ajax apiの使い方

超簡単にgoogle動画ajax apiを使うやり方を載せときます。もちろん無料です！
あっいつか広告もつくかもしれないけどね・・それは、無料で使えるんだから
しょうがないかな！

下の桜ってとこを好きな言葉に替えて使ってみてね！

もっと詳しく見たい人は、
googleのサイト行ってね
http://www.google.com/uds/solutions/wizards/videosearch.html

例えば大好きなmusician

Souls of Mischiefでやる場合

サンプルソース

<!– ++Begin Video Search Control Wizard Generated Code++ –>
<!–
// Created with a Google AJAX Search Wizard
// http://code.google.com/apis/ajaxsearch/wizards.html
–>

<!–
// The Following div element will end up holding the Video Search Control.
// You can place this anywhere on your page.
–>
<div id=”videoControl”>
<span style=”color:#676767;font-size:11px;margin:10px;padding:4px;”>Loading…</span>
</div>

<!– Ajax Search Api and Stylesheet
// Note: If you are already using the AJAX Search API, then do not include it
//       or its stylesheet again
//
// The Key Embedded in the following script tag is designed to work with
// the following site:
// http://www.attrip.net/
–>
<script src=”http://www.google.com/uds/api?file=uds.js&v=1.0&source=uds-vsw&key=ABQIAAAApHIX8YIg5KHYLNcSiOj35hQDmivXsi0pG5LdUrPJEpF3rrbCORRrGogdp6UeXIpAfAW9NsYMel2HBg”
type=”text/javascript”></script>
<style type=”text/css”>
@import url(”http://www.google.com/uds/css/gsearch.css”);
</style>

<!– Video Search Control and Stylesheet –>
<script type=”text/javascript”>
window._uds_vsw_donotrepair = true;
</script>
<script src=”http://www.google.com/uds/solutions/videosearch/gsvideosearch.js?mode=new”
type=”text/javascript”></script>
<style type=”text/css”>
@import url(”http://www.google.com/uds/solutions/videosearch/gsvideosearch.css”);
</style>

<script type=”text/javascript”>
function LoadVideoSearchControl() {
var options = {
twoRowMode : true
};
var videoSearch = new GSvideoSearchControl(
document.getElementById(”videoControl”),
[{ query : "桜"}], null, null, options);
}
// arrange for this function to be called during body.onload
// event processing
GSearch.setOnLoadCallback(LoadVideoSearchControl);
</script>
<!– –End Video Search Control Wizard Generated Code– –>

[YUI] マウスオーバーでリンク先サムネイル表示

ソースコード

短いです。YUI と SimpleAPI に感謝！

<script type="text/javascript" src="js/yahoo.js"></script>
<script type="text/javascript" src="js/event.js"></script>
<script type="text/javascript" src="js/dom.js"></script>
<script type="text/javascript" src="js/container.js"></script>
<style type="text/css"><!--
.tt {
	position: absolute;
	padding: 4px;
	color: #333333;
	background-color: #DDEEFF;
	border:1px solid #66CCFF;
	width: 320px;
	font-size: 13px;
}
--></style>
<script type="text/javascript"><!--
    function init() {
        var list = document.getElementById('links').getElementsByTagName('a');
        for( var i=0; i<list.length; i++ ) {
            var el = 'tooltip'+i;
            var url = list[i].href;
            if ( ! url.match( /^https?:/ )) continue;
            var title = '<img src="http://img.simpleapi.net/small/'+url+'">';
            if ( list[i].title ) title += '<br>'+list[i].title;
            var tp = new YAHOO.widget.Tooltip( el, { context:list[i], text: title, autodismissdelay: 5000 } );
        }
    }
    YAHOO.util.Event.addListener(window, "load", init);
--></script>

引用元: [YUI] マウスオーバーでリンク先サムネイル表示.