JMiur [E]

Como muchos no usan JQuery, me han preguntado si es posible usar algo similar al código para que nos enlacen sin librerías o con cualquier librería, es decir, sólo con JavaScript.

Como la idea es muy simple y está muy bien armada, es fácil convertirla. Bastaría usar este otro script:
<script type='text/javascript'>
//<![CDATA[
function misBanners() {
lista = document.getElementById("listaBanners");
codigo = document.getElementById("codigoBanner");
ejemplo = document.getElementById("ejemploBanner");
var graphicFileName = lista.options[lista.selectedIndex].getAttribute("rel");
var newCode = '<a href="http://miBlog.blogspot.com/"><img src="' + graphicFileName + '" title="Agregar banner" alt="Agregar banner" /></a>';
codigo.value = newCode;
ejemplo.innerHTML = newCode;
}
//]]>
</script>

El código HTML es prácticamente igual, sólo agregamos el evento onChange en la etiqueta SELECT:
<form action="#" id="misBanners">
<div>
<span>Tamaño:</span>
<select onChange="misBanners();" name="listaBanners" id="listaBanners">
<option selected="selected" rel="URL_imagen_1">texto a mostrar</option>
<option rel="URL_imagen_2">texto a mostrar</option>
<option rel="URL_imagen_3">texto a mostrar</option>
<!-- seguimos agregando todas las imágenes que se nos de la gana -->
</select>
</div>
<div>
<span>Código:</span>
<textarea rows="10" cols="25" id="codigoBanner">&lt;a href="http://miBlog.blogspot.com/"&gt;&lt;img src="URL_imagen_1" title="nuestro texto" alt="nuestro texto" /&gt;&lt;/a&gt;</textarea>
<p>Copie y pegue el código en su sitio.</p>
</div>
</form>
<div id="ejemploBanner">
<a href="http://miSitio.blogspot.com/"><img src="URL_imagen_1" title="nuestro texto" alt="nuestro texto" /></a>
</div>

16 comentarios:

Angel Cba  

Gracias, me ha servido de mucho quedo perfecto, una duda que tendria que modificar para poner un banner flash, es que tengo uno pero no se como ponerlo de opcion

Responder
Angel Cba  

Por cierto se te fue una "r" en lugar de la "e", esto es en la ultima linea, te aviso por si alguien lo copio lo pueda corregir

Responder
The Big  

ty lo pondre en mi blgo

Responder
JMiur  

Solucionado el error, Lagarto.

Responder
Bonzu Pipinpadaloxicopolis III  

Suena y se ve bien, creo que lo usaré pero antes debo hacer unos cuantos banners más ;).

Responder
Maite  

JMiur, mi duda es qué diferencia hay entre miblog y misitio (http://miSitio.blogspot.com), no se qué dirección le corresponde a ese ultimo...
Intentaré ponerlo si consigo esconderlo como con el +/- que he usado en otros sitios pero me falta ese dato. Gracias

Responder
Maite  

Lo he solucionado con otro codigo pero si aún así me explicas la diferencia entre misitio y miblog te lo agradecería :D

Responder
JMiur  

Es lo mismo, es la dirección de URL de tu blog. En mi caso, sería:
http://vagabundia.blogspot.com/

Responder
Maite  

Ahhh le doy demasiadas vueltas a todo jejeje me había despistado los diferentes nombres y diferentes colores :P

Responder
JMiur  

Si ya está claro, no hay problemas :D

Responder
ARTURIN  

woow sip gracias sip este es el codigo q quiero, pero en donde va elprimer codigo en HEAD o BODY donde va cada uno???

Responder
JMiur  

El script va en el head y el resto, ahí donde quieras que se vea.

Responder
Unknown  

Hola. disculpa, en el foro anterior preguntaba sobre como ver en una cuenta de facebook, todo los clic del boton "me gusta" que esta en mi pagina web. y me mandabas a este otro foro... pero la verdad no entiendo mucho como puedo solucionar este problema con este codigo que explicas... si me puedes ayudar a entender mejor, si no es mucha molestia te lo agradeceria...

gracias, saludos!!

Responder
JMiur  

Lo siento, Dino, se me traspapeloron los comentarios :-D

Ahora veo que preguntabas sobre el botón de FB y la verdad, desconozco si lo que quieres hacer es posible o no.

Responder
Arturo  

me gusta el script pero no hay forma de darle color a los seleccionadores es que mi blog es negro :S

HAY FORMA????

Responder
JMiur  

No sé a qué te refieres con seleccionadores. Puedes darle las propiedades que quieras, usando CSS.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR