Hta

Front-end
#1

image
image1366×768 189 KB
`
Preciso de uma ajudinha nesse codigo de um visualisador de imagens.
Quero deixar o HTA transparente, e a imagem do fundo se encaixe por igual nas bordas, e quando maximizar a imagem de fundo sempre seque o tamanho da janela hta, e tabem se poder colocar opcoes te troca de cores das barras e fundo atraves de um botton, vamos fazer algolegal juntos…
Obrigado Tecnoartes.

OBS: Estenção para salver (programa foto.hta).
salve atraves do bloco de notas ou seu editor de preferencia.

Código Abaixo:

<hta:application
id=“JavesViewer”
applicationName=“Javes Imagem”
border=“thick”
borderstyle=“normal”
maximizebutton=“yes”
minimizebutton=“yes”
navigable=“no”
scroll=“no”
showintaskbar=“yes”
singleinstance=“yes”
contextmenu=“yes”
/>

Javes Imagem
Procurar Imagem Zoom + Zoom - Fechar 
<div id="imageContainer">
    <img id="previewImage">
</div>
<input type="file"
       id="fileInput"
       accept="image/*"
       onchange="HandleFileSelect"
       style="display:none">
body { margin: 0; overflow: hidden; background-color: black; color-font:cyan; font-family: Arial, sans-serif; display: flex; justify-content: center; align-items: center; /* background-image: url("fundo.jpg");*/ } 
/* CAIXA MAIOR FUNDO PRINCIPAL */
#mainBox { 
    background-color: black;
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=80);
    background-image: url("fundo.jpg");
    background-size: contain;      /* preenche a tela */
    background-position: center; /* centraliza */
    background-repeat: no-repeat; 
    object-fit: cover;
    display:; /* Remove possíveis margens indesejadas */   
    object-fit: fill; /* Estica a imagem para preencher todo o espaço (padrão) */  
    /*display: flex;*/
     max-width: 100%;
      height: 110%;
      width: 100%;        
}

/* BARRA DE CONTROLES TOPO */
.controls {
    padding: 8px;
    background-color: BLUE;
    text-align: center;
    border-bottom: 1px solid CYAN;
    /*filter: progid:DXImageTransform.Microsoft.Alpha(opacity=90);*/
   background-image: url("planodefundo1.png");
}

/* BOTOES DO TOPO */
button {
padding: 8px 14px;
margin: 4px;
cursor: pointer;
background: transparent;
color: orange;
border-bottom: 2px solid CYAN;
}

/* CONTAINER DA IMAGEM */
#imageContainer {
    width: 100%;
    height: calc(100% -50px);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: auto;
  
}

#previewImage {
    max-width: none;
    max-height: none;
}