Bienvenido, Invitado
Nombre de Usuario: Contraseña: Recordarme

TEMA: Plugin Modalizer y mapa interactivo

Plugin Modalizer y mapa interactivo 7 años 4 meses antes #2059

  • gorrion
  • Avatar de gorrion
  • Fuera de línea
  • Fresh Boarder
  • Mensajes: 3
  • Karma: 0
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: 7 años 4 meses antes por gorrion.
El administrador ha desactivado la escritura pública.

Re: Plugin Modalizer y mapa interactivo 7 años 4 meses antes #2061

  • alejandro
  • Avatar de alejandro
¿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.
El administrador ha desactivado la escritura pública.

Re: Plugin Modalizer y mapa interactivo 7 años 4 meses antes #2064

  • gorrion
  • Avatar de gorrion
  • Fuera de línea
  • Fresh Boarder
  • Mensajes: 3
  • Karma: 0
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.
El administrador ha desactivado la escritura pública.

Re: Plugin Modalizer y mapa interactivo 7 años 4 meses antes #2065

  • alejandro
  • Avatar de alejandro
¿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?
El administrador ha desactivado la escritura pública.

Re: Plugin Modalizer y mapa interactivo 7 años 4 meses antes #2066

  • gorrion
  • Avatar de gorrion
  • Fuera de línea
  • Fresh Boarder
  • Mensajes: 3
  • Karma: 0
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.
El administrador ha desactivado la escritura pública.