我有一个小型网站(使用 HTML、PHP 和 MySQL),并希望根据访问者所在的国家/地区显示特定的横幅图像。每个国家都有不同的横幅图像。
我在 Google 上搜索了解决方案,发现很多 API(例如 HostIP)允许根据 IP 地址返回国家/地区。这很好,但我找不到如何实现它以根据国家/地区进行图像切换...
我没有开发人员知识。谁能帮我吗?
为了完成 Avinash 的回答,这是根据国家/地区切换图像的正确解决方案吗?
function switchImage($var) {
switch ($var)
{
case "United states":
$source = '/images/US.png';
$class = 'myClass';
$alt = 'myAlt';
break;
case "United Kingdom":
$source = '/images/UK.png';
$class = 'myClass';
$alt = 'myAlt';
break;
.
.
.
default:
return "Default"; //default case
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Country Specific Banner</title>
<script>
var endpoint = 'https://apip.cc/json';
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var response = JSON.parse(this.responseText);
if(response.status !== 'success') {
console.log('Query failed: ' + response.message);
return;
}
var banner = document.getElementById('banner');
// Change banner based on the country code
switch(response.CountryCode) {
case "GB":
banner.innerHTML = '<a href="https://apip.cc"><img src="https://apip.cc/banner-gb.png" alt="UK Banner"></a>';
break;
case "US":
banner.innerHTML = '<a href="https://apip.cc"><img src="https://apip.cc/banner-us.png" alt="US Banner"></a>';
break;
default:
banner.innerHTML = '<a href="https://apip.cc"><img src="https://apip.cc/banner-default.png" alt="Default Banner"></a>';
}
}
};
xhr.open('GET', endpoint, true);
xhr.send();
</script>
</head>
<body>
<div id="banner">
<!-- Default content if JavaScript fails or is disabled -->
<a href="https://apip.cc"><img src="https://apip.cc/banner-default.png" alt="Default Banner"></a>
</div>
</body>
</html>
来源:https://apip.cc/display- Different-banners-based-on-visitor-country.html