How to call HTML code inside the css?

Question

How to call HTML code inside the css?

Navigation

#1 by (0 votes)
#2 by (0 votes)

1

First, it's quite possible that there are already topics talking about it. It was not lack of research, I just believe that I did not find the correct keywords.

Self explanatory question. I need a given code to appear on the page, according to the class that was assigned to <div> .

As an example, it would look something like this:

HTML:

<div class="a"></div>
<p>
<div class="b"></div>

CSS:

.a{
<img src="caminho/imagem1.png" title="Imagem 1" >
}
.b{
<img src="caminho/imagem2.png" title="Imagem 2" >
}

Is it possible?

html css front-end

asked by anonymous 12.03.2018 / 16:31

2 answers

Doubt Js code for div exchange Insert data into related tables using PDO

score 0 · Answer 1

As I understand it, you want to select an element of your HTML and assign an image dynamically according to the class of your HTML element. I made an example using Jquery where I assign the image to the element that contains the class a .

Note: With CSS I think it's not possible.

$(document).ready( ()=> {
    
    let img1 = "<img  src='http://www.artemisia.org.br/images/projetosrealizados/(0)tetse.jpg' title='exemplo titulo' alt='exemplo alt'  />"
  
   $('.a').html(img1);
})

<div class="a"></div>

<div class="b"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

score 0 · Answer 2

To do with pure JavaScript by class or ID using innerHTML like this:

  // função chama a imagem pela Class
  function inputByClass(){
    var x = document.getElementsByClassName("a");
    x[0].innerHTML = "<img src='http://placecage.com/100/100' alt=''/>";
  }
  // ativa img
  inputByClass();

  // função chama a imagem pelo ID
  function inputById(){
    let b = document.getElementById('b');
    b.innerHTML = "<img src='http://fillmurray.com/100/100' alt=''/>";
  }
  // ativa img
  inputById();

<br><br>
<div class="a"></div>
<br><br>
<div id="b"></div>