Plugin Modalizer y mapa interactivo

Más
12 años 8 meses antes - 12 años 8 meses antes #2059 por gorrion
Bueno para no darle mas la tabarra a mi amigo Alejandro por msn, me dispongo a crear una duda que me esta quebrando la cabeza.

Estoy haciendo un mapa interactivo de provincias para una web y me he bajado e instalado el plugin MODALIZER pues la cosa que no se como hacer para que al pinchar sobre una provincia me abra una ventana modal. (dejo el codigo por si alguien quiere echarle un vistazo)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<m-eta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<t-itle></title>
<s-tyle type="text/css">
body		{	font-family: Verdana, Arial, Helvetica, sans-serif; font-size:12px}
#contenedor	{	width:400px; overflow:hidden; margin:0 auto;}
#divmapa	{	width:400px; height:243px; float:left; background:url(/images/todo.png) 0 0;}
#divinfo	{	float: right; width:600px}
#divdatoreg	{	float: right; width:600px; font-weight:bold}
</style>
<s-cript type="text/j-avascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>
<s-cript type="text/j-avascript">
	$(document).ready(function()
		{
		$('area').mouseover(function()
			{
			var rescata = $(this).attr('rel').split(";");
			var posmapa = -400*rescata[0];
			
			
			$('#divmapa').css("background","url(/images/todo.png) "+posmapa+"px");
			$('#divinfo').html(rescata[1]+"<br />"+rescata[2]);
			}).mouseout(function()
				{
				$('#divmapa').css("background","url(/images/todo.png) 0px");
				});
		});

</script>
</head>





<body>
<div id="divmapa">

  <map name="mapatodo">


        <area shape="poly" coords="54,211,58,219,60,228,62,239,68,237,76,240,86,225,97,216,114,209,130,206,140,200,150,196,163,195,177,198,189,200,202,197,211,194,215,185,225,178,235,176,241,167,248,160,241,160,237,163,232,163,227,168,220,168,213,166,206,168,196,170,192,172,181,174,182,180,189,189,175,186,162,189,157,184,149,183,139,187,137,181,133,174,128,169,128,165,123,162,111,178,103,186,99,186,95,194,88,198,80,192,73,190,69,197,64,202,55,210" href="/images/logo.png" target="_blank" rel="1;I Región;1" />

        <area shape="poly" coords="183,174,174,174,176,167,176,159,172,149,167,145,175,138,182,133,184,125,188,119,186,116,183,110,180,108,178,113,174,114,168,114,162,108,157,108,154,105,148,101,137,96,142,101,142,107,141,111,135,117,130,121,127,123,131,129,132,133,132,141,129,150,129,155,126,158,124,161,129,167,133,175,137,183,140,186,147,184,153,182,156,184,160,188,165,188,174,187,186,188,182,181,181,178" href="#" rel="2;II Región;2"  />
        <area shape="poly" coords="184,90,185,96,182,102,180,109,185,112,188,120,184,127,181,133,174,139,169,144,173,148,174,154,176,160,176,166,175,172,181,174,192,172,205,168,211,166,219,169,226,166,232,163,237,150,230,148,225,144,224,139,224,135,224,130,224,125,232,128,240,125,247,119,249,110,245,105,243,95,230,96,221,98,214,96,206,93,209,89,213,83,209,82,202,82,197,85,199,89,191,90,185,90" href="#" rel="3;III Región;3" />         

     <area shape="poly" coords="269,99,266,110,258,109,250,113,248,118,242,124,236,128,232,129,228,127,224,126,224,136,226,143,230,147,235,149,235,156,235,161,237,163,245,159,248,157,252,152,256,146,261,143,269,143,280,144,281,138,283,132,287,126,291,120,293,117,292,114,288,112,287,108,281,106,277,102,274,99" href="http://www.rutare.ekiwi.es/index.php/component/content/article/35-rutare/45-prueba#" target="_blank" rel="4;IIII Regi&oacute;n;4" />   

    <area shape="poly" coords="296,67,284,75,277,81,274,81,272,88,270,91,269,98,273,100,279,104,284,106,287,107,288,111,292,113,293,117,287,124,285,131,283,136,282,141,282,145,293,145,308,145,316,143,325,143,333,136,344,138,354,140,359,142,364,139,374,138,379,136,390,136,396,138,397,132,390,113,380,110,371,107,364,104,358,102,351,102,346,99,340,97,338,94,331,88,328,85,324,85,316,83,311,78,306,74,302,67" href="#" rel="5;IV Regi&oacute;n;5" />

    <area shape="poly" coords="289,46,284,34,279,24,281,20,272,17,269,12,270,7,270,3,252,3,245,15,251,27,247,35,245,44,245,49,247,53,250,55,256,61,258,66,264,69,267,71,270,75,273,78,274,82,277,82,281,76,289,69,292,67,290,56" href="#" rel="6;VI Regi&oacute;n;6" />

    <area shape="poly" coords="243,95,245,102,249,109,252,111,262,109,266,109,268,98,270,90,272,85,273,80,272,75,265,71,260,69,256,63,254,59,253,55,247,51,244,46,245,41,247,33,250,26,248,21,244,15,240,18,235,16,231,15,227,17,223,20,220,17,222,12,219,9,217,8,212,7,207,6,196,5,196,11,196,18,198,20,192,25,182,30,174,46,177,54,180,67,182,77,181,85,183,90,197,89,198,86,201,82,205,82,212,82,214,84,209,88,208,92,208,94,213,96,220,98,232,96,238,95" href="#" rel="7;VII Regi&oacute;n;7" />

    <area shape="poly" coords="173,47,181,34,178,28,175,25,173,21,174,20,167,19,166,23,165,28,160,31,158,29,156,25,150,24,147,30,152,33,155,36,155,40,145,47,136,54,128,58,119,62,111,61,106,62,105,66,108,71,112,74,115,78,113,80,114,88,118,91,120,92,119,97,119,101,119,106,121,108,125,107,127,104,130,101,134,97,136,96,140,99,146,102,154,105,158,109,162,109,168,115,174,114,178,112,179,107,182,102,185,95,182,91,181,88,181,83,183,76,183,68,181,60,179,53,176,51" href="#" rel="8;VIII Regi&oacute;n;8" />

    <area shape="poly" coords="117,92,110,100,106,109,100,113,95,113,91,110,86,107,82,103,77,100,71,100,64,107,61,114,62,119,67,124,69,125,67,131,64,138,64,143,63,147,62,150,57,156,52,161,43,165,36,165,34,166,32,171,24,178,21,184,18,186,10,183,3,181,3,190,10,193,15,195,21,195,23,189,24,187,29,186,35,186,41,188,42,196,47,204,55,210,63,204,70,197,72,193,75,190,77,190,81,192,85,195,87,199,92,194,92,192,95,189,99,188,102,186,109,180,114,174,121,166,123,161,126,158,128,154,134,140,130,129,126,127,126,125,130,122,134,119,139,113,141,109,142,103,139,98,136,97,132,98,130,100,125,105,123,108,120,106,120,102,120,97" href="#" rel="9;IX Regi&oacute;n;9" />
  

  </map>
  <img src="/images/fondomapa.png" width="400" height="243" border="0" usemap="#mapatodo" />
{modal url=http://www.google.com|width=600|height=400}Google{/modal}

</div>
		<p>&nbsp;</p>
		<p>&nbsp;</p>
		<p>&nbsp;</p>
		<p>&nbsp;</p>
		<p>&nbsp;</p>
		<p>&nbsp;</p>
<div id="divdatoreg">Eliga Regi&oacute;n</div>
<div id="divinfo">
Informaci&oacute;n Regional
</div>
<div>
		<p>&nbsp;</p>
		<p>&nbsp;</p>
		<p>&nbsp;</p>
		<p>&nbsp;</p>
		<p>&nbsp;</p>
		<p>&nbsp;</p>
		<p>&nbsp;</p>
		<p>&nbsp;</p>
		<p>&nbsp;</p>
		<p>&nbsp;</p>
		<p>&nbsp;</p>
		<p>&nbsp;</p>
		<p>&nbsp;</p>
		<p>&nbsp;</p>
		<p>&nbsp;</p>
		<p>&nbsp;</p>
		<p>&nbsp;</p>
		<p>&nbsp;</p>
		<p>&nbsp;</p>
		<p>&nbsp;</p>
		<p>&nbsp;</p>
		<p>&nbsp;</p>
		<p>&nbsp;</p>
		<p>&nbsp;</p>
		<p>&nbsp;</p>
		<p>&nbsp;</p>
		<p>&nbsp;</p>


</body>

</html>

Pues este plugin por lo visto convierte las paginas "_BLANK" en enlaces modales, pues yo no he sabido hacerlo funcionar.

En dicho codigo se puede ver una ventana modal a google, pero es lo unico que logro hacer funcionar.

Agradezdo desde ya la ayuda que me podrais brindar.

Saludos.
Última Edición: 12 años 8 meses antes por gorrion.

Por favor, Identificarse o Crear cuenta para unirse a la conversación.

  • alejandro
  • Visitante
  • Visitante
12 años 8 meses antes #2061 por alejandro
Respuesta de alejandro sobre el tema Re: Plugin Modalizer y mapa interactivo
¿el mapa que utilizas es una extensión de Joomla? ¿o es código HTML que lo metes de alguna forma en un artículo de Joomla? iframe? wrapper?

Hay diferentes tipos de plugins. Unos actuan sobre contenidos, otros de sistema, etc. Tiene pinta que modalizer es de contenidos (no lo he mirado). Quizás no se está aplicando el plugin por la forma que estes usando para cargar el mapa.

Por favor, Identificarse o Crear cuenta para unirse a la conversación.

Más
12 años 8 meses antes #2064 por gorrion
Bueno te cuento la historia, el mapa es creado con el comando area shape de dreamweaver (html) y pegado en joomla sin editor de textos (es decir seleccionando el NO EDITOR) porque si lo pego en TIMYMCE se carga la mitad del codigo, por otro lado el plugin modalizer es un plugin de sistema (o al menos se instala en jooma en ... plugins/system/modalizer) asi que ya no se que mas te puedo contar, solo decirte que me estoy volviendo un poco majara para hacerlo.

De todas formas sigo investigando a ver si puedo sacar algo en claro porque el plugin en si, si que funciona al menos en otro tipo de enlaces.

Un saludo y hablamos.

Por favor, Identificarse o Crear cuenta para unirse a la conversación.

  • alejandro
  • Visitante
  • Visitante
12 años 8 meses antes #2065 por alejandro
Respuesta de alejandro sobre el tema Re: Plugin Modalizer y mapa interactivo
¿y tienes que indicarle de alguna forma que un enlace en concreto debe utilizar modalizer o el lo coge solo? Mira con firebug un enlace que funcione de modalizer y mira uno que falle. Probablemente le meta algún tipo de clase especial en el css al que funciona y ¿algo más de html para enlazar al contenido?

Por favor, Identificarse o Crear cuenta para unirse a la conversación.

Más
12 años 8 meses antes #2066 por gorrion
La verdad que no me he parado a mirarlo con firebug pero he estado mirando como podria hacerlo y claro el problema viene que al plugin se le puede llamar nombrandolo como clase (class="modal") pues al incluir esta parte del codigo dentro de la etiqueta area shpae falla el enlace.

De todas formas seguiré investigando aunque he cambiado de perspectiva por ahora (ya que no tengo mucho tiempo para entretenerme) y estoy usando GMapFP que cumple con lo que queria hacer pero de otra forma.

Un saludo y y gracias por la pequeña ayuda señor Alejandro ;)

P.D. A vé si quedamos y te invito a un vasito de agua aunque sea.

Por favor, Identificarse o Crear cuenta para unirse a la conversación.

Gracias a Foro Kunena