Ajaxify con map-image

huckmx · #1 (**permalink**) 10/07/2011, 20:07

Hola buenas noches, tengo un pequeño problema, estoy haciendo una web para mostrar datos. Estoy usando AJAX, especificamente el plugin [URL="http://max.jsrhost.com/ajaxify/"]Ajaxify [/URL] , el cual funciona fantastico. Agregando el script de jquery y el de ajaxify, y agregando una clase al link "ajaxify" y asignando el DIV donde cargar el contenido funciona muy bien.

El problema es que tengo que usar map-image, y a pesar de agregar la clase a <area shape="circle" coords="209,279,8" href="content/sud-america/bolivia.html" class="ajaxify" /> ajaxify no lo reconoce y no me carga el contenido con AJAX. Supongo que es porque ajaxify solo reconoce la clase en un link del tipo <a href="..." class="ajaxify">.....</a>.

Como puedo hacer, a traves de javascript, para que un elemento <area shape="circle" coords="209,279,8" href="content/sud-america/bolivia.html" class="ajaxify" /> sea reconocido por ajaxify como un link.

Agrego mi código. Quiero suponer que es bastante facil, pero no tengo conocimiento de javascript. Agradeceria mucho cualquier tipo de ayuda!!!!

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
<meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 
<title>América y los Sistemas de Seguridad Social</title> 
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" title="no title" charset="utf-8"> 
<!--AJAX-->
<script type="text/javascript" src="js/ajax/jquery.min.js"></script>
<script type="text/javascript" src="js/ajax/jquery.ajaxify.js"></script>
<script type="text/javascript">
$(document).ready(function() {  
   $('.ajaxify').ajaxify({
        animateOut:{opacity:'0'},
        animateOutSpeed:600,
        animateIn:{opacity:'1'},
        animateInSpeed:600,
        loading_target:'#container'
});
   }); 
</script>
</head> 
<body> 
    <div id="wrapper"> 
    
        <div id="menu"> 
            <div class="nav_1">
            	<a href="index.html">Home</a>
                <a href="content/norte-america/map.html" class="ajaxify">Norte América</a>
                <a href="content/centro-america/map.html" class="ajaxify">Centro América y el Caribe</a>
                <a href="content/sud-america/map.html" class="ajaxify">Sud América</a>  
             </div>
             <div class="app_title">América y los sistemas de Seguridad social</div>
      </div> 	
      <div id="container">                
                  	<h2>América</h2> 
                    <div id="mapa_img" style="float:left;"><img src="images/america.png" height="400" usemap="#Map" />
                    
                      <map name="Map" id="Map">                        
                        <area shape="circle" coords="209,279,8" href="content/sud-america/bolivia.html"  class="ajaxify" />
                        <area shape="circle" coords="183,263,8" href="content/sud-america/peru.html"   class="ajaxify" />
                        <area shape="circle" coords="255,264,8" href="content/sud-america/brasil.html"  class="ajaxify" />
                      </map>
                      </div>
                   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div> 

    </div> 
</body> 
</html>