Home > Developer > Web Develop
HTML section:
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Document</title> <styletype= "Text/css">. Showbox{width:200px;Height:200px;margin:100px Auto;Border:1px solid Gray; } </style></Head><Body> <Divclass= "Showbox"></Div> <inputtype= "button"value= ' Peng 'Data-name= ' Pyy '> <inputtype= "button"value= ' Zhou Dong 'Data-name= ' Jay '> <inputtype= "button"value= ' teacher Chen ^_^ 'Data-name= ' CGX '></Body></HTML><Scripttype= "Text/javascript"> varBtns=Document.queryselectorall ('input'); //Loop-binding point -and-click events for (varI= 0; I<btns.length; I++) {Btns[i].onclick= function(){ //Create varAjax= NewXMLHttpRequest (); //Modify the value of the URL 01.changeimg.php?starname = //Get data-Custom PropertiesConsole.log ( This. Dataset.name); //SetAjax.open ('Get','01.changeimg.php?starname='+ This. Dataset.name); //SendAjax.send (); //RegisterAjax.onreadystatechange= function(){ if(Ajax.readystate==4 &&Ajax.status== $){ //judge and useConsole.log (Ajax.responsetext); //set the Background property of the presentation DivDocument.queryselector ('. Showbox'). Style.background= 'URL ('+Ajax.responsetext+') no-repeat Center/cover'; } } } };</Script>
PHP section:
<? PHP // get data submitted by Star Data key $starKey = $_get[' Starname ']; // relational array Key->value $STARARR Array ( ' pyy ' = ' img/pyy.jpg ', ' jay ' = ' img/jay.jpg ', ' cgx ' = ' img/cgx.jpg ' ); // echo Value // gets the corresponding value echo$starArrby key [$starKey ]; ? >
Ajax switch star Avatar!
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
