鼠标移动到热点上，显示详细信息

userModel.class.php

<?php
class userModel extends baseModel{
public function searchAll(){//地图
 $sql = "select * from stu";
 $result = mysql_query($sql);
 $rows = array();
 while($row = mysql_fetch_assoc($result)){
 $rows[] = $row;
}
//var_dump($rows);
return $rows;
}
public function getOne($user_id){
  $sql = "select * from stu where id='".$user_id."'";
  $result = mysql_query($sql);
  $row = mysql_fetch_assoc($result);
  return $row;
} }

 

userController.class.php

<?php
class userController extends baseController{
public function showDetailAction(){
 //处理的是详细信息
 $userModel = new userModel("localhost","root","123","xsxx");
 $rows = $userModel ->searchAll();
 $this ->smarty->assign('list',$rows);
 //var_dump($rows);
 //echo $rows;
 $this ->smarty ->display("showDetail.tpl");
}

public function processAction(){
 $user_id=$_REQUEST['user_id'];
 $userModel=new userModel("localhost","root","123","xsxx");
 $row=$userModel->getOne($user_id);
 //echo $row['id'];
 echo json_encode($row);//因为现在数据库返回的
 }
}

 

showDetail.php

<table align="center"  bgcolor="pink" border="1">
<tr><th align="center">显示详细信息</th></tr>
<{foreach from=$list item="value"}>
<tr style="background-color:#ccc">
<td id="name_<{$value.id}>"><{$value.id}></td>
<td onmouseover="showDetail(<{$value.id}>)" onmouseout="hideDetail(<{$value.id}>)"><{$value.sname}></td>
</tr>
<{/foreach}>
</table>
<script>
function showDetail(user_id){
var xhr;
if(window.ActiveXObject){//IE浏览器new ActiveXObject("Msxml2.XMLHTTP");
 xhr=new ActiveXObject("Microsoft.XMLHTTP");
}else if(window.XMLHttpRequest){//火狐浏览器
 xhr=new XMLHttpRequest();
}
//换一种形式发送ajax请求--post
//open()方法三个参数
xhr.open("POST","index.php?c=user&a=process",true);

xhr.onreadystatechange=callback;//监视请求状态
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send('user_id='+user_id);
function callback(){
 if(xhr.readyState==4){//表示请求完成
  if(xhr.status==200){//表示请求成功
   //alert(xhr.responseText);
    //但是需要注意，eval()如果想要字符串转化成对象，需要先将字符串运行一下，通过（）
     var json = eval('('+xhr.responseText+')');
     var new_div = document.createElement('div');
     new_div.style.backgroundColor = "#ccc";
     new_div.style.position = "absolute";
     new_div.id = "new_div"+user_id;
     new_div.style.marginLeft = '170px';
     new_div.innerHTML = "id:"+json.id+"<br/>sname:"+json.sname+"<br/>birthday:"+json.birthday+"<br/>score:"+json.score;
     document.getElementById('name_'+user_id).appendChild(new_div);
    }
   }
  }
 }
 function hideDetail(user_id){
  var new_div = document.getElementById("new_div"+user_id);
  document.getElementById("name_"+user_id).removeChild(new_div);
 }
</script>

 

具体样子如图：