Positionner les icônes dans le cercle

Question

Comment puis-je positionner plusieurs <img> dans un cercle autour d'un autre et faire en sorte que tous ces éléments soient également des liens cliquables ? Je veux que cela ressemble à l'image ci-dessous, mais je n'ai aucune idée de la façon d'obtenir cet effet.

Est-ce que c'est possible ?

Answer 1

Vous pouvez certainement le faire avec du css pur ou utiliser JavaScript. Ma suggestion :

• Si vous savez déjà que le nombre d'images ne changera jamais, calculez simplement vos styles et utilisez du css simple (avantages : meilleures performances, très fiable).

• Si le nombre peut varier dynamiquement dans votre application ou peut simplement varier à l'avenir, optez pour une solution Js (avantages : plus résistant à l'avenir).

J'avais un travail similaire à faire, alors j'ai créé un script et l'ai mis en libre accès. ici sur Github pour tous ceux qui pourraient en avoir besoin. Il accepte simplement quelques valeurs de configuration et produit simplement le code CSS dont vous avez besoin.

Si vous souhaitez opter pour la solution Js, voici un pointeur simple qui peut vous être utile. En utilisant ce html comme point de départ étant #box le conteneur et .dot l'image/div au milieu autour de laquelle vous voulez que toutes vos autres images soient placées :

html de départ :

<div id="box">
  <div class="dot"></div>
  <img src="my-img.jpg">
  <!-- all the other images you need-->
</div>

Démarrage de Css :

 #box{
  width: 400px;
  height: 400px;
  position: relative;
  border-radius: 100%;
  border: 1px solid teal;
}

.dot{
    position: absolute;
    border-radius: 100%;
    width: 40px;
    height: 40px;
    left: 50%;
    top: 50%;
    margin-left: -20px;
    margin-top: -20px;
    background: rebeccapurple;
}
img{
  width: 40px;
  height: 40px;
  position: absolute;
}

Vous pouvez créer une fonction rapide de ce type :

var circle = document.getElementById('box'),
    imgs = document.getElementsByTagName('img'),
    total = imgs.length,
    coords = {},
    diam, radius1, radius2, imgW;

// get circle diameter
// getBoundingClientRect outputs the actual px AFTER transform
//      using getComputedStyle does the job as we want
diam = parseInt( window.getComputedStyle(circle).getPropertyValue('width') ),
radius = diam/2,
imgW = imgs[0].getBoundingClientRect().width,
// get the dimensions of the inner circle we want the images to align to
radius2 = radius - imgW

var i,
    alpha = Math.PI / 2,
    len = imgs.length,
    corner = 2 * Math.PI / total;

// loop over the images and assign the correct css props
for ( i = 0 ; i < total; i++ ){

  imgs[i].style.left = parseInt( ( radius - imgW / 2 ) + ( radius2 * Math.cos( alpha ) ) ) + 'px'
  imgs[i].style.top =  parseInt( ( radius - imgW / 2 ) - ( radius2 * Math.sin( alpha ) ) ) + 'px'

  alpha = alpha - corner;
}

Vous pouvez voir un exemple en direct aquí

Answer 2

Il n'existe aucun moyen de placer comme par magie des éléments cliquables dans un cercle autour d'un autre élément avec CSS. Pour ce faire, j'utiliserais un conteneur avec l'option position:relative; . Et ensuite placer tous les éléments avec position:absolute; et en utilisant top y left pour cibler sa place.

Même si vous n'avez pas placé jquery dans vos balises, il serait préférable d'utiliser jQuery / javascript pour cela.

La première étape consiste à placer votre image centrale parfaitement au centre du conteneur en utilisant les éléments suivants position:relative; .

#centerImage {
  position:absolute;
  top:50%;
  left:50%;
  width:200px;
  height:200px;
  margin: -100px 0 0 -100px;
}

Ensuite, vous pouvez placer les autres éléments autour d'elle en utilisant une balise offset() de la centerImage moins la offset() du conteneur. En vous donnant l'exacte top y left de l'image.

var left = $('#centerImage').offset().left - $('#centerImage').parent().offset().left;
var top = $('#centerImage').offset().top - $('#centerImage').parent().offset().top;

$('#surroundingElement1').css({
  'left': left - 50,
  'top': top - 50 
});

$('#surroundingElement2').css({
  'left': left - 50,
  'top': top 
});

$('#surroundingElement3').css({
  'left': left - 50,
  'top': top + 50 
});

Ce que j'ai fait ici, c'est placer les éléments relatif à l'image centrale. J'espère que cela vous aidera.

Answer 3

Vous pourriez le faire comme ça : violon

Ne faites pas attention au positionnement, c'est un exemple rapide.