Preciso de ajuda em javascript

[itzMysto 0]

Olá, boa tarde, preciso de uma ajuda muito chata, como faço para colocar uma imagem dentro de um circulo, porém esse circulo se abre quando é clicado em um circulo menor, é um javascript pronto, sou estudando de javascript, ainda não tenho muita noção, os circulos são em "CORES", a cada atualização da página cada circulo muda de cor, Obrigado att

[itzMysto 0]

alguém ?

[pedropgomes 4]

fica mais fácil o pessoal te ajudar se vc colocar o código!

[Marcos_imasters 288]

< script type = "text/javascript" > 
toggle_color("#61beb3", "#90a2c6", 4000, 2000);

function toggle_color(color1, color2, cycle_time, wait_time) {

    setInterval(function first_color() {
        document.body.style.backgroundColor = color1;
        setTimeout(change_color, wait_time);
    }, cycle_time);

    function change_color() {
        document.body.style.backgroundColor = color2;
    }
} < /script> 

para alteração das cores você usar o rand pra ser aleatoria exemplo

ja´no click use

document.querySelectorAll('.circulo_menor').addEventListener(event, function() { alert('funcao sua'); });

 

[itzMysto 0]

Entendi Marcos_imaster, consegui colocar a imagem dentro das bolinhas, porém preciso agora que fiqueim relevantes ao raio da bolinha.

 

codigo JS que chama as bolinhas, e image

var fnColor = d3.scale.category20();
      node.append("circle")
        .attr({r: function (d) {return d.r;}, cx: function (d) {return d.cx;}, cy: function (d) {return d.cy;}})
        .style("fill", function (d) {
          return options.data.color !== undefined ? options.data.color(d.item) : fnColor(d.item.text);
        })
        .attr("opacity", "0.8");

      node.append("image")
              .attr("xlink:href", "https://sp.yimg.com/xt/th?id=OIP.M2226d4689d9d024b5a12cbcd3a6be494o0&pid=15.1&P=0&w=300&h=300")
              .attr("x", function (d, i) { return  d.cx })
              .attr("y", function (d, i) { return  d.cy })
             // .attr("y", function (d, i) { return })
             .attr("width", 30)
             .attr("height", 30)
      node.sort(function (a, b) {return options.data.eval(b.item) - options.data.eval(a.item);});

Aqui uma imagem de como funciona.

 

[Marcos_imasters 288]

você ta usando js native ou jquery?

tou achando que tu ta usando os dois misturados acho que pra tu coloca as imagens certinho do jeito que tu quer tu tem que usar css