Je crée une pièce d'art interactive, que les gens peuvent collaborer. Ce que je veux, c'est qu'il y a une bibliothèque d'icônes que les gens peuvent utiliser. Et lorsque vous cliquez dessus, la souris obtient une classe et donc en cliquant sur une cellule spécifique dans la table, la cellule obtiendra l'icône comme image d'arrière-plan.
(Maintenant, je sais que j'aurai besoin d'une base de données, etc., mais c'est pour plus tard. Les premières choses d'abord.) P>
J'ai fait quelque chose de similaire il y a longtemps, mais je ne sais pas comment éditer cela Afin de travailler pour ce projet: P>
function nextPic() {
if ( $('html,body').css('cursor').indexOf('cursor2.png') > 0 )
{
counter += 1;
if (counter > myPictures.length - 1) {
// counter = 0;
}
else {
element.style.backgroundImage = "url(" + myPictures[counter] + ")";
}
}
3 Réponses :
Je ne sais pas d'utiliser une classe pour définir des couleurs variées; Une classe déduirait qu'ils sont tous identiques. Vous devez utiliser des identifiants pour différencier. Vous pouvez transmettre l'identifiant et la couleur que vous souhaitez modifier l'arrière-plan à une fonction et y travailler de cette façon. Ou vous pouvez choisir de mettre les couleurs dans un tableau et d'utiliser le numéro d'index?
J'ai fait un exemple de base en utilisant les carrés de votre violon, pour donner une idée. Comme vous pouvez le constater, j'ai seulement attribué l'une des deux valeur d'arrière-plan à l'aide de CSS. La fonction peut être modifiée pour modifier l'image d'arrière-plan si vous souhaitez utiliser des images au lieu de couleurs bien sûr. P>
espère que cela aide p>
p>
<div id="p1" class="pen" onclick="setPenColour(id, '#00FF00')" ;></div> <div id="p2" class="pen" style="background-color:blue;" onclick="setPenColour(id, 'red')"></div>
Cela fonctionne effectivement, mais l'idée est de cliquer sur une icône spécifique et de la "couleur dans" une grille avec cette icône spécifique. Et si on veut un autre, cliquez dessus et continuez «Coloriage dans». Au lieu de la couleur changeante de l'identifiant, il devrait permettre à l'utilisateur de colorer dans la grille vierge. J'ai édité un peu donc cela change l'arrière-plan plutôt que la couleur! Peut-être que c'est plus clair?
corrigé!
#art {
display: table;
border-spacing: 1px;
background-color: black;
border: 1px solid black;
}
.row {
display: table-row;
}
.pixel {
display: table-cell;
background-color: white;
width: 25px;
margin: 1px;
height: 25px;
background-size: contain;
}
.pen {
display: inline-block;
width: 40px;
height: 40px;
border: 2px solid black;
}
Oh mon mal n'a pas vu ça. Oui, on dirait que tu descends le chemin pour changer le Div Div!
hahaha c'est parfaitement bien. Votre code était incroyablement utile de toute façon. Mais oui, je suis content de résoudre d'une manière ou d'une autre. Maintenant au problème suivant! Merci encore pour votre aide :)
Voici donc un exemple de quelqu'un qui fait ce que vous voulez, mais au lieu de dans une grille de table dans une toile. Les accessoires fous pour avoir mis ceci: http://www.williammalone.com/articles/create -HTML5-Canvas-javascript-dessin-app /
Après le dessin de base sur une toile, ils ajoutent la possibilité de choisir des couleurs. Remarquez comment ils enregistrent la couleur cueillie dans une variable qui est ensuite appelée sur la fonction Toile Redraw (). P>
La même chose peut être faite avec des icônes. Il suffit d'avoir un événement OnClick pour tout icône cliquée comme ils l'ont fait avec des couleurs (dans leur cas, ils ont choisi MouseDown Event): P>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <canvas id="canvas" width="490" height="220" style="border: solid 1px black;"></canvas>
Je dirais généralement que vous auriez un événement OnClick sur les icônes et économiserions ce que l'icône a cliqué sur quelqu'un sur une variable. Vous pouvez ensuite appeler cette variable lorsqu'ils cliquent sur la technique / la toile mettent ainsi l'icône qu'ils avaient précédemment choisie sur place à laquelle elles ont cliqué sur l'art / la canvas.
Vous avez expliqué exactement ce dont j'ai besoin dans tous les bons mots. Merci beaucoup hahaha. Vous ne connaissez pas un bon exemple, non? Je cherche encore mais je n'ai pas encore trouvé.
Heureux que cela ait aidé, au lieu de moi, il était plus facile de trouver quelqu'un d'autre qui l'a déjà cloué. :)