Ir para conteúdo
santans

há como exibir imagens especificas a locais pre determinados em uma pagina HTML usando CSS e JS

Recommended Posts

Desejo fazer o seguinte:

 

Designar imagens a molduras pré definidas em uma pagina html usando javascript.

 

Ex. criei o seguinte código html:

<div id="container">
        <div class="menu-roupa">
            <div class="box-produto">
                <img name="imga" class="exibir-img">
            </div>

            <div class="box-produto">
                <img name="imgb" class="exibir-img">
            </div>

            <div class="box-produto">
                <img name="imgc" class="exibir-img">
            </div>
        </div>
    </div>

 

 

 

E defini o tamanho de cada moldura com o css:

#container{
    
    width: 100%;
    
/* Orientação dos blocos de conteudo dentro do bloco principal / pai*/

    display: flex;
    align-items: center;
    justify-content: space-between
}

.container-index{
    height: 400px;
    background-image: url(a.png);
}

.menu-roupa{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 80%;
    height: 550px;
    margin-left: 10%;
    margin-right: 10%;
    background-color: aquamarine;
}

.box-produto{
    width: 300px;
    height: 450px;
    background-color: bisque;
}

.exibir-img{
    height: 300px;
    width: 300px;
}

agora quero desenvolver uma aplicação JS que desloque a imagem especifica para cada uma das box`s pre definida por  A, B e C.

 

 

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Boa tarde,

 

Utilizando JQuery é simples

$("img[name='imga']").attr('src','https://assets-cdn.github.com/images/modules/logos_page/GitHub-Logo.png')

$ - chamada da lib do JQuery (https://jquery.com/)

("img[name='imga']") - buscando o elemento "img" que possuí o atributo "name" com o valor "imga"

.attr - função para buscar ou alterar atributos, para buscar use .attr("atributo"), para alterar utilize .attr("atributo", "valor")

('src', 'https://...') - altera o atributo 'src' para o valor setado.

 

Espero que ajude.

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por cesaroet
      Galera, estou com o seguinte problema:
      tenho 4 redirecionamento, até a 2 funciona normal, mas a partir da 3 redireciona para o menu.php novamente.
      alguem tem uma dica?
      <?php session_start(); if(!isset($_SESSION['usuario']) /*|| ($_SESSION['nivel']) */){ session_destroy(); header("location:menu.php"); exit; } if($_SESSION['nivel'] == '1'){ header("location:checklist_gabriel/index.php"); } if($_SESSION['nivel'] == '2'){ header("location:checklist/index.php"); } if($_SESSION['nivel'] == '3'){ header("location:conferencia/controle/"); } if($_SESSION['nivel'] == '4'){ header("location:controle/index.php"); } ?>  
    • Por 4ly
      Olá. Bom basicamente eu tenho um botão âncora que leva até a aba de sobre do meu site, só que ele não tem animação, ele simplesmente "teleporta" para essa aba do nada isso não é legal. 
      Gostaria de saber algum código de JavaScript ou CSS para solucionar isso 
      Esse é o código : 
       
      <button id="explorer"><a href="#about">Explorar</a></button>
    • Por leo_santo1
      Venho por meio desse post procurar ajuda com meu código!
      Estou fazendo um código usando `DataTable` , sou iniciante na programação, depois de umas pesquisas e até mesmo algumas dicas conseguir construir uma DataTable com banco de dados.
      Continuando minhas pesquisas para aprimorar mais ainda o código, percebi que a  `DataTable` possuir varias funções interessantes, umas delas em especifico chamou bastante minha atenção e até me ajudaria no código que no caso é o uso de Linhas filhas ocultas, que quando fazemos o click em cima de um botão aparece as informações extras da linha ( no caso os dados a mais do banco ) e ao apertar ela novamente ele oculta as informações.
      Gostaria de ajuda para criar essa função na minha Tabela, já realizei pesquisas no próprio site da  `DataTable` , aqui, porem não entendo bem o jeito que eles explicam.
      segue abaixo meu código da table e da  `DataTable` que conecta com o Banco.
       
      Tabela
      <table id="employee-grid" cellpadding="0" cellspacing="0" border="0" class="display" width="100%"> <thead> <tr> <th>Nome</th> <th>CPF</th> <th>Data de Nascimento</th> <th></th> <th>Ação</th> <th></th> </tr> </thead> <thead> <tr> <td><input type="text" data-column="0" class="search-input-text" style="width: 150px;"></td> <th><input type="text" data-column="1" class="search-input-text" style="width: 150px;"></td> <th><input type="text" id="data" data-column="2" class="search-input-text" style="width: 150px;"></th> <th></th> <td> </td> <td></td> </tr> </thead> </table> Script DataTable
      $(document).ready(function() { var dataTable = $('#employee-grid').DataTable( { "processing": true, "serverSide": true, "bJQueryUI": true, "oLanguage": { "sProcessing": "Processando...", "sLengthMenu": "Mostrar _MENU_ registros", "sZeroRecords": "Não foram encontrados resultados", "sInfo": "Mostrando de _START_ até _END_ de _TOTAL_ registros", "sInfoEmpty": "Mostrando de 0 até 0 de 0 registros", "sInfoFiltered": "", "sInfoPostFix": "", "sSearch": "Buscar:", "sUrl": "", "oPaginate": { "sFirst": "Primeiro", "sPrevious": "Anterior", "sNext": "Seguinte", "sLast": "Último" } }, "ajax":{ url :"../Tabelas/Tabela_consulta_cliente.php", // json datasource type: "post", // method , by default get error: function(){ // error handling $(".employee-grid-error").html(""); $("#employee-grid").append('<tbody class="employee-grid-error"><tr><th colspan="3">No data found in the server</th></tr></tbody>'); $("#employee-grid_processing").css("display","none"); } } } ); $("#employee-grid_filter").css("display","none"); // hiding global search box $('.search-input-text').on( 'keyup click', function () { // for text boxes var i =$(this).attr('data-column'); // getting column index var v =$(this).val(); // getting search input value dataTable.columns(i).search(v).draw(); } ); $('.search-input-select').on( 'change', function () { // for select box var i =$(this).attr('data-column'); var v =$(this).val(); dataTable.columns(i).search(v).draw(); } ); } ); Conexão DataTable com o Banco de dados
      <?php $servername = "localhost"; $username = "root"; $password = ""; $dbname = "loc_equipamentos"; $conn = mysqli_connect($servername, $username, $password, $dbname) or die("Connection failed: " . mysqli_connect_error()); $requestData= $_REQUEST; $columns = array( 0=>'nome_usuario', 1=> 'cpf_usuario', 2=> 'data_nascimento', 3=> 'id_usuario', 4=> 'id_usuario', 5=> 'id_usuario' ); $sql = "SELECT nome_usuario, cpf_usuario, data_nascimento, id_usuario "; $sql.=" FROM usuario"; $query=mysqli_query($conn, $sql) or die("employee-grid-data.php: get employees"); $totalData = mysqli_num_rows($query); $totalFiltered = $totalData; . $sql = "SELECT nome_usuario, cpf_usuario, data_nascimento, id_usuario "; $sql.=" FROM usuario WHERE tipo_perfil = 'CLIENTE' AND ativo_usuario = 'TRUE'"; if( !empty($requestData['columns'][0]['search']['value']) ){ $sql.=" AND nome_usuario LIKE '".$requestData['columns'][0]['search']['value']."%' "; } if( !empty($requestData['columns'][1]['search']['value']) ){ $sql.=" AND cpf_usuario LIKE '".$requestData['columns'][1]['search']['value']."%' "; } if( !empty($requestData['columns'][2]['search']['value']) ){ //age $sql.=" AND data_nascimento LIKE '".$requestData['columns'][2]['search']['value']."%' "; } $query=mysqli_query($conn, $sql) or die("employee-grid-data.php: get employees"); $totalFiltered = mysqli_num_rows($query); $sql.=" ORDER BY ". $columns[$requestData['order'][0]['column']]." ".$requestData['order'][0]['dir']." LIMIT ".$requestData['start']." ,".$requestData['length']." "; $query=mysqli_query($conn, $sql) or die("employee-grid-data.php: get employees"); $data = array(); while( $row=mysqli_fetch_array($query) ) { $nestedData=array(); $informacao ="<div class='botaodiv'> <a href = ?informacao=".$row['id_usuario']." >+ Informações</a> </div>"; $editar ="<div class='botaodiv'> <a href = ?editar=".$row['id_usuario']." >Editar</a> </div>"; $deletar ="<div class='botaodiv'> <a href = ../Eventos/evento.php?DesativaCadastro=".$row['id_usuario']." >Excluir</a> </div>"; $nestedData[] = $row["nome_usuario"]; $nestedData[] = $row["cpf_usuario"]; $nestedData[] = $row["data_nascimento"]; $nestedData[] = $informacao; $nestedData[] = $editar; $nestedData[] = $deletar; $data[] = $nestedData; } $json_data = array( "draw" => intval( $requestData['draw'] ), "recordsTotal" => intval( $totalData ), "recordsFiltered" => intval( $totalFiltered ), "data" => $data ); echo json_encode($json_data); ?> Fora o caso de criar Detalhes para Linhas, Caso alguém tenha alguma sugestão de como melhorar meu código ( por exemplo uma Conexão ao Banco mais simples, um Js melhor etc.. ) ou alguma critica para eu evoluir, irei agradecer bastante!  
×

Informação importante

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