html - RecorteX - Recortes de código útiles.

Cambiar estilos dinámicamente con cookie

El siguiente recorte explica como se puede cambiar el estilo de una página web dinámicamente y recordar la preferencia del usuario al salir de la página guardando en una cookie dicho estilo.
Para ello hay que tener varios estilos css y unas imagenes que corresponden al color básico de dicho estilo.

Para cambiar dinámicamente el estilo y poder guardar la cookie se utiliza un javascript bastante conocido llamado styleswitcher.js

descargar 
  function setActiveStyleSheet(title) {
  var i, a, main;
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
      a.disabled = true;
      if(a.getAttribute("title") == title) a.disabled = false;
    }
  }
}
 
function getActiveStyleSheet() {
  var i, a;
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled) return a.getAttribute("title");
  }
  return null;
}
 
function getPreferredStyleSheet() {
  var i, a;
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    if(a.getAttribute("rel").indexOf("style") != -1
       && a.getAttribute("rel").indexOf("alt") == -1
       && a.getAttribute("title")
       ) return a.getAttribute("title");
  }
  return null;
}
 
function createCookie(name,value,days) {
  if (days) {
    var date = new Date();
    date.setTime(date.getTime()+(days*24*60*60*1000));
    var expires = "; expires="+date.toGMTString();
  }
  else expires = "";
  document.cookie = name+"="+value+expires+"; path=/";
}
 
function readCookie(name) {
  var nameEQ = name + "=";
  var ca = document.cookie.split(';');
  for(var i=0;i < ca.length;i++) {
    var c = ca[i];
    while (c.charAt(0)==' ') c = c.substring(1,c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
  }
  return null;
}
 
function leerEstilo() {
  var cookie = readCookie("style");
  var title;
  if(cookie == null){
  	title = "verde";	
  } else {
  	title = cookie ? cookie : getPreferredStyleSheet();
  }
  setActiveStyleSheet(title);
}
 
function guardarEstilo() {
  var title = getActiveStyleSheet();
  createCookie("style", title, 365);
}

En el head de nuestro HTML escribimos las siguientes sentencias para utilizar dicho javascript y nuestros css:

descargar

<!-- declaración de estilos css -->
<link rel="stylesheet" type="text/css" href="estilos/verde.css" title="verde">
<link rel="alternate stylesheet" type="text/css" href="estilos/azul.css" title="azul">
<link rel="alternate stylesheet" type="text/css" href="estilos/rojo.css" title="rojo">
<link rel="alternate stylesheet" type="text/css" href="estilos/amarillo.css" title="amarillo">
<link rel="alternate stylesheet" type="text/css" href="estilos/gris.css" title="gris">
<link rel="alternate stylesheet" type="text/css" href="estilos/marron.css" title="marron">
<link rel="alternate stylesheet" type="text/css" href="estilos/lila.css" title="lila">
<link rel="alternate stylesheet" type="text/css" href="estilos/naranja.css" title="naranja">
<!-- fin declaración estilos css -->

<!-- declaración de ficheros javascript -->
<script type="text/javascript" src="javascript/styleswitcher.js"></script>
<!-- fin declaración de ficheros javascript -->

Con el atributo rel="stylesheet" indicamos cual es el estilo por defecto y con rel="alternate stylesheet" cuales son los estilos alternativos. Hay que añadir un title para identificar el estilo y poder guardarlo en la cookie.

A continuación nos creamos el div que contendrá las imagenes que al pulsarse cambiarán el estilo:

descargar
<table class="tabla2" cellspacing=0 cellpadding=0 width=136 border=0>
    <tbody>
        <tr>
            <td valign=top class="color00f" align=middle>
                <a href="#" onclick="setActiveStyleSheet('verde', 1); return false; actualizar();" style="text-decoration: none">
                <img src="imagenes/estilos/verde.jpg" width=26px height=26px alt="verde" title="verde"></a>
            </td>
            <td valign=top class="color00f" align=middle>
                <a href="#" onclick="setActiveStyleSheet('rojo', 1); return false; actualizar();" style="text-decoration: none">
                <img src="imagenes/estilos/rojo.jpg" width=26px height=26px alt="rojo" title="rojo"></a>
            </td>
            <td valign=top class="color00f" align=middle>
                <a href="#" onclick="setActiveStyleSheet('azul', 1); return false; actualizar();" style="text-decoration: none">
                <img src="imagenes/estilos/azul.jpg" width=26px height=26px alt="azul" title="azul"></a>
            </td>
            <td valign=top class="color00f" align=middle>
                <a href="#" onclick="setActiveStyleSheet('marron', 1); return false; actualizar();" style="text-decoration: none">
                <img src="imagenes/estilos/marron.jpg" width=26px height=26px alt="marron" title="marron"></a>
            </td>
        </tr>
        <tr>
            <td valign=top class="color00f" align=middle>
                <a href="#" onclick="setActiveStyleSheet('lila', 1); return false; actualizar();" style="text-decoration: none">
                <img src="imagenes/estilos/lila.jpg" width=26px height=26px alt="lila" title="lila"></a>
            </td>
            <td valign=top class="color00f" align=middle>
                <a href="#" onclick="setActiveStyleSheet('naranja', 1); return false; actualizar();" style="text-decoration: none">
                <img src="imagenes/estilos/naranja.jpg" width=26px height=26px alt="naranja" title="naranja"></a>
            </td>
            <td valign=top class="color00f" align=middle>
                <a href="#" onclick="setActiveStyleSheet('amarillo', 1); return false; actualizar();" style="text-decoration: none">
                <img src="imagenes/estilos/amarillo.jpg" width=26px height=26px alt="amarillo" title="amarillo"></a>
            </td>
            <td valign=top class="color00f" align=middle>
                <a href="#" onclick="setActiveStyleSheet('gris', 1); return false; actualizar();" style="text-decoration: none">
                <img src="imagenes/estilos/gris.jpg" width=26px height=26px alt="gris" title="gris"></a>
            </td>
        </tr>
    </tbody>
</table>

Al hacer click sobre la imagen se llama a la función javascript setActiveStyleSheet(estilo, 1); que activa dicho estilo y con la función actualizar(); se actualiza la página para mostrarla con el nuevo estilo.

Para que al salir de la página HTML se guarde en una cookie el valor del último estilo pulsado hay que introducir el siguiente código en la etiqueta <body>

descargar

<body onLoad="leerEstilo();" onunload="guardarEstilo();">

Estas llamadas en el body hacen que cuando se cargue la página se lea la cookie y se active el estilo que contiene dicha cookie y que al cerrar la página se lea el estilo y se guarde en una cookie.

por petty en css html javascript | Comentarios (1)

Div con efecto de desvanecimiento

La clase Fadomatic nos permite implementar efectos de opacidad con facilidad. Es soportado por múltiples navegadores y nos permite permutar la opacidad de elementos.
La sintaxis de la función es la siguiente:

descargar 
  function Fadomatic (element, rate, initialOpacity, minOpacity, maxOpacity)

Donde:element - Es el elemento con el que vamos a jugar rate- La velocidad (de 0 a 100)initialOpacity (opcional, predeterminado 100) - La opacidad de inicio del elemento (de 0 a 100)minOpacity (opcional, predeterminado 0) - La opacidad minima del elemento (de 0 a 100)maxOpacity (opcional, predeterminado 0) - La opacidad máxima del elemento (de 0 a 100)
Existen 6 métodos a utiliza con el objeto Fadomatic:fadeOut() - Transición hacia transparentefadeIn() - Transición hacia opaco haltFade() - Detiene la transición en cursoresumeFade() - Reanuda la transición en cursoshow() - Establece la opacidad del elemento al valor máximohide() -Hace el elemento transparente.

Ejemplo de uso:

1.- Lo primero que tenemos que hacer es descargar el script Fadomatic desde su sitio web o copiarnos el siguiente código en un archivo .js:

descargar 
// Fade interval in milliseconds
// Make this larger if you experience performance issues
Fadomatic.INTERVAL_MILLIS = 50;
 
// Creates a fader
// element - The element to fade
// speed - The speed to fade at, from 0.0 to 100.0
// initialOpacity (optional, default 100) - element's starting opacity, 0 to 100
// minOpacity (optional, default 0) - element's minimum opacity, 0 to 100
// maxOpacity (optional, default 0) - element's minimum opacity, 0 to 100
function Fadomatic (element, rate, initialOpacity, minOpacity, maxOpacity) {
  this._element = element;
  this._intervalId = null;
  this._rate = rate;
  this._isFadeOut = true;
 
  // Set initial opacity and bounds
  // NB use 99 instead of 100 to avoid flicker at start of fade
  this._minOpacity = 0;
  this._maxOpacity = 99;
  this._opacity = 99;
 
  if (typeof minOpacity != 'undefined') {
    if (minOpacity < 0) {
      this._minOpacity = 0;
    } else if (minOpacity > 99) {
      this._minOpacity = 99;
    } else {
      this._minOpacity = minOpacity;
    }
  }
 
  if (typeof maxOpacity != 'undefined') {
    if (maxOpacity < 0) {
      this._maxOpacity = 0;
    } else if (maxOpacity > 99) {
      this._maxOpacity = 99;
    } else {
      this._maxOpacity = maxOpacity;
    }
 
    if (this._maxOpacity < this._minOpacity) {
      this._maxOpacity = this._minOpacity;
    }
  }
  
  if (typeof initialOpacity != 'undefined') {
    if (initialOpacity > this._maxOpacity) {
      this._opacity = this._maxOpacity;
    } else if (initialOpacity < this._minOpacity) {
      this._opacity = this._minOpacity;
    } else {
      this._opacity = initialOpacity;
    }
  }
 
  // See if we're using W3C opacity, MSIE filter, or just
  // toggling visiblity
  if(typeof element.style.opacity != 'undefined') {
 
    this._updateOpacity = this._updateOpacityW3c;
 
  } else if(typeof element.style.filter != 'undefined') {
 
    // If there's not an alpha filter on the element already,
    // add one
    if (element.style.filter.indexOf("alpha") == -1) {
 
      // Attempt to preserve existing filters
      var existingFilters="";
      if (element.style.filter) {
        existingFilters = element.style.filter+" ";
      }
      element.style.filter = existingFilters+"alpha(opacity="+this._opacity+")";
    }
 
    this._updateOpacity = this._updateOpacityMSIE;
    
  } else {
 
    this._updateOpacity = this._updateVisibility;
  }
 
  this._updateOpacity();
}
 
// Initiates a fade out
Fadomatic.prototype.fadeOut = function () {
  this._isFadeOut = true;
  this._beginFade();
}
 
// Initiates a fade in
Fadomatic.prototype.fadeIn = function () {
  this._isFadeOut = false;
  this._beginFade();
}
 
// Makes the element completely opaque, stops any fade in progress
Fadomatic.prototype.show = function () {
  this.haltFade();
  this._opacity = this._maxOpacity;
  this._updateOpacity();
}
 
// Makes the element completely transparent, stops any fade in progress
Fadomatic.prototype.hide = function () {
  this.haltFade();
  this._opacity = 0;
  this._updateOpacity();
}
 
// Halts any fade in progress
Fadomatic.prototype.haltFade = function () {
 
  clearInterval(this._intervalId);
}
 
// Resumes a fade where it was halted
Fadomatic.prototype.resumeFade = function () {
 
  this._beginFade();
}
 
// Pseudo-private members
 
Fadomatic.prototype._beginFade = function () {
 
  this.haltFade();
  var objref = this;
  this._intervalId = setInterval(function() { objref._tickFade(); },Fadomatic.INTERVAL_MILLIS);
}
 
Fadomatic.prototype._tickFade = function () {
 
  if (this._isFadeOut) {
    this._opacity -= this._rate;
    if (this._opacity < this._minOpacity) {
      this._opacity = this._minOpacity;
      this.haltFade();
    }
  } else {
    this._opacity += this._rate;
    if (this._opacity > this._maxOpacity ) {
      this._opacity = this._maxOpacity;
      this.haltFade();
    }
  }
 
  this._updateOpacity();
}
 
Fadomatic.prototype._updateVisibility = function () {
  
  if (this._opacity > 0) {
    this._element.style.visibility = 'visible';
  } else {
    this._element.style.visibility = 'hidden';
  }
}
 
Fadomatic.prototype._updateOpacityW3c = function () {
  
  this._element.style.opacity = this._opacity/100;
  this._updateVisibility();
}
 
Fadomatic.prototype._updateOpacityMSIE = function () {
  
  this._element.filters.alpha.opacity = this._opacity;
  this._updateVisibility();
}
 
Fadomatic.prototype._updateOpacity = null;

2.- Incluimos una llamada al script donde lo deseemos utilizar:

descargar
<script type="text/javascript" language="JavaScript" src="fadomatic-1_2.js"></script>

Incluimos el siguiente CSS:

descargar 
#caja_fadomatic { width: 150px; height:110px; background-color:#990000; padding:4px; color:#FFFFFF; font:10px Verdana, Arial, Helvetica, sans-serif }

Y por último:

descargar
<div id="caja_fadomatic"> Caja </div> <p>
<a href="javascript:fader.fadeOut();">Ocultar</a> 
<a href="javascript:fader.fadeIn();">Mostrar</a><br> <br> </p> 
<script language="javascript"> var fader = new Fadomatic(caja_fadomatic, 5, 100); </script>

por petty en css html javascript | Comentarios (4)

Código html para tener "autodiscovery feeds" (RSS, Atom, RDF)

descargar
<link rel="alternate" type="application/rss+xml" title="Get RSS 2.0 Feed" href="rss.php" />
<link rel="alternate" type="application/rdf+xml" title="Get RDF 1.0 Feed" href="rdf.php" />
<link rel="alternate" type="application/atom+xml" title="Get Atom 0.3 Feed" href="atom.php" />

por yuconner en atom feeds html rss | Comentarios

Mostrar en una ventana una imagen a su tamaño real sin conocerlo

Este código muestra una imagen en una ventana con su tamaño real, sin conocer de antemano las dimensiones de la imagen, centrando además la ventana en la pantalla.

descargar 
  <A onclick="NewWindow(this.href,'name','not');return false"  href="my_imagen.jpg">
     <img src="my_imagen.jpg" border="0" alt="texto" width="75px" height="75px">
  </a>

El código javascript necesario, es el siguiente:

descargar 
        var win = null;
        function NewWindow(mypage,myname,scroll){
            img = new Image();
            img.src = mypage;
            w = img.width; //Ancho;
            h = img.height; //Alto;
            LeftPosition = (screen.width) ? (screen.width-w)/2 : 0;
            TopPosition = (screen.height) ? (screen.height-h)/2 : 0;
            settings = 'height='+h+',width='+w+',top='+TopPosition+',left='+LeftPosition+',
                        scrollbars='+scroll+',resizable';
            win = window.open(mypage,myname,settings)
            if(win.window.focus){win.window.focus();}
        }

por delagua en html | Comentarios

Cambiar el estado de un botón en un formulario Html

Este pequeño javascript lo hace, en el ejemplo deshabilita el botón una vez que se ha pulsado sobre él.

descargar 
  <input type="button" name="enviar" value="Enviar" 
onClick="this.value='Espere...';this.disabled=true;this.form.submit()"/>

por delagua en formularios html | Comentarios

Aceptar determinados caracteres en un formulario html

Para que un campo de un formulario html solamente nos acepte determinados caracteres, tendriamos lo siguiente:

En el tag INPUT del html

descargar 
 <input onKeyPress="return goodchars(event,'0123456789')" type="text" name="orden" size="2" value="">

Y en JAVASCRIPT, las siguientes funciones:

descargar 
            function getkey(e) {
            if (window.event)
            return window.event.keyCode;
            else if (e)
            return e.which;
            else
            return null;
            }
    
            /* Caracteres validos */
            function goodchars(e, goods) {
            var key, keychar;
            key = getkey(e);
            if (key == null) return true;
 
            // get character
            keychar = String.fromCharCode(key);
            keychar = keychar.toLowerCase();
            goods = goods.toLowerCase();
 
            // check goodkeys
            if (goods.indexOf(keychar) != -1)
            return true;
 
            // control keys
            if ( key==null || key==0 || key==8 || key==9 || key==13 || key==27 )
            return true;
 
            // else return false
            return false;
            }

por delagua en forumularios html input | Comentarios

Desplegable de provincias españolas en HTML

Desplegable de provincias españolas con los nombre de las provincias en español:

descargar 
<select name="provincia">
<option value="">- selecciona -</option>
<option value="15">A coru&#241;a</option>
<option value="1">&#193;lava</option>
<option value="2">Albacete</option>
<option value="3">Alicante</option>
<option value="4">Almer&#237;a</option>
<option value="33">Asturias</option>
<option value="5">&#193;vila</option>
<option value="6">Badajoz</option>
<option value="7">Baleares</option>
<option value="8">Barcelona</option>
<option value="9">Burgos</option>
<option value="10">C&#225;ceres</option>
<option value="11">C&#225;diz</option>
<option value="39">Cantabria</option>
<option value="12">Castell&#243;n</option>
<option value="51">Ceuta</option>
<option value="13">Ciudad Real</option>
<option value="14">C&#243;rdoba</option>
<option value="16">Cuenca</option>
<option value="99">Extranjero</option>
<option value="17">Girona</option>
<option value="18">Granada</option>
<option value="19">Guadalajara</option>
<option value="20">Guip&#250;zcoa</option>
<option value="21">Huelva</option>
<option value="22">Huesca</option>
<option value="23">Ja&#233;n</option>
<option value="26">La rioja</option>
<option value="35">Las palmas</option>
<option value="24">Le&#243;n</option>
<option value="25">Lleida</option>
<option value="27">Lugo</option>
<option value="28">Madrid</option>
<option value="29">M&#225;laga</option>
<option value="52">Melilla</option>
<option value="30">Murcia</option>
<option value="31">Navarra</option>
<option value="32">Ourense</option>
<option value="34">Palencia</option>
<option value="36">Pontevedra</option>
<option value="37">Salamanca</option>
<option value="38">Santa cruz de tenerife</option>
<option value="40">Segovia</option>
<option value="41">Sevilla</option>
<option value="42">Soria</option>
<option value="43">Tarragona</option>
<option value="44">Teruel</option>
<option value="45">Toledo</option>
<option value="46">Valencia</option>
<option value="47">Valladolid</option>
<option value="48">Vizcaya</option>
<option value="49">Zamora</option>
<option value="50">Zaragoza</option>
</select>

por albin en html provincias | Comentarios

Desplegable de países en HTML

Desplegable de países con los nombre de los países en español:

descargar 
<select name="pais">
<option value="Elegir" id="AF">Elegir opción</option>
<option value="Afganistán" id="AF">Afganistán</option>
<option value="Albania" id="AL">Albania</option>
<option value="Alemania" id="DE">Alemania</option>
<option value="Andorra" id="AD">Andorra</option>
<option value="Angola" id="AO">Angola</option>
<option value="Anguila" id="AI">Anguila</option>
<option value="Antártida" id="AQ">Antártida</option>
<option value="Antigua y Barbuda" id="AG">Antigua y Barbuda</option>
<option value="Antillas holandesas" id="AN">Antillas holandesas</option>
<option value="Arabia Saudí" id="SA">Arabia Saudí</option>
<option value="Argelia" id="DZ">Argelia</option>
<option value="Argentina" id="AR">Argentina</option>
<option value="Armenia" id="AM">Armenia</option>
<option value="Aruba" id="AW">Aruba</option>
<option value="Australia" id="AU">Australia</option>
<option value="Austria" id="AT">Austria</option>
<option value="Azerbaiyán" id="AZ">Azerbaiyán</option>
<option value="Bahamas" id="BS">Bahamas</option>
<option value="Bahrein" id="BH">Bahrein</option>
<option value="Bangladesh" id="BD">Bangladesh</option>
<option value="Barbados" id="BB">Barbados</option>
<option value="Bélgica" id="BE">Bélgica</option>
<option value="Belice" id="BZ">Belice</option>
<option value="Benín" id="BJ">Benín</option>
<option value="Bermudas" id="BM">Bermudas</option>
<option value="Bhután" id="BT">Bhután</option>
<option value="Bielorrusia" id="BY">Bielorrusia</option>
<option value="Birmania" id="MM">Birmania</option>
<option value="Bolivia" id="BO">Bolivia</option>
<option value="Bosnia y Herzegovina" id="BA">Bosnia y Herzegovina</option>
<option value="Botsuana" id="BW">Botsuana</option>
<option value="Brasil" id="BR">Brasil</option>
<option value="Brunei" id="BN">Brunei</option>
<option value="Bulgaria" id="BG">Bulgaria</option>
<option value="Burkina Faso" id="BF">Burkina Faso</option>
<option value="Burundi" id="BI">Burundi</option>
<option value="Cabo Verde" id="CV">Cabo Verde</option>
<option value="Camboya" id="KH">Camboya</option>
<option value="Camerún" id="CM">Camerún</option>
<option value="Canadá" id="CA">Canadá</option>
<option value="Chad" id="TD">Chad</option>
<option value="Chile" id="CL">Chile</option>
<option value="China" id="CN">China</option>
<option value="Chipre" id="CY">Chipre</option>
<option value="Ciudad estado del Vaticano" id="VA">Ciudad estado del Vaticano</option>
<option value="Colombia" id="CO">Colombia</option>
<option value="Comores" id="KM">Comores</option>
<option value="Congo" id="CG">Congo</option>
<option value="Corea" id="KR">Corea</option>
<option value="Corea del Norte" id="KP">Corea del Norte</option>
<option value="Costa del Marfíl" id="CI">Costa del Marfíl</option>
<option value="Costa Rica" id="CR">Costa Rica</option>
<option value="Croacia" id="HR">Croacia</option>
<option value="Cuba" id="CU">Cuba</option>
<option value="Dinamarca" id="DK">Dinamarca</option>
<option value="Djibouri" id="DJ">Djibouri</option>
<option value="Dominica" id="DM">Dominica</option>
<option value="Ecuador" id="EC">Ecuador</option>
<option value="Egipto" id="EG">Egipto</option>
<option value="El Salvador" id="SV">El Salvador</option>
<option value="Emiratos Arabes Unidos" id="AE">Emiratos Arabes Unidos</option>
<option value="Eritrea" id="ER">Eritrea</option>
<option value="Eslovaquia" id="SK">Eslovaquia</option>
<option value="Eslovenia" id="SI">Eslovenia</option>
<option value="España" id="ES">España</option>
<option value="Estados Unidos" id="US">Estados Unidos</option>
<option value="Estonia" id="EE">Estonia</option>
<option value="c" id="ET">Etiopía</option>
<option value="Ex-República Yugoslava de Macedonia" id="MK">Ex-República Yugoslava de Macedonia</option>
<option value="Filipinas" id="PH">Filipinas</option>
<option value="Finlandia" id="FI">Finlandia</option>
<option value="Francia" id="FR">Francia</option>
<option value="Gabón" id="GA">Gabón</option>
<option value="Gambia" id="GM">Gambia</option>
<option value="Georgia" id="GE">Georgia</option>
<option value="Georgia del Sur y las islas Sandwich del Sur" id="GS">Georgia del Sur y las islas Sandwich del Sur</option>
<option value="Ghana" id="GH">Ghana</option>
<option value="Gibraltar" id="GI">Gibraltar</option>
<option value="Granada" id="GD">Granada</option>
<option value="Grecia" id="GR">Grecia</option>
<option value="Groenlandia" id="GL">Groenlandia</option>
<option value="Guadalupe" id="GP">Guadalupe</option>
<option value="Guam" id="GU">Guam</option>
<option value="Guatemala" id="GT">Guatemala</option>
<option value="Guayana" id="GY">Guayana</option>
<option value="Guayana francesa" id="GF">Guayana francesa</option>
<option value="Guinea" id="GN">Guinea</option>
<option value="Guinea Ecuatorial" id="GQ">Guinea Ecuatorial</option>
<option value="Guinea-Bissau" id="GW">Guinea-Bissau</option>
<option value="Haití" id="HT">Haití</option>
<option value="Holanda" id="NL">Holanda</option>
<option value="Honduras" id="HN">Honduras</option>
<option value="Hong Kong R. A. E" id="HK">Hong Kong R. A. E</option>
<option value="Hungría" id="HU">Hungría</option>
<option value="India" id="IN">India</option>
<option value="Indonesia" id="ID">Indonesia</option>
<option value="Irak" id="IQ">Irak</option>
<option value="Irán" id="IR">Irán</option>
<option value="Irlanda" id="IE">Irlanda</option>
<option value="Isla Bouvet" id="BV">Isla Bouvet</option>
<option value="Isla Christmas" id="CX">Isla Christmas</option>
<option value="Isla Heard e Islas McDonald" id="HM">Isla Heard e Islas McDonald</option>
<option value="Islandia" id="IS">Islandia</option>
<option value="Islas Caimán" id="KY">Islas Caimán</option>
<option value="Islas Cook" id="CK">Islas Cook</option>
<option value="Islas de Cocos o Keeling" id="CC">Islas de Cocos o Keeling</option>
<option value="Islas Faroe" id="FO">Islas Faroe</option>
<option value="Islas Fiyi" id="FJ">Islas Fiyi</option>
<option value="Islas Malvinas Islas Falkland" id="FK">Islas Malvinas Islas Falkland</option>
<option value="Islas Marianas del norte" id="MP">Islas Marianas del norte</option>
<option value="Islas Marshall" id="MH">Islas Marshall</option>
<option value="Islas menores de Estados Unidos" id="UM">Islas menores de Estados Unidos</option>
<option value="Islas Palau" id="PW">Islas Palau</option>
<option value="Islas Salomón" d="SB">Islas Salomón</option>
<option value="Islas Tokelau" id="TK">Islas Tokelau</option>
<option value="Islas Turks y Caicos" id="TC">Islas Turks y Caicos</option>
<option value="Islas Vírgenes EE.UU." id="VI">Islas Vírgenes EE.UU.</option>
<option value="Islas Vírgenes Reino Unido" id="VG">Islas Vírgenes Reino Unido</option>
<option value="Israel" id="IL">Israel</option>
<option value="Italia" id="IT">Italia</option>
<option value="Jamaica" id="JM">Jamaica</option>
<option value="Japón" id="JP">Japón</option>
<option value="Jordania" id="JO">Jordania</option>
<option value="Kazajistán" id="KZ">Kazajistán</option>
<option value="Kenia" id="KE">Kenia</option>
<option value="Kirguizistán" id="KG">Kirguizistán</option>
<option value="Kiribati" id="KI">Kiribati</option>
<option value="Kuwait" id="KW">Kuwait</option>
<option value="Laos" id="LA">Laos</option>
<option value="Lesoto" id="LS">Lesoto</option>
<option value="Letonia" id="LV">Letonia</option>
<option value="Líbano" id="LB">Líbano</option>
<option value="Liberia" id="LR">Liberia</option>
<option value="Libia" id="LY">Libia</option>
<option value="Liechtenstein" id="LI">Liechtenstein</option>
<option value="Lituania" id="LT">Lituania</option>
<option value="Luxemburgo" id="LU">Luxemburgo</option>
<option value="Macao R. A. E" id="MO">Macao R. A. E</option>
<option value="Madagascar" id="MG">Madagascar</option>
<option value="Malasia" id="MY">Malasia</option>
<option value="Malawi" id="MW">Malawi</option>
<option value="Maldivas" id="MV">Maldivas</option>
<option value="Malí" id="ML">Malí</option>
<option value="Malta" id="MT">Malta</option>
<option value="Marruecos" id="MA">Marruecos</option>
<option value="Martinica" id="MQ">Martinica</option>
<option value="Mauricio" id="MU">Mauricio</option>
<option value="Mauritania" id="MR">Mauritania</option>
<option value="Mayotte" id="YT">Mayotte</option>
<option value="México" id="MX">México</option>
<option value="Micronesia" id="FM">Micronesia</option>
<option value="Moldavia" id="MD">Moldavia</option>
<option value="Mónaco" id="MC">Mónaco</option>
<option value="Mongolia" id="MN">Mongolia</option>
<option value="Montserrat" id="MS">Montserrat</option>
<option value="Mozambique" id="MZ">Mozambique</option>
<option value="Namibia" id="NA">Namibia</option>
<option value="Nauru" id="NR">Nauru</option>
<option value="Nepal" id="NP">Nepal</option>
<option value="Nicaragua" id="NI">Nicaragua</option>
<option value="Níger" id="NE">Níger</option>
<option value="Nigeria" id="NG">Nigeria</option>
<option value="Niue" id="NU">Niue</option>
<option value="Norfolk" id="NF">Norfolk</option>
<option value="Noruega" id="NO">Noruega</option>
<option value="Nueva Caledonia" id="NC">Nueva Caledonia</option>
<option value="Nueva Zelanda" id="NZ">Nueva Zelanda</option>
<option value="Omán" id="OM">Omán</option>
<option value="Panamá" id="PA">Panamá</option>
<option value="Papua Nueva Guinea" id="PG">Papua Nueva Guinea</option>
<option value="Paquistán" id="PK">Paquistán</option>
<option value="Paraguay" id="PY">Paraguay</option>
<option value="Perú" id="PE">Perú</option>
<option value="Pitcairn" id="PN">Pitcairn</option>
<option value="Polinesia francesa" id="PF">Polinesia francesa</option>
<option value="Polonia" id="PL">Polonia</option>
<option value="Portugal" id="PT">Portugal</option>
<option value="Puerto Rico" id="PR">Puerto Rico</option>
<option value="Qatar" id="QA">Qatar</option>
<option value="Reino Unido" id="UK">Reino Unido</option>
<option value="República Centroafricana" id="CF">República Centroafricana</option>
<option value="República Checa" id="CZ">República Checa</option>
<option value="República de Sudáfrica" id="ZA">República de Sudáfrica</option>
<option value="República Democrática del Congo Zaire" id="CD">República Democrática del Congo Zaire</option>
<option value="República Dominicana" id="DO">República Dominicana</option>
<option value="Reunión" id="RE">Reunión</option>
<option value="Ruanda" id="RW">Ruanda</option>
<option value="Rumania" id="RO">Rumania</option>
<option value="Rusia" id="RU">Rusia</option>
<option value="Samoa" id="WS">Samoa</option>
<option value="Samoa occidental" id="AS">Samoa occidental</option>
<option value="San Kitts y Nevis" id="KN">San Kitts y Nevis</option>
<option value="San Marino" id="SM">San Marino</option>
<option value="San Pierre y Miquelon" id="PM">San Pierre y Miquelon</option>
<option value="San Vicente e Islas Granadinas" id="VC">San Vicente e Islas Granadinas</option>
<option value="Santa Helena" id="SH">Santa Helena</option>
<option value="Santa Lucía" id="LC">Santa Lucía</option>
<option value="Santo Tomé y Príncipe" id="ST">Santo Tomé y Príncipe</option>
<option value="Senegal" id="SN">Senegal</option>
<option value="Serbia y Montenegro" id="YU">Serbia y Montenegro</option>
<option value="Sychelles" id="SC">Seychelles</option>
<option value="Sierra Leona" id="SL">Sierra Leona</option>
<option value="Singapur" id="SG">Singapur</option>
<option value="Siria" id="SY">Siria</option>
<option value="Somalia" id="SO">Somalia</option>
<option value="Sri Lanka" id="LK">Sri Lanka</option>
<option value="Suazilandia" id="SZ">Suazilandia</option>
<option value="Sudán" id="SD">Sudán</option>
<option value="Suecia" id="SE">Suecia</option>
<option value="Suiza" id="CH">Suiza</option>
<option value="Surinam" id="SR">Surinam</option>
<option value="Svalbard" id="SJ">Svalbard</option>
<option value="Tailandia" id="TH">Tailandia</option>
<option value="Taiwán" id="TW">Taiwán</option>
<option value="Tanzania" id="TZ">Tanzania</option>
<option value="Tayikistán" id="TJ">Tayikistán</option>
<option value="Territorios británicos del océano Indico" id="IO">Territorios británicos del océano Indico</option>
<option value="Territorios franceses del sur" id="TF">Territorios franceses del sur</option>
<option value="Timor Oriental" id="TP">Timor Oriental</option>
<option value="Togo" id="TG">Togo</option>
<option value="Tonga" id="TO">Tonga</option>
<option value="Trinidad y Tobago" id="TT">Trinidad y Tobago</option>
<option value="Túnez" id="TN">Túnez</option>
<option value="Turkmenistán" id="TM">Turkmenistán</option>
<option value="Turquía" id="TR">Turquía</option>
<option value="Tuvalu" id="TV">Tuvalu</option>
<option value="Ucrania" id="UA">Ucrania</option>
<option value="Uganda" id="UG">Uganda</option>
<option value="Uruguay" id="UY">Uruguay</option>
<option value="Uzbekistán" id="UZ">Uzbekistán</option>
<option value="Vanuatu" id="VU">Vanuatu</option>
<option value="Venezuela" id="VE">Venezuela</option>
<option value="Vietnam" id="VN">Vietnam</option>
<option value="Wallis y Futuna" id="WF">Wallis y Futuna</option>
<option value="Yemen" id="YE">Yemen</option>
<option value="Zambia" id="ZM">Zambia</option>
<option value="Zimbabue" id="ZW">Zimbabue</option>
</select>

por juanjo en html países | Comentarios

DIV con barra de desplazamiento

A veces tenemos un DIV de tamaño fijo pero puede ocurrir que su contenido sea más grande que el tamaño. Con un "overflow: auto" conseguiremos que el DIV tenga barras de desplazamiento, si las necesita.

descargar 
<div style="width:200px; height:200px; background-color:#ccc; overflow:auto;">
  Aquí el contenido
</div>

por juanjo en css div html | Comentarios

Provee feeds para secciones diferentes

Provee acceso a los feeds de secciones específicas.

descargar 
	<link rel="alternate" type="application/atom+xml" href="http://www.dominio.com/atom/" title="Nombre sitio - Completo" />
	<link rel="alternate" type="application/atom+xml" href="http://www.dominio.com/atom/seccion1/" title="Nombre sitio - Nombre seccion1" />
	<link rel="alternate" type="application/atom+xml" href="http://www.dominio.com/atom/seccion2/" title="Nombre sitio - Nombre seccion2" />

por lewenhaupt en html xhtml xml | Comentarios

« Anteriores 11-20 de 25 Siguientes »

info@recortex.com - Proyecto: Juanjo Navarro, 2006 - Diseño: Albin - Información legal y técnica