1

Possuo um conjunto de miniatura de imagens no option do select.

Gostaria que o script o introduzisse automaticamente a legenda, para cada uma dessas imagens no select, baseada no atributo title da tag option.

O exemplo do que tenho feito:

window.onload = function(){
var opt = document.getElementById('lista').getElementsByTagName('option');

var txt = document.getElementById('lista').getElementsByTagName('b');

for (var n=0; n < txt.length; n++) {
  for (var i=0; i < opt.length; i++) {
    txt[n].getElementsByTagName('b')[0].innerHTML = opt[i].getElementsByTagName('option')[0].title;
    }
  } 
}
body {
	background-color: whitesmoke;
}

option {
	font-size: 12pt;
	color: white;
	padding: 10 10 10 10;
	margin: 0 auto;
	background-repeat: no-repeat; 

	background-size: 100px;
	height: 50px;
}

option:hover { 
	background-color: whitesmoke; 
    border-right: 2px solid tomato;
	cursor: pointer; 
    size: 150%;
}

.bloc select {  
	width:450px; 
	height:100%;
	padding:30px; 
	background-color: white;
    float: right;
    border:none;
    margin: 0px -20px 0px 0px;
    }
    
.bloc {
    overflow: hidden;
    }
<div class="bloc">
  <select id="lista" size="3">
	<option style="background-image: url(https://sites.google.com/site/mplayerplugin/repositorio/big_buck_bunny.jpg);" title="Big Buck Bunny">Big Buck Bunny</option>&nbsp;&nbsp;<b></b>

	<option style="background-image: url(https://sites.google.com/site/mplayerplugin/repositorio/madagascar_2.jpg);" title="Madagascar 2">Madagascar 2</option>&nbsp;&nbsp;<b></b>

	<option style="background-image: url(https://sites.google.com/site/mplayerplugin/repositorio/procurando_dory.jpg);" title="Procurando Dory">Procurando Dory</option>&nbsp;&nbsp;<b></b>
  </select>
<div>


inserir a descrição da imagem aqui

Observe que, se utilizar o atributo text do option então ele ficará sobre a imagem - então vi que seria necessário investir esforços em trabalhar com o atributo title, ja que o mesmo fica em oculto, bastaria apenas buscar uma maneira de pegar o seu conteúdo e por entre uma outra tag texto. Como exemplo: span, b, p, strong, small etc...

O script, apesar de o console não acusar erro algum, ainda não me trouxe nenhum resultado.

6
  • Imagino que vc poderia usar uma lista LI para fazer isso em vez de SELECT, até porque o SELECT não é bem a melhor escolha para fazer tal coisa. Também vc não pode colocar elementos entre as OPTION pq o HTML não vai exibir.
    – Sam
    19/05/2018 às 23:00
  • Sim, seria uma opção. Faz o SELECT na largura das imagens e coloca uma lista ao lado exibindo os nomes.
    – Sam
    19/05/2018 às 23:27
  • @dvd Então, como eu ja consegui capturar o title e jogar dentro da div vou preparar uma resposta pra este tópico. Ficará pra futuras pesquisa e consulta. 19/05/2018 às 23:29
  • Eu havia pensado nisso tb, mas não sabia que o OPTION poderia ter pseudo-elementos :D... mas veja que se o título do filme for longo, o texto some pela direita ;/
    – Sam
    19/05/2018 às 23:56
  • Eu vi, mas clicando no <p> não seleciona a option.
    – Sam
    20/05/2018 às 2:37

2 Respostas 2

2

Acho que não é necessario o javascript neste caso.

tambem seria possivel usar Javascript mas acho mais simples não usa-lo neste momento.

Solução

Usar uma pseudo classe no css, neste caso o ::after para abrigar o texto e poder movimenta-lo, assim você pode usar o tranform: junto ao translate para movimenta-lo em relação a si mesmo. Por fim para pegar o atributo title da tag, usamos a função attr() do css, que recebe o attributo que você deseja pegar o conteudo.

Espero ter ajudado ;D

body {
   background-color: whitesmoke;
}

option {
   font-size: 12pt;
   color: white;
   padding: 10 10 10 10;
   margin: 0 auto;
   background-repeat: no-repeat; 

   background-size: 100px;
   height: 50px;
}

option:hover { 
   background-color: whitesmoke; 
   border-right: 2px solid tomato;
   cursor: pointer; 
   size: 150%;
}

option::after {
   content: attr(title);
   display: block;
   color: black;
   transform: translateX(110px);
}

.bloc select {  
   width:450px; 
   height:100%;
   padding:30px; 
   background-color: white;
   float: right;
   border:none;
   margin: 0px -20px 0px 0px;
}

.bloc {
   overflow: hidden;
}
<div class="bloc">
  <select id="lista" size="3">
	<option title="Big Buck Bunny" style="background-image: url(https://sites.google.com/site/mplayerplugin/repositorio/big_buck_bunny.jpg);"></option>

	<option title="Madagascar 2" style="background-image: url(https://sites.google.com/site/mplayerplugin/repositorio/madagascar_2.jpg);"></option>

	<option title="Procurando Dory" style="background-image: url(https://sites.google.com/site/mplayerplugin/repositorio/procurando_dory.jpg);"></option>
  </select>
<div>

1
  • 1
    Tai uma coisa que não sabia. Parabéns cara! Mesmo assim, irei colocar uma solução javascript. 19/05/2018 às 23:47
1

Segue problema solucionado em Javascript em conjunto com CSS:

var opt = document.getElementById('lista');

var txt = document.getElementById('container').getElementsByTagName('p');

  for (var i=0; i < opt.length; i++) {
    txt[i].innerHTML = opt[i].title;
    }
body {
	background-color: whitesmoke;
}

option {
	background-repeat: no-repeat; 
	background-size: 100px 45px;
	height: 50px;
    color: white;
}

option:hover { 
	background-color: whitesmoke; 
    border-right: 2px solid tomato;
	cursor: pointer; 
    }

        .bloc select {
            width:280px;
            border: none;
            float: left;
            margin: 5px -176px 0px 0px;
            background-color: white;
		    color: white;

        }

        .bloc {
            vertical-align: top;
            overflow: hidden;
        }
    
#container  {
    width: 265px;
    color: black;	
    line-height: 30px;
    float: left;
    padding: 15px;
    margin: 5px;
    background-color: white;
}
<div id="container">

<div class="bloc">
  <select id="lista" size="3">
	<option style="background-image: url(https://sites.google.com/site/mplayerplugin/repositorio/big_buck_bunny.jpg);" title="Big Buck Bunny"></option>

	<option style="background-image: url(https://sites.google.com/site/mplayerplugin/repositorio/madagascar_2.jpg);" title="Madagascar 2"></option>

	<option style="background-image: url(https://sites.google.com/site/mplayerplugin/repositorio/procurando_dory.jpg);" title="Procurando Dory"></option>
  </select>
  <div>
  
    <p></p>
    <p></p>
    <p></p>
</div>

1
  • Legal, o unico ponto seria adicionar o hover a tag p tambem para não perder o efeito 20/05/2018 às 2:33

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .