图像映射区域元素上的单击事件

Question

我有以下问题。我有一个大图像(横幅)，上面有两个标志，是 2 个地图区域。我想执行以下操作：当您单击英语国旗时，语言将更改为英语，当您单击西班牙国旗时，语言将更改为西班牙语。我不知道我应该使用 href 还是点击功能来做。我添加了一些代码。

<img src="banner_trading_1440_x_176_esp.jpg"   usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="1318,14,1346,32" alt="Eng"  href="javascript:window.location.href='<?php echo base_url(); ?> LanguageSwitcher/switchLang/spanish';" >
<area shape="rect" coords="1276,14,1303,32" alt="Esp" onclick="javascript:window.location.href='<?php echo base_url(); ?> LanguageSwitcher/switchLang/spanish';"/>
</map>

在我将两个标志作为 2 个单独的图像之前，代码是这样的(它运行良好)：

<img style="width: 30px; cursor: pointer; padding-top: 15px; padding-bottom: 15px;" src="http://www.hemptrading.com/tienda3/asserts/img/spain.png" onclick="javascript:window.location.href='<?php echo base_url(); ?> LanguageSwitcher/switchLang/spanish';"/> 

Answer 1

你应该从 area tag 调用一个 javascript 函数，并将你的 php 代码放在该函数定义中

<area shape="rect" coords="1318,14,1346,32" alt="Eng" href="javascript:your_function();" >

并添加PHP代码的这个功能

<script> function your_function() { window.location.href='<?php echo base_url(); ?> LanguageSwitcher/switchLang/spanish'; } </script>

Answer 2

如果您停留在页面上并响应事件，我会说使用onclick.

如果您要导航到新网址，我会说使用href.

由于您正在导航到一个新的网址，我会按照href="<?php echo base_url(); ?>LanguageSwitcher/switchLang/spanish"的方式进行操作。