5579 sujets

Sémantique web et HTML

Html @media only screen and (orientation:portrait) + JS

Bonjour,
voici l'adresse de l'appli pour smartphone android
https://puzzle972.alwaysdata.net/Vortex/index03.html
et l'adresse de l'appli originale
http://math.et.info.free.fr/JeuxJavaScript/Vortex/index.html
si le smartphone est en position verticale, en cliquant sur les boutons ronds, ou si l'on clique sur le bouton mélanger, tous les boutons ronds prennent une taille plus petite.
Pour comprendre le problème il est plus simple d'essayer l'adresse html sur smartphone.
Je pense que le Pb se joue entre le JS

function ajouterTDbouton(noeud, n) {
	var bouton, element;
	element = document.createElement("td");
	bouton = document.createElement("button");
	bouton.setAttribute("onmouseover", 'entrerBtn(' + n + ')');
	bouton.setAttribute("onmouseout", 'sortirBtn(' + n + ')');
	bouton.setAttribute("onclick", 'clicBtn(' + n + ')');
	bouton.className = "rot"; 
	bouton.innerHTML = '<img class="imgbtn" id="imgbtn' + numeroBouton[n] +' " src="img/btn' + numeroBouton[n] + '.gif">';
	element.appendChild(bouton);
	noeud.appendChild(element);
	dom_bouton[n] = bouton;
}


et le html:

@media only screen and (orientation:portrait){
		.imgbtn {width: 80px;}
		.piece {width: 150px; height : 150px; font-size: 100px; text-align: center;}
		h1 {font-size: 100px;}
		.btnJeu {font-size: 60px;}
		.btnAide {font-size: 60px;}
		.console {font-size: 60px;}
		fieldset {position: absolute; margin-top: 1200px; margin-left: 10px; font-size: 50px;}
		#btn0 {width: 60px;}
		#MixYesG {width: 70px;}
		#MixYesD {width: 70px;}
		#MixNoG {width: 70px;}
		#MixNoD {width: 70px;}
		#EyeClose {width: 80px;}
		#EyeOpen {width: 80px;}
		.piece { border-top: 12px #CCC solid; border-right: 12px #666 solid; border-bottom: 12px #333 solid; border-left: 12px #999 solid; }
	}


Par avance Merci de vos suggestions
Salut,

j'ai regarder vite fait le code , c'est pas là l'erreur.
C'est dans la fonction tourner que tu fais sauter la classe imgbtn:
Cela donne ça en le rajoutant : 
dom_bouton[n].innerHTML = '<img class="imgbtn" src="img/btn'  + numeroBouton[n] + '.gif">';

Modifié par Mathieuu (10 Apr 2025 - 11:57)
Modérateur
Philippe972 a écrit :
Merci de votre réponse

Pouvez vous préciser à quel endroit j'ajoute votre ligne de code ?


Bonjour, Il vous l'indique, dans votre fonction tourner :
//================== CONTROLES ==================
//================== clic ==================
function tourner(n) {
	var l, c, z;
	l = n < 2 ? 0 : 1;
	c = n === 0 || n === 2 ? 0 : 1;
	z = vortexNumero[l][c];
	vortexNumero[l][c] = vortexNumero[l][c + 1];
	vortexNumero[l][c + 1] = vortexNumero[l + 1][c + 1];
	vortexNumero[l + 1][c + 1] = vortexNumero[l + 1][c];
	vortexNumero[l + 1][c] = z;
	numeroBouton[n] = (numeroBouton[n] + 1) % 4;
	dom_bouton[n].innerHTML = '<img src="img/btn' + numeroBouton[n] + '.gif">';
}


L'image est incluse au bouton sans la class qui devrait la styler .
Meilleure solution
Bonjour et surtout un grand merci.

Je suis assez "scotché" qu'on puisse résoudre un problème si rapidement.

Je vous soupçonne d'avoir du talent dans le domaine concerné Smiley cligne

Merci enccore
Prévenir un modérateur
Répondre au sujet
Aller à