CODEWITHSUNDEEP
javascripthtml
Arina
Arina

Reputation: 112

Onclick event on an imagemap area element

I have the following problem. I have a big image (banner) and on it I have two flags which are 2 map areas. I want to do the following: when you click on English flag the language changes to English, when you click on Spanish flag, the language changes to Spanish. I don't know if I should do it with an href or onclick function. I add some code.

<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>

Before I had both flags as 2 separate images and the code was like this (and it worked perfectly):

  <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';"/>

Upvotes: 1

Views: 1934

Answers (2)

Kuldeep
Kuldeep

Reputation: 74

You should have to call a javascript function from area tag and put your php code in that function definition

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

and add this function of php code

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

Upvotes: 2

Rocky Sims
Rocky Sims

Reputation: 3598

If you are staying on the page and responding to an event, I'd say use onclick.

If you are navigating to a new url, I'd say use href.

Since you're navigating to a new url, I'd go with something along the lines of href="<?php echo base_url(); ?>LanguageSwitcher/switchLang/spanish".

Upvotes: 1

Related Questions