<title></title>//Here to note the sequence of JS introduced
<link href= "Css/jquery.ui.base.css" rel= "stylesheet" type= "Text/css"/>
<link href= "Css/jquery.ui.theme.css" rel= "stylesheet" type= "Text/css"/>
<script src= "Js/jquery-1.9.1.js" type= "Text/javascript" ></script>
<script src= "Js/jquery.ui.core.js" type= "Text/javascript" ></script>
<script src= "Js/jquery.ui.widget.js" type= "Text/javascript" ></script>
<script src= "Js/jquery.ui.position.js" type= "Text/javascript" ></script>
<script src= "Js/jquery.ui.tooltip.js" type= "Text/javascript" ></script>
<link href= "Css/demos.css" rel= "stylesheet" type= "Text/css"/>
<style type= "Text/css" >
. Photo {
width:300px;
Text-align:center;
}
. Photo. Ui-widget-header {
Margin:1em 0;
}
. map {
width:350px;
height:350px;
}
. ui-tooltip {
max-width:350px;
}
</style>
<script type= "Text/javascript" >
$ (function () {
$ (document). tooltip ({
Items: "IMG, [Data-geo], [title]",
Content:function () {
var element = $ (this);
if (Element.is ("[Data-geo]")) {
var text = Element.text ();
Return "<img class= ' map ' alt= '" + text +
"' src= ' Http://maps.google.com/maps/api/staticmap?" +
"Zoom=11&size=350x350&maptype=terrain&sensor=false¢er=" +
Text + "' >";
}
if (element.is ("[title]")) {
Return element.attr ("title");
}
if (element.is ("img")) {
Return element.attr ("alt");
}
}
});
$ (' #Button1 '). Click (function () {
$ (' #AName '). Text ($ (' #Text1 '). Val ());
$ (' #AName '). attr (' href ', ' http://maps.google.com/maps?q= ' +$ (' #Text1 '). Val () + "&z=11");
})
});
</script>
<body>
<div class= "Ui-widget photo" >
<div class= "Ui-widget-header ui-corner-all" >
<input id= "Text1" type= "text" value= "China, Shanghai"/><input id= "Button1" type= "button" value= "Settings"/>
</div>
</div>
</body>
Usage: Arbitrarily enter the country and city, with "," separated, click the settings below the hyperlink to change to just set the city, click can jump to the city's view map page, the mouse over the hyperlink will pop up a 350*350 map
