JeuWeb - Crée ton jeu par navigateur
[HTML] Texte + icone : quel code ? - Version imprimable

+- JeuWeb - Crée ton jeu par navigateur (https://jeuweb.org)
+-- Forum : Discussions, Aide, Ressources... (https://jeuweb.org/forumdisplay.php?fid=38)
+--- Forum : Programmation, infrastructure (https://jeuweb.org/forumdisplay.php?fid=51)
+--- Sujet : [HTML] Texte + icone : quel code ? (/showthread.php?tid=6161)

[HTML] Texte + icone : quel code ? - Ter Rowan - 30-05-2012

coucou

je me demandais quel serait la structure idéale du DOM à mettre en place pour le cas suivant :

j'ai un menu constitué de textes et d’icônes (une ligne = 1 texte + 1 icône)
je souhaite pouvoir, par javascript cacher ou faire apparaitre le texte, mais toujours garder l'icône

Avec mes connaissances je ferais ainsi (remarquez que le texte affiché correspond au texte du title on a donc uniquement un texte et une ressource image) :


<ul>

	<li>

		<a href="#">

			<div class="text">mon texte 1</div> 

			<img title ="mon texte 1" src ="mon icone 1.jpg"/>

		</a>

	</li>

	<li>

		<a href="#">

			<div class="text">mon texte 2</div> 

			<img title ="mon texte 2" src ="mon icone 2.jpg"/>

		</a>

	</li>	

	(...)

	<li>

		<a href="#">

			<div class="text">mon texte n</div> 

			<img title ="mon texte n" src ="mon icone n.jpg"/>

		</a>

	</li>		

</ul>
et le javascript qui "toggle" la class "text"

maintenant je me suis aperçu avec le post sur le css 3D que j'étais complètement à côté de la plaque sur certaines fonctionnalités

du coup, est ce que vous pensez à une meilleure organisation du code ? (des propriétés que je ne connais pas sur l'image, et avec du css on l'associe, etc..)

RE: [HTML]texte + icone : quel code ? - Myrina - 30-05-2012

Tu peux gérer l'affichage du texte en CSS grâce à la propriété content.



img.text:before

{

content: attr(title) " ";

}

et te ne répètes pas ainsi le contenu du texte:


		<a href="#">

			<img class="text" title ="mon texte 1" src ="mon icone 1.jpg"/>

		</a>

et en javascript tu gères juste l'ajout ou le retrait de la class text pour l'image (JQuery: addclass & removeclass)

RE: [HTML]texte + icone : quel code ? - srm - 30-05-2012

La propriété content et before qui ne marche pas sur tous les navigateurs, n'oublions pas de le préciser Wink

RE: [HTML]texte + icone : quel code ? - Myrina - 30-05-2012

(30-05-2012, 11:45 AM)oxman a écrit : La propriété content et before qui ne marche pas sur tous les navigateurs, n'oublions pas de le préciser Wink
A modérer.

Sur W3Schools:
-content
Citation :The content property is supported in all major browsers.

Note: IE8 only supports the content property if a !DOCTYPE is specified.
-before
Citation :The :before selector is supported in all major browsers.

Note: For :before to work in IE8, a <!DOCTYPE> must be declared.

Les deux sont de la norme CSS2 et les navigateurs n'implémentant pas cette norme ne sont pas légions.

RE: [HTML]texte + icone : quel code ? - Murthy - 30-05-2012

Je rejoins Oxman : http://msdn.microsoft.com/fr-fr/library/cc351024%28v=vs.85%29.aspx

Faut faire gaffe aux pseudo-classes, pseudo-éléments et les nouveautés CSS3 aussi...

RE: [HTML]texte + icone : quel code ? - t.bodeux - 30-05-2012

Heuuuu j'ai pas envie de faire chier mais s'emmerder a ne pas utiliser les pseudo-classes CSS3 et autres nouvelles fonctionnalités est stupide. C'est comme vouloir absolument garder une route pavée sur une autoroute afin que les charrettes puissent être tirées de manière optimale par des chevaux à la place de rouler en voiture.

RE: [HTML]texte + icone : quel code ? - niahoo - 30-05-2012

alors là faut que tu m'expliques pour les charettes car je vois pas pourquoi elles seraient favorisées par une route pas plate !

RE: [HTML]texte + icone : quel code ? - t.bodeux - 31-05-2012

L'accroche des sabots en montée lors des temps limites (pluie, neige) haha Big Grin
Ici la charrette serait IE et les temps limites serait le CSS3 et les nouveaux médias...
Mais bon, on s'est compris Wink

Je pense qu'un moment, il faut se concentrer sur l'essentiel et, actuellement, l'essentiel c'est d'apporter une compatibilité pour IE9 et encore c'est parfois mitigé dans les grosse entreprises. Je peux le dire car j'ai fait un stage dans une grosse boite de NY.

En gros les propriétés telles que :before, :after, :first-child, :nth-child(xn), etc ... permettent d'alléger fortement la navigation d'un site en général. Dans le cadre d'un jeu, il faut savoir qui on veut cibler et il faut savoir si l'on veut un jeu fluide et esthétique plutôt qu'un jeu lourd et bourré de Hack CSS&JS.

Sachant que la plupart des hacks CSS sont pour IE qui prend un malin plaisir à ne pas avancer --'