Foros del Web » Programando para Internet » Javascript »

script terminado pero con algunos fallos!

 Estas en el tema de script terminado pero con algunos fallos! en el foro de Javascript en Foros del Web. ya e terminado el script pero me da dos errores: 1º alrededor de la imagen se me forman unos bordes azules que me gustaria quitar ...
  #1 (permalink)  
Antiguo 26/07/2009, 14:59
 
Fecha de Ingreso: mayo-2009
Ubicación: Andalucia
Mensajes: 650
Antigüedad: 14 años, 11 meses
Puntos: 1
script terminado pero con algunos fallos!
ya e terminado el script pero me da dos errores:

1º alrededor de la imagen se me forman unos bordes azules que me gustaria quitar para que no me joda el diseño de la pagina.

2º al cargar el index.php que es donde tengo el script se me carga, es decir se me abre automaticamente una ventana (de la ciudad de valencia) y si reinicio con el firefox tambien me hace lo mismo se me auto carga la ventana.

como puedo solucionar esto. pongo a continuacion todo el codigo que he usado:

Código: 
<script type="text/javascript">
  
      function showLightbox() {
  
        document.getElementById('over').style.display='block';
  
        document.getElementById('fade').style.display='block';
 
      }
 
      function hideLightbox() {

        document.getElementById('over').style.display='none';
  
        document.getElementById('fade').style.display='none';
         }
</script>

<script type="text/javascript">
  
      function showLightbox2() {
  
        document.getElementById('over2').style.display='block';
  
        document.getElementById('fade2').style.display='block';
 
      }
 
      function hideLightbox2() {

        document.getElementById('over2').style.display='none';
  
        document.getElementById('fade2').style.display='none';
         }
</script>

<script type="text/javascript">
  //ciudad madrid
      function showLightbox3() {
  
        document.getElementById('over3').style.display='block';
  
        document.getElementById('fade3').style.display='block';
 
      }
 
      function hideLightbox3() {

        document.getElementById('over3').style.display='none';
  
        document.getElementById('fade3').style.display='none';
         }
</script>

<script type="text/javascript">
  //ciudad barcelona
      function showLightbox4() {
  
        document.getElementById('over4').style.display='block';
  
        document.getElementById('fade4').style.display='block';
 
      }
 
      function hideLightbox4() {

        document.getElementById('over4').style.display='none';
  
        document.getElementById('fade4').style.display='none';
         }
</script>
una pregunta acerca de este codigo anterior. como podria modificarlo para no tener que crear una funcion para cada ciudad? sino hacerlo de alguna manera para ahorrar codigo?.

Código: 
<script type="text/javascript">
function loadconst() {
var areas = document.getElementsByTagName("area");


for (var i = 0; i < areas.length; i++) {
    areas[i].onmouseover = mouseOver;
    areas[i].onmouseout = mouseOut;
	areas[i].onclick= onClick;
}

function mouseOver() {
    document.getElementById("MAPA").src = "MAPA_map_" + this.id + ".gif";
	
}
}
function mouseOut() {
    document.getElementById("MAPA").src = "MAPA_MAP_DEFAULT.gif";
}

}

</script>
este codigo html, son los divs donde esta el contenido de las ventanas popup.

Código: 
<div id="over" class="overbox">
<div id="contenidobox">
<h3>Mudanzas 2000 S.L</h3>
<h4>Oficina Málaga</h4>
<ul>
<li>
<strong>Teléfono:</strong> 952xxxx</li>
<li>
<strong>Calle:</strong> C/ Granada nº 23</li>
<li>
<strong>Email:</strong> [email protected]</li>
</ul>
<p class="boton"
<a href="javascript:hideLightbox()">Cerrar</a>
</p>
</div></div>

<div id="fade" class="fadebox"></div>
<div id="over2" class="overbox2">
<div id="contenidobox2">
<h3>Mudanzas 2000 S.L</h3>
<h4>Oficina Valencia</h4>
<ul>
<li>
<strong>Teléfono:</strong> 958xxxx</li>
<li>
<strong>Calle:</strong> C/ maria zambrano</li>
<li>
<strong>Email:</strong> [email protected]</li>
</ul>
<p class="boton"
<a href="javascript:hideLightbox2()">Cerrar</a>
</p>
</div></div>
<div id="fade2" class="fadebox2"></div>
<div id="over3" class="overbox3">
<div id="contenidobox3">
<h3>Mudanzas 2000 S.L</h3>
<h4>Oficina Madrid</h4>
<ul>
<li>
<strong>Teléfono:</strong> 952xxxx</li>
<li>
<strong>Calle:</strong> C/ Gran via nº 78</li>
<li>
<strong>Email:</strong> [email protected]</li>
</ul>
<p class="boton"
<a href="javascript:hideLightbox3()">Cerrar</a>
</p>
</div></div>
<div id="fade3" class="fadebox3"></div>


<div id="over4" class="overbox4">
<div id="contenidobox4">
<h3>Mudanzas 2000 S.L</h3>
<h4>Oficina Barcelona</h4>
<ul>
<li>
<strong>Teléfono:</strong> 982xxxx</li>
<li>
<strong>Calle:</strong> C/ albert plat nº 48</li>
<li>
<strong>Email:</strong> [email protected]</li>
</ul>
<p class="boton"
<a href="javascript:hideLightbox4()">Cerrar</a>
</p>
</div></div>
<div id="fade4" class="fadebox4"></div>

Aqui el div donde esta la imagen y desde donde se llaman a las funciones para que se abran las ventanas:

Código: 
 <div id="mapa">
	 <img src="imagenes/MAPA_MAP_DEFAULT.GIF" alt="ESPAÑA" name="MAPAGIF" width="239" height="164" useMap = "#MAP"  isMap id="MAPAGIF"></p>
	 
<p><map name = "MAP">

<area id="malaga" coords="23,128,162,161" alt="Málaga"   shape="RECT" onclick="showLightbox()"/>

<area id="valencia" coords="153,67,189,100" alt="Valencia" shape="RECT" onclick="showLightbox2()"/>

<area id="madrid" coords="63,41,121,86" alt="Madrid" shape="RECT" onclick="showLightbox3()"/>

<area id="barcelona" coords="159,34,226,56" alt="Barcelona" shape="RECT" onclick="showLightbox4()"/>

</map>
aqui todo el css relacionado con el script:

Código: 
/*atributos ventana nueva malaga */
/*
.fadebox {
   
display: none;
position:relative;
top: 500px;
left: 50px;
width: 420px;
height: 125px;
background-color:#a97110;
z-index:1001;
-moz-opacity: 0.2;
 opacity:.2;
filter: alpha(opacity=90);
margin:auto;
}
*/
.overbox {
 display: none;
  position: absolute;
 top: 870px;
left:350px;
 width: 400px;
 height: 180px;
z-index:1002;
overflow: auto;
    }


#contenidobox {
	width:385px;
	height:149px;
	background: #FFFFFF;
	border: solid 3px #CCCCCC;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#000000;
	text-align:justify;
	border-top-color: #000000;
	border-right-color: #000000;
	border-bottom-color: #000000;
	border-left-color: #000000;
	border-width:thin;
	background-image: url("imagenes/ajaxdegradado2.png");
   background-position:inherit;
    background-repeat: no-repeat;
}

#contenidobox h3{
padding-left:17px;
}

#contenidobox h4{
padding-left:17px;
}
#contenidobox li{
margin-left:17px;

}

/*atributos ciudad valencia*/
/*
.fadebox2 {
   
display: none;
position:relative;
top: 500px;
left: 50px;
width: 420px;
height: 125px;
background-color:#a97110;
z-index:1001;
-moz-opacity: 0.2;
 opacity:.2;
filter: alpha(opacity=90);
margin:auto;

}
*/
.overbox2 {
position: absolute;
 top: 870px;
left:350px;
 width: 400px;
 height: 180px;
z-index:1002;



      }


#contenidobox2{
	width:385px;
	height:149px;
	background: #FFFFFF;
	border: solid 3px #CCCCCC;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#000000;
	text-align:justify;
	border-top-color: #000000;
	border-right-color: #000000;
	border-bottom-color: #000000;
	border-left-color: #000000;
	border-width:thin;
	background-image: url("imagenes/ajaxdegradado2.png");
   background-position:inherit;
    background-repeat: no-repeat;
}

#contenidobox2 h3{
padding-left:17px;
}

#contenidobox2 h4{
padding-left:17px;
}
#contenidobox2  li{
margin-left:17px;

}

/*atributos ciudad madrid*/
/*
.fadebox3 {
   
display: none;
position:relative;
top: 500px;
left: 50px;
width: 420px;
height: 125px;
background-color:#a97110;
z-index:1001;
-moz-opacity: 0.2;
 opacity:.2;
filter: alpha(opacity=90);
margin:auto;



}
*/
.overbox3 {
 display: none;
  position: absolute;
 top: 870px;
left:350px;
 width: 400px;
 height: 180px;
z-index:1002;
overflow: auto;



      }


#contenidobox3 {
	width:385px;
	height:149px;
	background: #FFFFFF;
	border: solid 3px #CCCCCC;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#000000;
	text-align:justify;
	border-top-color: #000000;
	border-right-color: #000000;
	border-bottom-color: #000000;
	border-left-color: #000000;
	border-width:thin;
	background-image: url("imagenes/ajaxdegradado2.png");
   background-position:inherit;
    background-repeat: no-repeat;
}

#contenidobox3 h3{
padding-left:17px;
}

#contenidobox3 h4{
padding-left:17px;
}
#contenidobox3 li{
margin-left:17px;

}

/*atributos ciudad barcelona*/
/*
.fadebox4 {
   
display: none;
position:relative;
top: 500px;
left: 50px;
width: 420px;
height: 125px;
background-color:#a97110;
z-index:1001;
-moz-opacity: 0.2;
 opacity:.2;
filter: alpha(opacity=90);
margin:auto;



}
*/
.overbox4 {
 display: none;
  position: absolute;
 top: 870px;
left:350px;
 width: 400px;
 height: 180px;
z-index:1002;
overflow: auto;



      }


#contenidobox4 {
	width:385px;
	height:149px;
	background: #FFFFFF;
	border: solid 3px #CCCCCC;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#000000;
	text-align:justify;
	border-top-color: #000000;
	border-right-color: #000000;
	border-bottom-color: #000000;
	border-left-color: #000000;
	border-width:thin;
	background-image: url("imagenes/ajaxdegradado2.png");
   background-position:inherit;
    background-repeat: no-repeat;
}

#contenidobox4 h3{
padding-left:17px;
}

#contenidobox4 h4{
padding-left:17px;
}
#contenidobox4 li{
margin-left:17px;

}






.boton {
text-align:right;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
padding-right:17px;
margin-bottom:13px;

}

.boton a {/*las propiedades que necesites*/
	text-decoration: none;
	color: #999999;
}
  
.boton  a:hover{
	text-decoration: none;
	color: #FF0000;
}

saludos
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 09:59.