Pesquisar na Comunidade
Mostrando resultados para as tags ''diferentes''.
Encontrado 1 registro
-
Botão que chama Imagem em DIVs Diferentes
leandro32 postou um tópico no fórum Desenvolvimento frontend
Senhores, me ajudem pelo amor de Deus!!! Estou montando uma "Base de Documentos" onde eu trabalho. Essa base é dividida por tipo de Documento (CNH/RG/OUTROS) e ano de expedição (2019/2018/2017...). As máscaras principais (HOME's) já foram feitas, o problema é que não consigo vincular esses botões dos anos em DIV's diferentes. Alguém, em nome de Jesus Cristo, me ajuda a criar uma regra que, ao clicar no ano 2018, doc aparece na DIV ao lado com a barra de ZOOM??? Porque eu já estou ficando louco!!! <!-- CÓDIGO DO SITE --> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="estilo.css" /> <title>ACRE - RG</title> </head> <body> <!-- CABEÇALHO COM MENUS --> <header> <div class="container"> <div class="zoom"> <img src="logo.png" class="img-responsive" height="95px" width="130px" border="2px"> <div id="menu"> <a href="file:///C:/Users/Info-pc/Desktop/Base%20Documental/Base%20Documental.html">HOME</a> <a href="file:///C:/Users/Info-pc/Desktop/Base%20Documental/RG.html">RG</a> <a href="file:///C:/Users/Info-pc/Desktop/Base%20Documental/CNH.html">CNH</a> <a href="file:///C:/Users/Info-pc/Desktop/Base%20Documental/OUTROS.html">OUTROS</a> </div> </div> </div> </header> <!-- O CORPO DO SITE --> <div class="container2"> <fieldset> <center><h2><i> Estado do ACRE - RG</i></h2></center> </fieldset> </div> <div class="container3"> <!-- COLUNA DOS ANOS --> <div class="container4"> <div class="col-lg-2 col-md-2 col-sm-2"> <div style="height: calc(100vh - 230px); overflow-y: scroll; overflow-x: hidden; right: 16px"> <div class="btn-group-vertical" role="group" aria-label="..." <div class="zoom"> <button class="btn ng-scope btn-default" ng-class="{'btn-primary': analyser.selectedDocModel.guid === docModel.guid, 'btn-default': analyser.selectedDocModel.guid !== docModel.guid}" ng-repeat="docModel in analyser.filteredDocModels" ng-click="analyser.selectDocModel(docModel)" ng-show-img="areaimagem" style="-webkit-user-drag: none" class="ng-scope" img src="AM.01.jpg" class="img-responsive" href="AM.01.jpg" size="80%"> <small class="ng-binding">RG</small> <br> <small class="ng-binding">AM- 2019</small> </button> </div> </div> </div> </div> </div> <!-- O RODAPÉ Do SITE --> <footer> <span> <b>BASE DOCUMENTAL</b> - ©<i>Leandro do Nascimento Martins</i></span> </footer> </div> </div> </div> </body> </html> <!-- ARQUIVO ESTILO.CSS --> /* PADRÃO CSS */ /* eliminando configurações dos browsers*/ * {margin: 0; padding: 0; font-family: verdana, helvetica, arial;} /* TODAS AS TAG's DECLARADAS */ /* PARA UMA "TAG - PARTE" NORMAL, USA-SE APENAS O NOME */ p {color: silver; font-size: 15px; text-align: center; font-family: arial, "Times new roman"; text-shadow: 1px 1px 1px #111111;} body {background-color: #E8E8E8; width: 100%;} header {background-color: #08298A; height: 100px; padding: 2px; width: 100%;} footer {clear: both; color: white; background-color: #08298A; height: 40px; text-align: center ; padding: 10px; text-shadow: 1px 1px 1px black;} h1 {color: SILVER; text-align: center; margin: 0 0 50px 0; text-shadow: 2px 2px 2px #111111;} h2 {color: SILVER; text-align: center; margin: 5px 0 5px 0; text-shadow: 2px 2px 2px #111111;} /* TODAS AS ID's */ /* PARA "IDENTIFICAÇÃO - ID" DA DIV USA-SE .#. HASHTAG */ #div_principal {background-color: white; clear: both; background-size: 65%; min-height: 485px; padding: 40px 0 40px 0; margin: 1% 1% 1% 1%; width: 100%;} #logo {float: left; margin: 0 20px 0 10px;} #menu {float: right; margin-top: 40px; text-transform: uppercase;} #menu a {padding: 32px 20px; text-decoration: none; color: white; border-radius: 20px; border-top-right-radius: 20px; border-bottom-left-radius: 20px; cursor: pointer; transition: background-color 1s;} #menu a:hover {background-color: white; color: black;} #btn-default {text-decoration: none;} /* CLASS */ /* PARA CLASSES-CONTAINER's DIFERENTES USA-SE O PONTO . */ .efeito {background-color: rgba(0, 0, 0, 0.3); padding: 100px 0 100px 0;} .container {width: 100%; /* largura */ margin: auto; /* ajuste automatico independente de resolução*/} .container2 {width: 97%; /* largura */ margin: auto; /* ajuste automatico independente de resolução*/ background-color: white;} .container3 {width: 95%; margin: auto; background-color: #FFFAFA; clear: both;} .container4 {width: 10%; float: left; background-color: #FFFAFA; clear: both; } .container5 {background-color: ; float: left;} .col-lg-2 {width: 95%; } .col-md-2 {width: 50px;} .col-sm-2 { width: 79px;} .col-lg-10 { width: 80%; }