28172 sujets

CSS et mise en forme, CSS3

Modifier area avec le css

Bonjour,

Je cherche à modifier les coordonnées de zones cliquables sur une image avec du css mais je ne trouve pas comment faire...

Est-ce seulement possible ? Merci d'avance
Hello,

Ça fait (très) longtemps que je n'ai pas utilisé d'images map, mais je pense que c'est effectivement impossible. Tu peux par contre plutôt te rabattre sur JS (et utiliser par exemple jQuery pour faciliter la manipulation des éléments/sélections) pour modifier tes coordonnées.

Mais sans présentation du contexte, je me demande bien pourquoi tu aurais besoin de modifier à la volée les coordonnées de ton image map… Smiley confused
Argh malheur de malheur !!

Merci de l'info en tout cas.
J'aimerais créer un jeu où il faut cliquer sur une image de fond que j'ai (et au bon endroit bien sûr). Et il faut aussi que ça soit adapter à la taille de l'écran.
Donc comme il n'y a pas moyen d'utiliser les pourcentages, je pensais utiliser les medias queries. Donc j'avais besoin que le css puisse modifier les coordonnées des area...

Alors je ne sais maintenant plus ce qu'il faut que j'utilise : map area et du JS pour les modifications ? Canvas, SVG (et attention, tout à la main, pas question de dessiner, suis trop nulle pour ça)

Merci encore
Ah dans ce cas, je dirais que JS a ici toute sa place.
À voir, puisque tu ne donne pas les contraintes précises (en terme de positionnement, de comportement, etc.) de ton jeu…
cf parenthèses… et plus si possible : qu'est-ce qui dois bouger exactement ? As-tu une ébauche ou un petit exemple-test sur jsfiddle ou autre à montrer ?
Bonjour,

Oui j'ai bien vu les parenthèses mais je n'en comprends pas le contenu. Ce qui doit bouger ? Etant donner que si j'utilise des medias queries pour bouger l'image en fonction de la taille de l'écran, il va falloir que les area s'adaptent.

Pour le code, je le passerai plus tard (suis en cours ^^)

Merci
Voilà les codes (enfin une partie car j'en ai plusieurs pour des tests afin de choisir la méthode)
<!DOCTYPE html>
<html lang="fr">
	<head>
		<title>Trions nos déchets</title>
		<meta charset="utf-8" />
		<link rel="stylesheet" href="tri.css" />
	</head>
	<body>
		<div id="fond">
			<div id="dechets" class="eau">
			</div>
		</div>
		<button id="button">Suivant</button>
		<script type="text/javascript" src="tri.js">
		</script>
	</body>
</html>


#fond 
{
	background: url(images/poubelles2.png) no-repeat center center;
	width:50%;
	padding-top:36.5%;/* ratio image = (500px X 365px) */
	margin:auto;
	background-size:100%;
	position:relative;
}

#dechets 
{
	position:absolute;
	top:40%;
	left:42%;
	width:10.8%;
	padding-top:12%;/* ratio sprite = 108 X 120 */
	background:url(images/dechets.png);
	background-size:520%;
	background-position: 50% 0%  /*pas de 25% en 25% et de 50% en 50%*/
}

#dechets.eau
{
	background-position: 0% 0%;
}

#dechets.banane
{
	background-position: 25% 0%;
}

#dechets.pot_entier
{
	background-position: 50% 0%;
}

#dechets.pot
{
	background-position: 75% 0%;
}

#dechets.couvercle
{
	background-position: 100% 0%;
}

#dechets.orange
{
	background-position: 0% 50%;
}

#dechets.conserve
{
	background-position: 25% 50%;
}

#dechets.carton_sale
{
	background-position: 50% 50%;
}

#dechets.carton_propre
{
	background-position: 75% 50%;
}

#dechets.canette
{
	background-position: 100% 50%;
}

#dechets.verre
{
	background-position: 0% 100%;
}

#dechets.huile
{
	background-position: 25% 100%;
}

#dechets.polystyrene
{
	background-position: 50% 100%;
}

#dechets.papier_sale
{
	background-position: 75% 100%;
}

#dechets.papier_propre
{
	background-position: 100% 100%;
}


var tab=new Array ("eau", "banane", "pot_entier", "pot", "couvercle", "orange", "conserve", "carton_sale", "carton_propre", "canette", "verre", "huile", 
					"polystyrene", "papier_sale", "papier_propre"),
	div_dechets=document.getElementById("dechets"),
	button=document.getElementById("button"),
	pile=new Array ()
	retourne=false,
	vu=false;
					
/*fonction qui gère la rétrocompatibilité*/
function addEvent(element,event,func,bool)
{
	bool=bool||true;
	element.addEventListener? element.addEventListener(event,func,bool):element.attachEvent('on'+event,func);/*P.A.N./F.O.B.*/
}

function changeClass(number)
{
	div_dechets.className=tab[number];
}

function remplirPile()
{
	for(var i=0; i<20;i++)
	{
		pile.push(Math.floor(Math.random() * 15)) 
	}
}

function suivant()
{
	if(pile.length==0)
	{
		remplirPile();
	}
	changeClass(pile.pop());
	if(retourne)
	{
		if(vu)
		{
			retourne=false;
			vu=false;
		}
		else
		{
			vu=true
		}
	}
}

function act()
{
	if (!retourne && div_dechets.className=="papier_sale")
	{
		pile.push(Math.floor(Math.random()*2+13));
		retourne=true;
		suivant();
		
	}
	if(div_dechets.className=="pot_entier")
	{
		pile.push(3);
		pile.push(4);
		suivant();
	}
	
	
}

addEvent(button, "click", suivant);
addEvent(div_dechets, "click", act);


upload/50936-poubelles2.png
pour le fond et pour les déchets voici un exemple : upload/50936-bouteillee.png

Ce qu'il faut, (pas encore mis en place car je ne sais pas par quelle méthode le faire) c'est cliquer sur la poubelle associée au déchet (ou sur le déchet pour agir dessus, possible dans certains cas).
Bonjour,

Et oui toujours le même problème. Mais je ne vois pas en quoi il y a une solution... Peut importe où on lâche la souris sur l'image l'effet est pris en compte, hors ce qui m'intéresse ce n'est que sur une partie de l'image
De plus le système, en supposant que l'on peut sélectionner des bouts d'images (dans l'idée de map arae) est-il adaptable à la taille de l'écran ?

Merci
Pour le <img/> , <map> est <area> , on s'est dejà croisée sur le sujet et la seule solution CSS est un changement d’échelle via transform:scale() et les mediaquerie, Pour les vieux IE c'est zoom + js pour tester la largeur de la fenêtre et mettre à jour la valeur de zoom.
Cela ne t'as pas semblé convaincant ou compréhensible. pas de soucis.

L'autre piste en SVG , tu ne l'as pas suivie non plus.

En gros , à ce que j'ai compris , tu veut trier les déchets vers différents endroit de ta page.
Donc reste le drag & drop de html5 (pourquoi faire compliqué) et positionner au dessus de ton image des éléments zones pour faire tomber dedans ce que tu tires avec la souris.

Ce qui donnerait ça : http://codepen.io/gc-nomade/pen/sbogC

P.S. je me suis permis de squizé tes functions , apparement encore en develloppement.
J''y ais remis l'idée d'un tri sur un array avec clé valeur (proposé sur une autre de tes questions) , utilisable par la suite pour accepter ou non que tel déchet soit déposer dans tel ou tel poubelle, l'idée etait de determiner tes régle depuis cet array associatif pour ne pas avoir a multiplier break ou if par la suite et seulement comparer une valeur avec une id ou class .

++

<editer> Coté js ou develloppement pur, je suis à peine averti, alors si un pro pouvais réorienter sur les méthodes à utiliser pour aider au mieux Ccile13, ça serait cool Smiley smile </edit>
Modifié par gc-nomade (12 Apr 2014 - 18:05)
Alors, concernant le "scale map area media queries" il s'agit de JQuery donc ça ne me tente pas (à moins de le refaire en JS, oui, j'aime réinventer la roue). Pour le SVG je pensais que ça n'était possible qu'à partir de logiciel et que c'était une grosse boite noire qui pondait une page, chose que je ne veux pas. Mais depuis j'ai mieux compris et c'est une des options possibles (avec canvas mais il me semble que svg serait mieux pour la gestion de la taille d'écran).
Cependant, avec les media queries j'ai eu une idée : faire des échelles de taille. C'est-à-dire si l'écran est entre ça et ça, afficher telle taille, sinon si c'est entre ça et ça telle taille etc... Mais pour que cela fonctionne il aurait fallu que je puisse bouger les coordonnées des areas avec le CSS chose qui n'est pas possible.

Le drap&drop ne m'intéresse pas puisque je ne veux que cliquer et non coulisser (merci quand même ^^).

Il me reste donc le SVG mais il faudrait que je dessine en codant (car mes talents en dessin sont ce qu'ils sont) ou le canvas (même problème) ou je ne sais quelle possibilité.

(Désolée d'être si vache)

Merci encore
PS C'est ma connexion qui est nulle ou ton code met du temps à charger ?
nan, c'est codepen qui a du mal avec les dataUri des images.

Attention tu confond mediaquerie (filtrage CSS de feuille de style) et jQuery qui est du javaScript.

Pour le svg il te faut d'abord dessiner une boite avec une taille respectant le ratio de ton image.<rect> par exemple.
Ensuite tu insert ton image dans une balise <pattern> que tu applique en tant que pattern à ta boite avec l'attribut fill (utilisable aussi depuis la feuille de style.

pour que ton SVG se redimensionne dans ta page web , il te faut utiliser l'attribut viewbox sur la balise racine (<svg>).

Pour les zones réactives , tu regarde du coté de <path> et <a> . tu as la balise <circle>.
Ce que tu veut faire peut-etre fait a la main , il ne s'agit que de boite carré , ou circulaire .
La pour le coup il te faut un tutoriel simplement rédiger. Si l'anglais ne te pose pas de probleme, celui-ci est pas trop mal pour une premiere approche ou aide mémoire. http://tutorials.jenkov.com/svg/index.html

Cdt,
Modifié par gc-nomade (12 Apr 2014 - 19:08)
scale() c'est du jQuery non ?

Pour le SVG j'ai commencé à regarder sur le sdz mais merci pour ce tuto en plus ^^ (et l'anglais faut s'y mettre alors) (et j'ai aussi des soucis avec... le css en feuille externe ne semble pas vouloir passer et en interne si je mets en toutes lettres une couleur ça le fait pas toujours :'( )

Si j'inclue une image qui n'est pas en format svg dans une boite svg (par pattern) comment ça va se passer si je redimensionne la boite (en %) ? L'image va s'adapter ? Je peux tester aussi...

C'est-peut-être que des formes simples, quand je dis que je suis nulle en dessin, ça inclue la géométrie ^^ (malgré une licence de maths en cours)

Merci encore
transform:scale(1); c'est du CSS3 , chez les vieux IE c'etait zoom:1;

Pour le SVG , sa particularité première est de ne pas perdre en qualité quelque soit sa taille , ceci n’empêchera pas ton image utilisée comme pattern de perdre elle en qualité sur un grand écran.
Comme dit dans ma dernière réponse, il te faut utiliser l'attribut viewbox sur la balise racine svg :
<svg viewbox="0 0 600 300">

tu as donc là un svg de 600px de largeur et 300px de hauteur à la base .
Si tu l'inclus dans ton document html5, et que dans le css , si tu fait : svg {width:1200}, il fera 600 de hauteur, son ratio sera préservé., idem avec un width:100% ou height:100%

++
Pourquoi ne pas faire plusieurs images au lieu d'une seule ? (une par type de poubelles)

Et hop, plus de soucis de map area, de mediaqueries, de jquery ou autre... Smiley murf
Modifié par Lothindil (14 Apr 2014 - 14:18)
Sujet clos
Aller à