28173 sujets

CSS et mise en forme, CSS3

[RÉSOLVÉ] Menu en CSS comme le jeu vidéo

Salut à tous !

Voilà j'aimerai faire une présentation de solution complète, avec comme sélection des personnages la même chose que le jeu vidéo (voir : http://fandeconsoles.free.fr/mk/index.html ).

Seulement voilà : j'aimerai appliquer cette image : http://fandeconsoles.free.fr/mk/images/select.gif et cette image : http://fandeconsoles.free.fr/mk/images/jc.gif au survol de la souris sur les cases des personnages. Et je n'y arrive pas.

Actuellement j'utilise des <map> et des <area>. J'ai essayé avec les <ul> et les <li> les <img /> dans les <a>... rien n'y fait. J'ai un peu réussi mais malheureusement, cette image clignotai sous IE.

Je ne souhaite pas utiliser de javascript car je ne connais pas du tout ce langage, je préfère le CSS, plus simple, utilisable par beaucoup de visiteurs...

Code HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
   <head>
       <title>Mortal Kombat</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	   <link rel="stylesheet" media="screen" type="text/css" title="Mortal Kombat" href="mk.css" />
	</head>
	<body>
		<div class="centrer">
			<img src="images/select.png" usemap="#selection" width="640" height="448" alt="Sélection" />
				<map name="selection">
					<area class="choix1" shape="rect" coords="48,96,143,207" alt="Johnny Cage" href="#" />
					<area class="choix1" shape="rect" coords="160,96,255,207" alt="Kano" href="#" />
					<area class="choix1" shape="rect" coords="160,223,255,335" alt="Rayden" href="#" />
					<area class="choix1" shape="rect" coords="272,224,367,335" alt="Liu Kang" href="#" />
					<area class="choix1" shape="rect" coords="384,224,479,335" alt="Scorpion" href="#" />
					<area class="choix1" shape="rect" coords="384,96,479,207" alt="Sub Zero" href="#" />
					<area class="choix1" shape="rect" coords="496,96,591,207" alt="Sonia" href="#" />
				</map>
		</div>
	</body>
</html>


Code CSS

img
{
border : none;
}

.centrer
{
text-align : center;
}

.choix1 area:hover
{
position : absolute;
z-index : 2;
background-image : url(images/select.gif);
background-repeat : no-repeat;
width : 112px;
height : 128px;
}



Pouvez-vous m'aider s'il vous plait ?


P.S. : le validateur CSS me met une erreur que je ne comprends pas. Smiley ohwell

[Edité : le lien n'était pas fonctionnel]
Modifié par Beulu2 (31 May 2007 - 21:05)
Bonjour,

Beulu2 a écrit :
Je ne souhaite pas utiliser de javascript

C'est pourtant ce qu'il faudrait ici. Les CSS ne sont pas fait pour l'interactivité, et détourner la pseudo-classe :hover dans ce but n'est pas une bonne idée.

Beulu2 a écrit :
car je ne connais pas du tout ce langage, je préfère le CSS, plus simple, utilisable par beaucoup de visiteurs...

La plus grande disponibilité des CSS pour les visiteurs par rapport à Javascript est à démontrer. De plus, il ne s'agit pas d'obtenir le rendu voulu chez 100% des utilisateurs (pour être clair : c'est strictement impossible, que l'on passe par Javascript ou par les CSS).

Non, le vrai argument dans ta phrase ci-dessus c'est : tu ne connais pas du tout Javascript. C'est là le fond du problème ; n'allons pas inventer de faux arguments (« CSS c'est plus compatible ») en plus pour se justifier. Smiley cligne

Donc, une bonne solution serait :
- menu en ul/li avec des images HTML (img + attribut alt), positionnées en absolu par rapport au ul positionné en relatif et portant l'image de fond ;
- ou bien, si on préfère : image map ;
- effet de rollover (changement de l'image survolée) en Javascript ;
- déclenchement d'un évènement extérieur à l'image également en Javascript.

Si Javascript est désactivé, les liens resteront fonctionnels, et seuls les effets décoratifs de survol manqueront, ce qui n'est pas bien gênant.

Ah oui, une dernière chose : modifier une image au survol, c'est le B.A.-BA de Javascript. Ça se trouve dans n'importe quel tutoriel qui traine. Smiley cligne
OK je te remercie pour ta réponse je vais voir ça.

Et ta remarque est désobligeante et pas du tout obligatoire concernant mon non-savoir. Je l'admets que je ne connais pas ce langage et ce qui suit c'est ce que je pense.

Merci déviter les jugements diffamatoires et trop hâtifs... de la part d'un modérateur c'est étonnant...
Beulu2 a écrit :
Et ta remarque est désobligeante et pas du tout obligatoire concernant mon non-savoir.

Oui, je viens de me rendre compte en relisant mon message (avant même de lire ta réponse) que ça pouvait être mal interprété.

Pour être clair : ce n'est absolument pas un tort de ne pas connaitre tel ou tel langage. Chacun fait les apprentissages qui lui semblent nécessaires (ou qui l'intéressent) en fonction de ses envies ou de ses besoins et objectifs. Moi-même, je ne connais presque rien à Javascript (je sais juste ce qu'on peut faire avec, mais je serais incapable d'écrire les codes correspondant à ce que j'expose dans mon message ci-dessus).

Le fond de mon propos est le suivant : si on ne connait pas Javascript et que l'on veut faire des effets qui, dans un site de qualité, devraient naturellement être réalisés en Javascript (plutôt qu'en CSS détournées), on a deux solutions :
- soit on apprend (les bases de) Javascript ;
- soit on ne souhaite pas le faire et on revient à des ambitions que couvrent les compétences que l'on a.

Détourner les CSS pour réaliser tel ou tel effet est effectivement possible techniquement, mais :
- ça sera difficile à mettre en place (problèmes de compatibilité) ;
- ça sera dommageable pour la qualité du site.


Désolé que mon précédent message ait porté à confusion. Je tâcherai d'être plus explicite. Smiley cligne

Bonne continuation. Smiley smile
Merci

Exuse-moi de m'être emporté. J'utilise le Javascript, en le comprenant un peu, mais c'est du copier coller :s (c'est pas le pied quoi)

Je vais bien devoir l'apprendre, mais je préfère me perfectioner d'abord dans le HTML / CSS

Bye !
Sujet clos
Aller à