Select con imágenes de fondo para internet explorer

Hace un par de semanas escribimos un post, de como poner imágenes de fondo en un Select, pero el método que se explicó se podía aplicar solamente a las combos para firefox. Entonces se nos comentó como se podría hacer para dar soporte a internet explorer. Para conseguir aplicar esto para este navegador, necesitaremos la ayuda del javascript y una de sus librerias, en concreto una llamada jDrop (aquí adjuntamos el enlace de la página): http://doctorfilter.com/jDrop/. Aquí nos podremos descargar un paquete con todo lo necesario en un .zip comprimido.

A continuación  debrmos incluir los js i los css correspondientes para poder aplicar esta libreria, en este caso incluiriamos estos casos en el head:

<script type=”text/javascript” src=”js/jquery-1.2.6.pack.js”></script>
<script type=”text/javascript” src=”js/jquery-ui-personalized-1.5.1.packed.js”></script>
<script type=”text/javascript” src=”js/jquery.dimensions.js”></script>

<script type=”text/javascript” src=”js/jquery.jdrop.js”></script>
<link rel=”stylesheet” media=”screen” type =”text/css” href=”css/screen.css” >
<script type=”text/javascript”>
$(document).ready(function(){
$(”select”).jdrop()
$(”.dragDiv”).css({top:’100px’}).draggable()
})
</script>

Seguidamente al select le debemos poner la clase class=”comboJDrop”. Finalmente en cada una de las options del select se debe poner un atributo html en el que adjuntaremos la ruta de la imagen que pertenece a la opción, pero teniendo en cuenta que debe estar incuida enel tag img de HTML. Ver ejemplo:

<select name=”prova” style=”width:150px;” class=”comboJDrop” >
<option value=”1″ html=”<img src=’styles/imgs/checked.gif’ />”>Opción 1</option>
<option value=”2″ html=”<img src=’styles/imgs/calendar.png’ />”>Opción 2</option>
<option value=”3″  html=”<img src=’styles/imgs/page_go.png’ />” >Opción 3</option>
<option value=”4″  html=”<img src=’styles/imgs/anterior.gif’ />”>Opción 4</option>
</select>

Finalmente mostraremos el resultado que se puede obtener en internet explorer para esta combo:

3 Comentarios en “Select con imágenes de fondo para internet explorer”

Enrique Hdez dice:

Hola:
He leído el artículo y es justamente lo que necesito pero no puedo acceder a http://doctorfilter.com/jDrop/
Por favor podrían enviarme el archivo js a mi correo ehdez.correo@gmail.com o darme algún link donde pueda descargarlo.
Tengo un diseño hecho y solo me quedan los combos para completarlo. Agradecería cualquier ayuda.
Gracias de antemano.
salu2.

trenero dice:

Efectivamente, Enrique, el sitio Web es inaccesible ahora mismo. Parece que la Web esta en construcción. Y mucho me temo yo que no volvamos a ver este proyecto con vida. No lo sé. Sin embargo tienes una opción (que aun no hemos publicado en el Blog) pero que seguramente te será de gran ayuda, ya que a mi criterio es mucho más robusta y potente que la propuesta en este POST:

http://plugins.jquery.com/project/Dropdown

Próximamente publicaremos un POST para compartirlo y así actualizar esta información.

Si tienes alguna duda, estamos por aquí.

Un saludo,

gabriel dice:

ya no esta el archivo para descargar nooooooo.

Dejar un comentario

*