Ir para conteúdo

Arquivado

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

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

  • Conteúdo Similar

    • Por landerbadi
      Olá pessoal, boa tarde
       
      Tenho uma tabela chamada "produtos" com os seguintes campos (id, produto) e outra tabela chamada "itens" com os seguintes campos (id, prod_01, prod_02, prod_03, prod_04).
       
      Na tabela produtos eu tenho cadastrado os seguintes produtos: laranja, maçã, uva, goiaba, arroz, feijão, macarrão, etc.
       
      Na tabela itens eu tenho cadastrado os itens da seguinte maneira:
       
      1, laranja, uva, arroz, feijão;
      2, maçã, macarrão, goiaba, uva;
      3, arroz, feijão, maçã, azeite
       
      Meu problema é o seguinte: 
      Eu escolho um produto da tabela "produtos", por exemplo "uva".  Preciso fazer uma consulta na tabela "itens" para ser listado todos os registros que contenham o produto "uva" e que todos os demais produtos estejam cadastrados na tabela "produtos".
       
      No exemplo acima seria listado apenas dois registros, pois o terceiro registro não contém o produto "uva". 
       
      Alguém pode me ajudar? Pois estou quebrando a cabeça a vários dias e não consigo achar uma solução.
    • Por ILR master
      Pessoal, pergunta bem simples. Abaixo tenho o seguinte código:
       
      <script>
      function alerta()
      {
        if (window.confirm("Você realmente quer sair?")) {
          window.open("sair.html");
      }
      }
      </script>
       
      Funciona perfeitamente, só que está abrindo em outra janela e quero que abra na mesma janela.
       
      Alguém pode me ajudar?
    • Por landerbadi
      Boa tarde pessoal. Estou tentado fazer uma consulta no banco de dados porém estou tendo dificuldades. Tenho uma tabela chamada "itens" com os seguintes campos: id, item, plural, ativo. Nela tem cadastrado vários itens e seu respectivo plural. No campo ativo eu coloco a letra "S" para informar que esta palavra está ativa no sistema. Por exemplo: 1, casa, casas, S 2, mesa, mesas, S 3, cama, camas, S 4, moto, motos, S 5, rádio, rádios O quinto registro "radio" não está ativo no sistema pois não tem um "S" no campo ativo. E outra tabela chamada "variações" com os seguintes campos (id, item1, item2, item3) com os seguintes registros: 1, casa, camas, moto 2, mesas, casas, radio 3, rádio, cama, mesa Eu preciso fazer uma busca na tabela variações da seguinte maneira: Eu escolho um registro na tabela "itens", por exemplo "casa". Preciso fazer com que o php me liste todos os registros da tabela "variações" que contenham a palavra "casa". Porém se tiver algum registro com a palavra "casas" também tem que ser listado. Neste caso ele irá encontrar dois registros. Agora eu preciso que o php verifique os demais itens e faça a listagem apenas dos item que estão ativos (que contenham um "S" no campo ativo. Neste caso ele irá encontrar apenas um registro, pois o segundo registro contém a palavra "rádio". E "rádio" não está ativo na tabela itens. Como faço isso?
    • Por First
      Olá a todos!
       
      Quando eu tento fazer o login me mostra esse erro "Could not log you in."; Alguém sabe me ajudar a resolver esse problema no meu código?
      <?php require_once("core/init.php"); if (Input::exists()) { if (Token::check(Input::get("token"))) { $validate = new Validate(); $validation = $validate->check($_POST, array( "username" => array("required" => true), "password" => array("required" => true) )); if ($validation->passed()) { $user = new User(); $remember = (Input::get("remember")) === "on" ? true : false; $login = $user->login(Input::get("username"), Input::get("password"), $remember); if ($login) { Session::flash("home", "Welcome back!"); Redirect::to("index.php"); } else { echo "Could not log you in."; } } else { foreach ($validation->errors() as $error) { echo $error."<BR>"; } } } } ?> <form action="" method="POST"> <div class="field"> <label for="username">Username</label> <input type="text" name="username" id="username"> </div> <div class="field"> <label for="password">Password</label> <input type="password" name="password" id="password"> </div> <div class="field"> <label for="remember"> <input type="checkbox" name="remember" id="remember"> Remember me </label> </div> <input type="hidden" name="token" value="<?php echo Token::generate(); ?>"> <input type="submit" value="Log in"> </form>  
       
      Desde já obrigado.
    • Por ckcesar
      Eu tenho uma aplicação no zend com a versão 5.6 e com o postgresql 9.6. Agora eu precisei mudar a versão do meu postgresql para o 16.1, a parte de conexão do bd e consultas sqls funciona perfeitamente, o meu problema está para acessar os meus controllers. Eles não são encontrados em nenhuma rota, quero ver se alguém já passou por esse problema para me ajudar. Obrigado.
×

Informação importante

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