Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

fetish

Imagens em um select?

Por , em Javascript

Recommended Posts

fetish    3

fetish
Postado

Olá pessoal, eu gostaria de saber como eu posso por imagens que fiquem antes das opções de um select, tipo:

<select>
<option value = "1">[IMG AQUI] Opção 1</option>
</select>
Como seria possível fazer? Eu sei que é possivel :)

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Com a tag select é impossível http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif

 

você deverá 'simular' uma. Criando uma DIV com rolagem e javascript.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Kanzen    0

Kanzen
Postado

Impossível não é não.

 

neste site existe um exemplo online, e abaixo onde tem Licenses tem uma opção de Download onde você baixa o pacote completo.

 

PORÉM, está MUITO confuso o código.

 

http://dhtmlx.com/docs/products/dhtmlxCombo/index.shtml

(Olhar campo "Combobox with icons:")

 

Download

http://www.dhtmlx.com/docs/download/dhtmlxCombo.zip

 

Guia (que nao ajuda em nada)

http://www.dhtmlx.com/dhxdocs/doku.php?id=dhtmlxcombo:combobox_with_images_and_checkboxes

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Com a tag select é impossível http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif

 

Leia denovo oque eu disse, e veja como o cara fez:

<div style="margin:5px;position:absolute;top:85px;left:260px;padding:0px;">
 Combobox with icons:<br/> 
<div style='width:200px;margin:2px;' id="combobox5"></div>
Eu não disse que não dava para ser feito, e sim que com a tag select era impossível.

 

Ele fez o replace que eu recomendei.

Compartilhar este post

Link para o post
Compartilhar em outros sites

klonder    14

klonder
Postado

Fiz um exemplo aqui muito simples, que servirá apenas para você iniciar seus estudos em JavaScript. Estude esse código, compreenda o funcionamento dos eventos e do CSS, tire suas dúvidas aqui no fórum ou net sobre os comandos que você não souber.

 

JavaScript é uma linguagem muito poderosa, vale a pena estudar.

 

Obs: Para aperfeiçoar seu conhecimento, compare a maneira que fiz com a maneira do autor no link que você postou.

 

Exemplo: Imagens em um combobox (combobox com imagens):

<html>
<head>
<title>Imagens em um ComboBox - by Klonder</title>
<style type="text/css">
* {background-color:#FFF; margin:0; padding:0; list-style: none;}
#ulMenu li a {color:#000; font-size:12px; font-family:tahoma,arial,verdana; text-decoration: none; background:#FFF; display:block; width:300px;}
#ulMenu li a:hover {background:#EFEFEF;}

#topoCombo {overflow: hidden; border:#0080FF 1px solid; width:300px;}
#opcoesCombo {display: none; overflow:scroll; overflow-x:hidden; height:80px; width:300px; border:#0080FF 1px solid;}
img.imgOpcoes {border:0;}
#opcaoEscolhida {border:0; width:200px;}
</style>
<script type="text/javascript">
function mostrar(el) {
var objDiv = document.getElementById(el);
objDiv.style.display = "block";
}

function ocultar(el) {
var objDiv = document.getElementById(el);
objDiv.style.display = "none";
}

function item(el,imagem) {
var objText = document.getElementById("opcaoEscolhida");
var objDiv = document.getElementById("opcoesCombo");
var objImg = document.getElementById("imgEscolhida");

objText.value = el;
objImg.src = imagem;
objImg.alt = imagem;
objDiv.style.display = "none";
}
</script>
</head>
<body>
<br /><br />
<div id="topoCombo" onmouseover="mostrar('opcoesCombo')" onmouseout="ocultar('opcoesCombo')"><img id="imgEscolhida" src="" alt="" /><input type="text" id="opcaoEscolhida" value="Alemanha"></div>

<div id="opcoesCombo" onmouseover="mostrar('opcoesCombo')" onmouseout="ocultar('opcoesCombo')">
<ul id="ulMenu">
<li><a href="javascript: item('Alemanha','ale.gif')"><img src="ale.gif" alt="ale.gif" class="imgOpcoes"/> Alemanha</a></li>
<li><a href="javascript: item('Brasil','bra.gif')"><img src="bra.gif" alt="bra.gif" class="imgOpcoes"/> Brasil</a></li>
<li><a href="javascript: item('Estados Unidos','eua.gif')"><img src="eua.gif" alt="eua.gif" class="imgOpcoes"/> Estados Unidos</a></li>
<li><a href="javascript: item('França','fra.gif')"><img src="fra.gif" alt="fra.gif" class="imgOpcoes"/> França</a></li>
<li><a href="javascript: item('Inglaterra','ing.gif')"><img src="ing.gif" alt="ing.gif" class="imgOpcoes"/> Inglaterra</a></li>
</div>
</ul>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

zrod    0

zrod
Postado

Olá fetish,

 

É possível usar imagens sem o uso de JS, apenas com css.

Você precisa definir uma class p/ cada 'option', segue um exemplo usando imagens de um site fornecido acima por outro usuario:

 

<!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=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.select_us { background:transparent url(http://dhtmlx.com/docs/products/dhtmlxCombo/images/us.gif) no-repeat top left; height:18px; padding-left:20px; }
.select_fr { background:transparent url(http://dhtmlx.com/docs/products/dhtmlxCombo/images/fr.gif) no-repeat top left; height:18px; padding-left:20px; }
</style>
</head>

<body>
<form method="post" name="formulario" action="?">
<select name="paises">
<option selected="selected">Selecione uma opcao</option>
<option value="us" class="select_us">Estados Unidos</option>
<option value="fr" class="select_fr">France</option>
</select>
</form>
</body>
</html>

Observações quanto ao uso do css:

Práticamente você não precisa definir a altura e width caso seja apenas um ícone. Porém se for uma imagem maior, defina o height e substitua width por min-width.

Para que o texto não fique sobre a imagem, defina 'padding-left' com a largura da imagem + alguns pixels.

Enfim, isso varia com as dimensões da imagem que você utilizar.

 

Exemplo do css:

/* us.gif tem 18x18 pixels */
.opcao_usa { background:transparent url(http://dhtmlx.com/docs/products/dhtmlxCombo/images/us.gif) no-repeat top left; height:18px; padding-left:20px; }

Nota: Não testei em todos navegadores, porém acredito que deva funcionar nos navegadores mais 'tops'. Caso não funcione, estude o código e o comportamento do navegador, sem dúvida há uma solução.

 

Boa sorte.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito