28172 sujets

CSS et mise en forme, CSS3

Possible sans js ?

Salut tout le monde ^^

Je suis entrain de monter un bout de mon site qui demande des effets lors que l'utilisateur passe la souris sur une image et j'aimerais savoir si c'est possible sans javascript.

Soit 8 images : 4 classes en 2 versions (1 petite et 1 grande).
Soit 4 descriptions : composé d'un <h1> et un <p>.

Chaque image correspond donc à un <h1> et un <p>.

Lors du chargement de la page, une classe précise est récupérer en php, celle choisi avant.
Seuls le <h1> et le <p> en rapport avec cette classe sont affichés. (les autres sont cachés par la propriété "display : none"). L'image de la classe est en grand modèle

On en arrive à un code source de ce type (classe 3 "chevalier" sélectionnée):

<h1 id='titre-1' class='h1_classe invisible'>Assassin</h1>
        <p class='desc-classe invisible' id='classe-1'>Tout en souplesse, l&#39;assassin est pass&eacute; ma&icirc;tre dans l&#39;art de tuer. Il compense sa faible r&eacute;sistance par une forte puissance de frappe. Il se bat avec des armes courtes : dagues, griffes ou gantelets.</p>
<h1 id='titre-2' class='h1_classe invisible'>Guerrier</h1>
        <p class='desc-classe invisible' id='classe-2'>&Eacute;quilibr&eacute;, le guerrier sait encaisser des coups autant qu&#39;en donner. Une r&eacute;sistance correcte cumul&eacute; avec une force plus que convenable. Ses armes sont les &eacute;p&eacute;es, les haches ou les marteaux.</p>
<h1 id='titre-3' class='h1_classe visible'>Chevalier</h1>
        <p class='desc-classe visible' id='classe-3'>Endurant, le templier subit les attaques plus qu&#39;il ne les donne. Une r&eacute;sistance hors du commun qu&#39;il paye avec des attaques lentes et moins puissantes que les autres. Il manie les armes longues : hallebarde, espadon et faux.</p>
<h1 id='titre-4' class='h1_classe invisible'>Rôdeur</h1>
        <p class='desc-classe invisible' id='classe-4'>Cach&eacute;, le r&ocirc;deur est un sniper. Il touche aux points faibles, infligeant de forts d&eacute;g&acirc;ts. Pour lui, il vaut mieux tuer avant que l&#39;adversaire frappe. Il utilise les armes de jet : shuriken, arc ou arbal&egrave;te.</p>
        <img src='images/classe/1-1.png' id='img-classe-1' class='img_class img_class_pt' />
        <img src='images/classe/2-1.png' id='img-classe-2' class='img_class img_class_pt'  />
        <img src='images/classe/3-2.png' id='img-classe-3' class='img_class img_class_gd'  />
        <img src='images/classe/4-1.png' id='img-classe-4' class='img_class img_class_pt'  />


J'aimerais qu'en passant la souris sur une des images en petit, celle en grand rétrécisse (passage de src images/classe/x-2.png à images/classe/x-1.png + changement de classe pour avoir l'image à la bonne taille), que celle sur le pointeur grandisse (changement inverse)

Et que le texte approprié apparaisse bien sûr.


Je sais faire tout ça en javascript, c'est pas trop le soucis ^^ mais je me demandais sur un cas pareil jusqu'où je peux aller en css... (possiblement avec changement de structure^^) Parce qu'à terme, j'aurais voulu un fondu pour l'augmentation et de la diminution de taille des images, hors je sais pas si c'est possible en js ça. Smiley rolleyes
Modifié par Lothindil (05 Mar 2013 - 13:15)
Bonjour,

La description de ce que tu souhaites faire est possible en CSS et une structure HTML mieux structuré, éventuellement en faisant usage d’élément de formulaire.

Ton code , tel quel, est pilotable par JS uniquement et plutôt incohérent:
il y a des titres et paragraphes,
puis des images derrière le dernier bloc titre/paragraphes.

La description des images n'est pas rattaché aux images, au pire tu pourrais ajouter l'attribut desc="#id de la description" sur les images.
Avec une structure plus cohérente (par exemple des bloc figure/figcaption) et une feuille de style avec une transition sur figure, figure.showViaPhp et figure:hover et une petite réflexion sur le poids des sélecteurs.

exemple dans le même esprit (mais different Smiley smile ) pour dire : no js Smiley smile :
http://dabblet.com/gist/4262212 (selectionne une galerie et survol une image. Il n'y a pas de js impliqué , sauf pour la gestion automatique des prefixes CSS.
++
rodolpheb a écrit :
La solution est simple mais avec les images en background.

Est-ce que c'est ce que tu souhaites?

Je ne peux pas les mettre en Background, parce qu'elles sont générés par le PHP (et que c'est casse-pied à mettre autrement^^)

Bah j'avoue que mon code html, il est pour l'instant fait pour être au plus simple pour donner mon visuel^^ après le html et le css, c'est pas ma tasse de thé, suis plutôt php et à la limite javascript Smiley lol .

http://yui-aventure.jeux-lothi.com/screen/inscription.jpg

Voilà à quoi je voudrais arriver.

Et pour l'instant, ça marche avec un css minimaliste :
p.desc_classe
{
	margin-top:0.3em;
	margin-bottom:0.3em;
	margin-left:10px;
	margin-right:10px;	
}
h1.h1_classe
{
	margin-top:0.4em;
	margin-bottom:0.4em;
	text-align:center;
	font-size:30px;	
	color:#3d2512;
}


Si j'intercale mes images sous les paragraphes, j'ai l'impression que ça va compliquer franchement mon travail pour positionner tous mes trucs. Smiley sweatdrop

Donc, même si la souris est hors d'une image, le texte doit rester afficher (changement uniquement sur OnMouseOver en js, pas sur OnMouseOut).
Modifié par Lothindil (05 Mar 2013 - 18:40)
Je n'ai pas besoin de gérer en-dessous de IE8 (part négligeable sur ma cible, par expérience).

Et le PHP est capital, c'est pour une inscription et donc pour mettre dans une base de données Smiley lol

Je vais tenter de retravailler déjà le html et le css pour l'affichage fixe ^^
Bon, j'ai retravaillé et tenté de faire le hover et ça plante sérieusement... Smiley sweatdrop 

<div id='page-2'>
      <div class='pres_classe' id='pres_classe_1'>
            <h1 class='h1_classes' id='h1_classe_1'>Assassin</h1>
            <p class='p_classes' id='p_classe_1'>Tout en souplesse, l&#39;assassin est pass&eacute; ma&icirc;tre dans l&#39;art de tuer. Il compense sa faible r&eacute;sistance par une forte puissance de frappe. Il se bat avec des armes courtes : dagues, griffes ou gantelets.</p>
            <img src='images/classe/1-2.png' class='img_classes' id='img_classe_1' />
      </div>
      <div class='pres_classe' id='pres_classe_2'>
            <h1 class='h1_classes' id='h1_classe_2'>Guerrier</h1>
            <p class='p_classes' id='p_classe_2'>&Eacute;quilibr&eacute;, le guerrier sait encaisser des coups autant qu&#39;en donner. Une r&eacute;sistance correcte cumul&eacute; avec une force plus que convenable. Ses armes sont les &eacute;p&eacute;es, les haches ou les marteaux.</p>
            <img src='images/classe/2-2.png' class='img_classes' id='img_classe_2' />
      </div>
      <div class='pres_classe' id='pres_classe_3'>
            <h1 class='h1_classes' id='h1_classe_3'>Chevalier</h1>
            <p class='p_classes' id='p_classe_3'>Endurant, le templier subit les attaques plus qu&#39;il ne les donne. Une r&eacute;sistance hors du commun qu&#39;il paye avec des attaques lentes et moins puissantes que les autres. Il manie les armes longues : hallebarde, espadon et faux.</p>
            <img src='images/classe/3-2.png' class='img_classes' id='img_classe_3' />
      </div>
      <div class='pres_classe' id='pres_classe_4'>
            <h1 class='h1_classes' id='h1_classe_4'>Rôdeur</h1>
            <p class='p_classes' id='p_classe_4'>Cach&eacute;, le r&ocirc;deur est un sniper. Il touche aux points faibles, infligeant de forts d&eacute;g&acirc;ts. Pour lui, il vaut mieux tuer avant que l&#39;adversaire frappe. Il utilise les armes de jet : shuriken, arc ou arbal&egrave;te.</p>
            <img src='images/classe/4-2.png' class='img_classes' id='img_classe_4' />
      </div>
</div>


Avec comme css :

p.p_classes
{
	margin-top:0.3em;
	margin-bottom:0.3em;
	margin-left:10px;
	margin-right:10px;
	display:none;	
}
h1.h1_classes
{
	margin-top:0.4em;
	margin-bottom:0.4em;
	text-align:center;
	font-size:30px;	
	color:#3d2512;
	display:none;
}
img.img_classes
{
	width:200px;
	height:250px;	
}
img#img_classe_1
{
	position:absolute;
	margin-top:200px;
	margin-left:34px;
}
img#img_classe_2
{
	position:absolute;
	margin-top:200px;
	margin-left:268px;
}
img#img_classe_3
{
	position:absolute;
	margin-top:200px;
	margin-left:502px;
}
img#img_classe_4
{
	position:absolute;
	margin-top:200px;
	margin-left:736px;
}
.pres_classe:hover h1
{
	display:block;
}
.pres_classe:hover p
{
	display:block;
}
.pres_classe:hover img
{
	width:290px;
	height:350px;
	margin-top:100px;
}


La div "page-2", est une div de taille fixe

Au "repos", le comportement est normal, j'ai mes 4 classes qui s'affichent et les textes absents. (bon j'aurais voulu que la classe choisie précédemment soit mis en évidence comme si elle était sous le coup du hover dès le départ, mais je sais pas si c'est faisable).

Par contre, au survol, c'est déplorable. Smiley sweatdrop

Sous opera (dernière version) :

- le texte apparaît bien en haut de ma div page-2
- les personnages s'agrandissent bien... mais vers le bas (hors, vu qu'avec les positions, ils sont contre la limite en bas, j'aimerais qu'ils s'agrandissent vers le haut, mais le margin-top fixé à 100px contre 200px ne sert à rien)
- les personnages sous le coup du hover ainsi que les suivant baissent, où ceux avant montent
Au repos
upload/32733-1.png
Premier passage sur une image
upload/32733-2.png
Après quelques passages entre chevalier (3ème image) et rôdeur (4ème image)
upload/32733-3.png


Sous firefox et chrome (dernière version)
Le seul soucis reste les images qui s'agrandissent vers le bas plutôt que vers le haut.
Modifié par Lothindil (07 Mar 2013 - 11:44)
Sujet clos
Aller à