quitar el espacio en mi codigo script

kmilo9607 · #1 (**permalink**) 26/07/2012, 15:30

buenas yo tengo este codigo, funciona perfectamente pero quiero que se vea mas organizado como pueden ver de arauca a armenia hay un espacio muy grande y preciso es del tamaño del texto oculto, pero se ve muy feo ya que son casi 36 ciudades las que colocare. mi pregunta es ¿ como quito ese espacio sin afectar el texto oculto?

Código HTML:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin t&iacute;tulo</title>
<style type="text/css" media="screen">
A:link {color: transparent; font-size: 14pt; font-family: arial; text-decoration: none }
A:hover {color: transparent; font-size: 14pt; font-family: arial; text-decoration: none }
A:visited {color: transparent; font-size: 14pt; font-family: arial; text-decoration: none }
.texton { color: black }
.texton a:link { color: black; font-size: 14pt; font-family: arial; text-decoration: none }
.texton a:hover { color: black; font-size: 8pt; font-family: arial; text-decoration: none }
texton a:visited { color: black; font-size: 8pt; font-family: arial; text-decoration: none }
</style>
<script>
function mostrar(id) {
  obj = document.getElementById(id);
  obj.style.visibility = (obj.style.visibility == 'hidden') ? 'visible' : 'hidden';
}
</script>
<style type="text/css">
<!--
.Estilo2 {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
}
.Estilo3 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
}
-->
</style>
</head>
<body>
<a href="#" onclick="mostrar('divTexto1'); return false" /><img src="http://i.imgur.com/GHbfl.png" width="136" height="23" />
<div id="divTexto1" style="visibility:hidden">
  <table width="404" border="0">
    <tr>
      <td width="182" class="texton"><p class="Estilo3">Punto de Asistencia<br />
  Persona &nbsp;Autorizada</p></td>
      <td width="104" valign="top" class="texton"><p class="Estilo3">Direcci&oacute;n<br />
      Tel&eacute;fono</p></td>
      <td width="104" valign="top" class="texton"><p class="Estilo3">S/N/Or/Oc<br />
      Barrio</p></td>
    </tr>
  </table>
</div>
<BR>
<a href="#" onclick="mostrar('divTexto2'); return false" /><img src="http://i.imgur.com/ZLpkm.png" width="110" height="22" />
<div id="divTexto2" style="visibility:hidden">
  <table width="404" border="0">
    <tr>
      <td width="182" class="texton"><p class="Estilo3">Punto de Asistencia<br />
  Persona &nbsp;Autorizada</p></td>
      <td width="104" valign="top" class="texton"><p class="Estilo3">Direcci&oacute;n<br />
      Tel&eacute;fono</p></td>
      <td width="104" valign="top" class="texton"><p class="Estilo3">S/N/Or/Oc<br />
      Barrio</p></td>
    </tr>
  </table>
</div>
<BR>
<a href="#" onclick="mostrar('divTexto2'); return false" /></a>
<div id="divTexto2" style="visibility:hidden">
</body>
</html>

lubtufano · #2 (**permalink**) 26/07/2012, 15:45

Creo que lo más conveniente es utilizar display:block y display:none en lugar de visibility.

function mostrar(id) {
obj = document.getElementById(id);
obj.style.display = (obj.style.display == 'none') ? 'block' : 'none';
}

<div id="divTexto1" style="display:none">
<div id="divTexto2" style="display:none">

kmilo9607 · #3 (**permalink**) 27/07/2012, 08:20

Cita:

Iniciado por lubtufano

Creo que lo más conveniente es utilizar display:block y display:none en lugar de visibility.

function mostrar(id) {
obj = document.getElementById(id);
obj.style.display = (obj.style.display == 'none') ? 'block' : 'none';
}

<div id="divTexto1" style="display:none">
<div id="divTexto2" style="display:none">

Si le pongo eso cuando le doy clic para que salga el texto oculto lo que hace es quitar el espacio y el texto no se muestra en ningun momento

lubtufano · #4 (**permalink**) 27/07/2012, 15:30

¿Seguro que cambiaste los estilos iniciales de divTexto1 y divTexto2? El asunto es cambiar:

<div id="divTexto1" style="visibility:hidden">
Por
<div id="divTexto1" style="display:none">

y

<div id="divTexto2" style="visibility:hidden">
por
<div id="divTexto2" style="display:none">

De esa forma debe funcionar bien.