My studying notebook

2008/05/29

Embedding Google Earth in Your Web Page

5/29/2008 09:16:00 PM Posted by Kai-Chu Chung , , 3 comments
Google Earth 於5/28 釋出 Google Earth Browser Plugin
所以現在想要使用Google Earth多了一種選擇
不一定要下載Google Earth

donwloading plugin

並於幾個小時之後也公開了Google Earth plug API
讓使用者可以把Google Earth直接嵌入到自己的網頁中


<html>
<head>
<title>Google</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=YourGoogleMapKey" type="text/javascript"></script>
<script src="http://www.google.com/jsapi?key=YourGoogleMapKey"></script>
<script type="text/javascript">
google.load("earth", "1");
google.load("maps", "2.99"); // For JS geocoder

var ge = null;
var geocoder;

function init() {
geocoder = new GClientGeocoder();
google.earth.createInstance("map3d", initCB, failureCB);
}

function initCB(object) {
ge = object;
ge.getWindow().setVisibility(true);
}

function failureCB(object) {
alert('load failed');
}

function submitLocation() {
var address = document.getElementById('address').value;
geocoder.getLatLng(
address,
function(point) {
if (point && ge != null) {
var la = ge.createLookAt('');
la.set(point.y, point.x, 100, ge.ALTITUDE_RELATIVE_TO_GROUND,
0, 0, 4000);
ge.getView().setAbstractView(la);
}
}
);
}

</script>
</head>
<body onload='init()' id='body'>
<div id='map3d_container' style='border: 1px solid silver; height: 500px;'>
<div id='map3d' style='height: 100%;'></div>
</div>
</body>
</html>


Live Demo簡單展示把Google Earth 嵌入到自己的網頁中

參考資料:

2008/05/20

Showing Hyperlink Cues

5/20/2008 07:16:00 PM Posted by Kai-Chu Chung , 2 comments
HyperLink讓我們可以將視窗導到我們指定的頁面
包含打開特定格式之檔案、Send mail。
例如:

Google 首頁
mailto: me
View Holidays

我們都可以在HyperLink中完成這些動作

而上述3種的連結樣式若無特別指定
則會套用瀏覽器的預設值

除此之外
我們亦可以利用Css or Javascript為這些特別的連結
加上容易辦別的圖示
例如:
  • 外部連結檔案圖示
  • mailto: link 圖示

Cues With Css

利用Css為hyperlink加上小圖示
必需使用到Attribute選擇器(for IE 7, Firefox 2, Opera 9。browser-support#css)
由於IE6並不支援Attribute選擇器,所以就由Javascript來實作

a[href $='.pdf'] {
padding-right: 18px;
background: transparent url(icon_pdf.gif) no-repeat center right;
}
  1. a:Element 選擇器
  2. href:Attribute選擇器
  3. $:href 屬性以pdf結束

Cues With Javascript

由於在IE6並不支援Attribute Selector
所以就使用Javascript的語法來實作


function fileLinks() {
var fileLink;
if (document.getElementsByTagName('a')) {
for (var i = 0; (fileLink = document.getElementsByTagName('a')[i]); i++) {
if (fileLink.href.indexOf('http:') != -1) {
fileLink.setAttribute('target', '_blank');
fileLink.className = 'externalLink';
}
if (fileLink.href.indexOf('pdf') != -1){
fileLink.className = 'pdflink';
}
}
}
}
window.onload = function() {
fileLinks();
}


.externalLink {
padding-right: 14px;
background: url(App_Themes/MyTheme/Images/hyperlink.png) right center no-repeat;
}
.pdflink {
padding-right: 18px;
background: transparent url(App_Themes/MyTheme/Images/icon_ttf.gif) no-repeat center right;
}


2008/05/17

MouseOver & Out change Css Class Name

5/17/2008 12:41:00 PM Posted by Kai-Chu Chung 3 comments
住在台北的朋友
如果對電腦相關有興趣的人
應該對於天瓏書局不陌生

再買完想要買的書(Stylin' with CSS)之餘
又翻了其它相關的書
其中在CSS Mastery看到了一個之前寫GridView想要作的效果
在滑鼠移動到Column時
能夠改變Column的顏色

當然這個功能可以直接用Code Behind的方法來完成
如果不想要用Code Behind的方法
亦可以選擇利用Css的Style來完成
Code Behind 方法:
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e){
if (e.Row.RowType == DataControlRowType.DataRow){
e.Row.Attributes.Add("onmouseover", "this.style.backgroundColor='blue'");
e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor='white'");
}
}

Css Method:
  1. Embed Css Style:
    tr.on{background-color:#bbccaa;color:#446666;}
    tr.off{background-color:#446666;}
  2. Add tr Attribute:
    tr class="off" onmouseover="this.className='on'" onmouseout="this.className='off'"






Example
CustomerIDCompanyNameContactName
ALFKIAlfreds FutterkisteMaria Anders
ANATRAna Trujillo Emparedados y heladosAna Trujillo
ANTONAntonio Moreno TaqueriaAntonio Moreno
AROUTAround the HornThomas Hardy