<HTMLxmlns= "http://www.w3.org/1999/xhtml"><Head> <title></title>//Here to note the sequence of JS introduction<Linkhref= "Mapjs/jquery.ui.base.css"rel= "stylesheet"type= "Text/css" /> <Linkhref= "Mapjs/jquery.ui.theme.css"rel= "stylesheet"type= "Text/css" /> <Scriptsrc= "Jquery-1.9.1.js"type= "Text/javascript"></Script> <Scriptsrc= "Mapjs/jquery.ui.core.js"type= "Text/javascript"></Script> <Scriptsrc= "Mapjs/jquery.ui.widget.js"type= "Text/javascript"></Script> <Scriptsrc= "Mapjs/jquery.ui.position.js"type= "Text/javascript"></Script> <Scriptsrc= "Mapjs/jquery.ui.tooltip.js"type= "Text/javascript"></Script> <Linkhref= "Mapjs/demos.css"rel= "stylesheet"type= "Text/css" /> <styletype= "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> <Scripttype= "Text/javascript"> $(function() {$ (document). tooltip ({items:"img, [Data-geo], [title]", Content:function () { varelement= $( This); if(Element.is ("[Data-geo]")) { vartext=Element.text (); return "" +text+"' src= ' Http://maps.google.com/maps/api/staticmap?" +"zoom=11&size=350x350&maptype=terrain&sensor=false¢er=" +text+ "' >"; } if(Element.is ("[title]")) { returnelement.attr ("title"); } if(Element.is ("img")) { returnelement.attr ("alt"); } } }); $('#Button1'). Click (function () { $('#AName'). Text ($ ('#Text1'). Val ()); $('#AName'). attr ('href', "http://maps.google.com/maps?q="+$('#Text1'). Val ()+"&z=11"); }) }); </Script></Head><Body> <Divclass= "Ui-widget Photo"> <Divclass= "Ui-widget-header ui-corner-all"> <inputID= "Text1"type= "text"value= "China, Shanghai" /><inputID= "Button1"type= "button"value= "Settings" /> <H3> <ahref= "Http://maps.google.com/maps?q=China, Shanghai &z=11"Data-geo ID= "AName">China, Shanghai</a></H3> </Div> </Div></Body></HTML>
You can click Copy to test it
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
