Est-ce possible en CSS ?

[Savagnin]

Bonsoir à tous...
Alors voilà, je me familiarise donc avec les CSS, j'ai déja pas mal avancé mais je me heurte à un problème...
Par exemple, prenons l'exemple ci-dessous : y'a t'il moyen que, quand on survole le lien "Présentation" et l'image dans le cercle, le grand texte en latin puisse changer ? C'est possible ça ?
D'avance merci.

 

[Niconemo]

Oui. Il y a même plusieurs méthodes.

Puisque c'est un lien, il suffit d'utiliser le pseudo format :hover (survol)
L'image doit être une image d'arrière plan (background-image).
Et la 2e image est définie dans le :hover

en fait, dans ton cas il suffit de considérer que c'est un simple bouton CSS, sauf que l'image est décentrées par rapport au texte

 

[Savagnin]

Aaah, euhhhh, ouiiiiiiiiiiiiiii
Bon c'est possible, c'est déja ça, maintenant, faut que je comprenne...
MERCI déja de ta réponse

Pour le moment, dans les CSS concernées, j'ai mis ça : (ATTENTION, j'ai dit que je commençais )
.presentation
{
width: 120px; height: 30px; position: absolute; margin-left: 625px; margin-top: 510px; font-family: Geneva, Arial, Helvetica; font-size: 0.8em; text-decoration: none; text-align: left; color: white;
}
.presentation:hover
{
color: yellow;
}
.intro /*le texte en latin */
{
width: 382px; height: 274px; position: absolute; margin-left: 181px; margin-top: 159px; font-family: Geneva, Arial, Helvetica; font-size: 0.8em; line-height: 17px; text-align: justify; color: white;
}

Pis en xhtml, j'ai mis ça :
<a class="presentation" href="PAGES/presentation.htm">Présentation</a>
<p class="intro"><em><strong>Umpteen extremely putrid sheep laughed. Santa Claus bought the dwarf, although Dan perused umpteen sheep.
Minnesota telephoned two tickets. One progressive trailer gossips.</strong></em><br/>
<br/>
<em>Sheep perused five wart hogs, but Jabberwockies very comfortably tickled five botulisms. Two Klingons cleverly perused the schizophrenic pawnbrokers. One obese orifice sacrificed the purple subways, even though one slightly speedy wart hog annoyingly kisses five very obese dogs, then fountains telephoned umpteen irascible Klingons.<br/>
<br/>
Two angst-ridden dwarves tickled the bureaux. Umpteen obese wart hogs telephoned one putrid poison. Two cats easily abused almost quixotic wart hogs, but the chrysanthemum telephoned one lampstand.</em></p>

Mon lien "Présentation" devient jaune quand je le survole, bien... mais c'est dans quelle CSS (...et avec quelles infos...) que je dois dire "quand tu survoles le mot présentation, le texte de l'intro doit devenir un autre texte ?"... Dans ".presentation:hover" ? Dans une autre ????

Merci et à plus tard !

 

[Captain_X]

c'est plus compliqué que ca tu dois dire au block de disparaitre et à l'autre d'apparaitre. tout en CSs j'ai peur que t'ai des problèmes avec certains navigateurs... voir même de te faire carrément chier avec pas grand chose... il faut lié tout ca à un petit javascript

 

[Savagnin]

SUPER !
Ca fait une semaine que je me démène avec le xhtml et les CSS, il va falloir en plus se mettre au Javascript...

 

[momo-fr]

Alsacréations est ta bible, la solutions est chez-eux (entre autre)...

 

[da capo]

Ca doit être possible avec un span dans a:hover.
a:hover sera compris par tous les navigateurs même IE.

Après, ce sera un jeu de placement des éléments... pas forcément facile mais faisable.

En suivant les conseils de Nephou, j'avais pu écrire un feuille de style visible ici : http://adriano.fiorucci.free.fr/ch2_test/chstyle.css
La partie intéressante est la dernière qui concernne la classe .vignette et ses déclinaisons.

 

[Savagnin]

Alsacréations est ta bible, la solutions est chez-eux (entre autre)...

Ah bon ? Je suis allé voir, mais j'ai pas trouvé !
Alors, j'y retournerai !

 

[Savagnin]

Ca doit être possible avec un span dans a:hover.
a:hover sera compris par tous les navigateurs même IE.

Après, ce sera un jeu de placement des éléments... pas forcément facile mais faisable.

En suivant les conseils de Nephou, j'avais pu écrire un feuille de style visible ici : http://adriano.fiorucci.free.fr/ch2_test/chstyle.css
La partie intéressante est la dernière qui concernne la classe .vignette et ses déclinaisons.

Ouille ouille ouille... Je regarderai ça demain !

 

[heliotrope]

slt,

tu peux egalement aller sur www.alistapart.com www.cssbeauty.com

on y trouve de nombreueses ressources

 

[canibal]

Le code javascript

<script language="javascript">

function modif() {

var diven = document.getElementById('en');
var divfr = document.getElementById('fr');
​

var displayen = diven.style.display ? '' : 'none';
var displayfr = divfr.style.display ? '' : 'none';

diven.style.display = displayen;
divfr.style.display = displayfr;
​

}
​

</script>


Le code HTML :

<body>

<div class="Contenu_contenu" id="en" style="display:none;" >

<h2>Welcome</h2>
​

<p>Text 1 blablabla </p>
​

</div>

<div class="Contenu_contenu" id="fr" >

<h2>Bienvenue</h2>
​

<p>Texte 2 bliblibli </p>
​

</div>

<div class="image" alt="quelle belle image" onmouseover="modif()" onmouseout="modif()" />


</body>

Voilà msieur amusez vous bien ... pff je sais vraiment plus quoi faire de mes nuits moi c'est grave

 

[canibal]

Bon pour ajouter mon grain de sel, humf, j'ai rien a faire cette nuit j'suis en stage, je te dirais pour les sites :

http://dynamicdrive.com/
http://cssdrive.com/

etc...

en fait dès que tu cherches quelquechose tu mets drive a la fin, tu rajoute le .com qui va bien et tu devrais le trouver...
Mais qui a dit que c'était compliqué le web ??

Allez je vais me coucher moi, j'ai fait ma BA

 

[Savagnin]

MERCI BEAUCOUP BEAUCOUP à vous tous pour ces infos...
Je risque de pas beaucoup avoir le temps aujourd'hui de me pencher sur la question... ça sera plutôt demain... A suivre donc (parce qu'à mon avis, j'ai pas fini de cogiter )

 

[Niconemo]

Franchement je ne vois pas pourquoi utiliser du javascript pour un truc aussi simpe à faire en CSS qu'un simple survol... où alors je n'ai pas bien lu la demande.

J'essaie de repasser plus tard si je peux.

 

[Savagnin]

Dakodak !
(...vu que pour le moment, je suis dans les CSS, chaque problème en chose en son temps !)
En fait mon souçi c'est surtout quelle "commande" et dans quelle CSS... (suis-je clair )

 

[Captain_X]

la fonction de canibal est la plus simple et la plus rapide ... car ce n'est pas qu'une bête survol

 

[Niconemo]

OK. J'avais lu trop vite en effet. Au temps pour moi.

Cela dit, je pense que c'est quand-même possible en CSS avec la propriété display associée à :hover. Mais après voir quelle méthode est la plus appropriée ça dépends de la structure du site.

Mais pour ce genre de chose le javascrit est courant et bien géré par les navigateurs.

 

[Savagnin]

Mais pour ce genre de chose le javascrit est courant et bien géré par les navigateurs.

...pour le moment, c'est par moi qu'il est pas bien géré ! ...mais on va s'y mettre !

 

[Niconemo]

Oui. à bien y réfléchir en CSS, si c'est possible, ça fait faire une feuille de style très compliquée et plein de divs imbriquées et des bidouillages limite catholiques pour déboguer... Donc c'est bien une méthode avec JS qui sera le plus léger.

 

[momo-fr]

Oui...