[résolu]Modifier un div par rollover d'un autre div

Question

Jango51

7 Jun 2007 à 16:17

bonjour a tous ,

désolé pour le titre un peu complexe ^^

voila mon probleme :

je doit créer un bouton (skiné , pas le vieu bouton de formulaire) qui doit etre extensible selon la longueur du texte du lien , et qui doit , bien sur , changer d'apparence au survol .

jai procédé comme ceci :


<div id="conteneur">
     <div id="partie1">le texte du lien</div>    
     /* ( le dixv extensible avec un background en repeat-x)*/
     <div id="partie2></div>
      /* (la fin du bouton qui elle n'est pas extensible)*/
</div>

l'idée etant au survol du div conteneur , de modifié le background de la partie1 , ET , de la partie2 en meme temp .

et ca , je ne sais pas comment faire .

auriez vous , Ooo Noble CSSiens une solution , une piste , ou une alternative a me proposer ?

merci d'avance pour vos réponses
Modifié par Jango51 (11 Jun 2007 - 08:35)

Syl

7 Jun 2007 à 18:14

L'idée qui me vient tout de suite à l'esprit c'est d'utiliser du javascript au lieu d'un seul css pur. Tu auras alors sans doute le moyen de mofifier les prorpiétés de deux div après une seule action. Il me semble qu'il faille utiliser des getElementById, et modifier les styles background des éléments partie1 et partie2. Javascript gérera donc toute ta partie actions, et css s'occupera de l'extensibilité de ton "bouton".

Je suis pas sûr de ce que je dis mais c'est ce que j'aurais fait en premier Smiley cligne

Thomas D.

7 Jun 2007 à 18:19

Salut,

Syl a écrit :
L'idée qui me vient tout de suite à l'esprit c'est d'utiliser du javascript au lieu d'un seul css pur. Tu auras alors sans doute le moyen de mofifier les prorpiétés de deux div après une seule action. Il me semble qu'il faille utiliser des getElementById, et modifier les styles background des éléments partie1 et partie2. Javascript gérera donc toute ta partie actions, et css s'occupera de l'extensibilité de ton "bouton".

Je suis pas sûr de ce que je dis mais c'est ce que j'aurais fait en premier

+1, javascript est fait pour créér ce genre d'interactions, contrairement aux CSS.

Déplacé dans le salon JS Smiley cligne

koala64

Modérateur

7 Jun 2007 à 21:06

Salut,

Je ne sais pas si ça colle exactement avec ce que tu veux mais bon, je tente Smiley murf

:

<!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" lang="fr">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
		<title>Exemple</title>
		<style type="text/css"><!--

@media screen, projection
{
	a
	{
		background-color: red;
		padding: 0.5em;
		text-decoration: none;
		color: blue;
	}
	span
	{
		background-color: red;
		padding: 0 1em;
		margin: 0 .5em;
	}
	.class1
	{
		color: yellow;
		background-color: green;
	}
	.class2
	{
		background-color: blue;
	}
}

		--></style>
		<!--[if IE]><style type="text/css">

@media screen
{
	a, span
	{
		display: inline-block;
	}
}

		</style><![ endif]-->
		<script type="text/javascript"><!--

if(!window.oO)
{
	var oO =
	{
		'CSS1': 'class1',
		'CSS2': 'class2',
		'EVENTS': ['mouseover', 'mouseout', 'focus', 'blur'],

		connect: function(oElem, sEvType, fn, bCapture)
		{
			return document.addEventListener ?
				oElem.addEventListener(sEvType, fn, bCapture):
				oElem.attachEvent ?
					oElem.attachEvent('on' + sEvType, fn):
					false;
		},

		init: function()
		{
			var oCont,
			    oA,
			    oSpan,
			    iI,
			    iCount;
		
			oCont = document.getElementById('conteneur');
			oA = oCont.getElementsByTagName('a')[0];
			oSpan = oCont.getElementsByTagName('span')[0];
			iI = 0;
			iCount = oO['EVENTS'].length;
		
			for(; iI < iCount; iI++)
				oO.connect(
					oA,
					oO['EVENTS'][iI],
					function()
					{
						oO.change(
							oA, oO['CSS1'],
							oSpan, oO['CSS2']
						);
					},
					false
				);
		},
	
		change: function()
		{
			var aArg,
			    iI,
			    iCount;

			aArg = arguments;
			iI = 1;
			iCount = aArg.length;
		
			for(; iI < iCount; iI++)
				if(iI % 2 != 0)
					aArg[iI - 1].className =
						(aArg[iI - 1].className === aArg[iI]) ?
							'':
							aArg[iI];
		}
	};

	oO.connect(window, 'load', oO.init, false);

}

		//--></script>
	</head>
	<body>

<p id="conteneur">
	<a href="index.htm">
		le texte du lien
		<span></span>
	</a>
</p>

	</body>
</html>

PS : Attention à l'espace que j'ai rajouté sur le endif du commentaire conditionnel... Je l'ai mis pour rendre le code lisible sur le forum mais faut l'enlever pour tester. Smiley cligne

voir l'exemple en ligne.

Je repasse pour les explications parce que là, je suis pressé... Smiley langue

koala64

Modérateur

7 Jun 2007 à 22:37

Pour commencer, le xhtml :

Les div semblent inadaptées à ce que tu demandes. Pour avoir un bouton qui s'agrandit avec les écritures, un élément de type inline est plus adapté. Par ailleurs, il te faut un élément focusable de manière à conserver la navigation clavier donc un vrai lien est bienvenu. On inclut un autre élément de type inline au sein même du lien afin d'être en mesure d'avoir un vrai bouton puis on regroupe le tout dans un élément p parce que plus adapté qu'une div... à priori.

Pour le js :

On a ici un objet comportant trois propriétés et trois méthodes. Parmi les propriétés, il y a les deux classes CSS qu'on va affecter au survol (ou à la prise de focus) ainsi qu'un tableau d'événements (souris + clavier)

La méthode oO.connect permet d'affecter une méthode lorsqu'un de ces événements intervient.

On y met :
1er argument : l'objet traité
2ème argument : l'événement traité
3ème argument : la méthode à attacher
4ème argument : le mode de propagation (false = bouillonnement / true = capture -> IE ne comprend que le bouillonnement donc c'est adapté à la plupart des cas)

La méthode oO.init va sélectionner tous les éléments dont tu as besoin et affecter le comportement via la méthode oO.change pour chacun des événements.
Pour la sélection, on passe par les méthodes getElementById et getElementsByTagName.
Ensuite, on fait une boucle sur le tableau d'événements et on branche la méthode oO.change pour chacun d'entre eux.

La méthode oO.change a un nombre illimité d'arguments qui fonctionnent par paire. Le premier argument est un élément, le second la classe CSS qu'on souhaite lui associer et ainsi de suite...

Au sein de cette méthode, on parcourt le tableau d'arguments à travers une boucle dans laquelle on dit que si l'argument est impair (classe CSS), on l'affecte via la propriété className à l'argument précédent (élément associé) si la classe ne s'y trouve pas déjà sinon on la supprime.

Pour les styles, rien de spécial mis à part le display: inline-block; placé en commentaires conditionnel pour qu'IE interprète la même chose que les autres.
Modifié par koala64 (07 Jun 2007 - 22:45)

chmel

8 Jun 2007 à 00:42

Bonjour,
Toujours super tes explications Koala.
Pour le lien, je suis d'accord, c'est indispensable, et du fait le CSS suffit :


<!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" lang="fr">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
		<title>Exemple</title>
		<style type="text/css"><!--

@media screen, projection
{
	a
	{
		background-color: red;
		padding: 0.5em;
		text-decoration: none;
		color: blue;
	}
	span
	{
		background-color: red;
		padding: 0 1em;
		margin: 0 .5em;
	}
	a:hover,a:focus
	{
		color: yellow;
		background-color: green;
	}
	a:hover span,a:focus span
	{
		background-color: blue;
	}
}

		--></style>
		<!--[if IE]><style type="text/css">

@media screen
{
	a, span
	{
		display: inline-block;
	}
 /* fait office de focus */
	a:active
	{
		color: yellow;
		background-color: green;
	}
	a:active span
	{
		background-color: blue;
	}
}

		</style><![endif ]-->
	</head>
	<body>

<p id="conteneur">
	<a href="index.htm">
		le texte du lien
		<span></span>
	</a>
</p>

	</body>
</html>

J'ai juste remplacé les lignes .class1 et .class2 et supprimé la partie js.
J'ai aussi ajouté les lignes a:active pour le focus ie.
Au fait, en mettant le blanc après endif, le code et le forum fonctionnent Smiley cligne

Modifié par chmel (08 Jun 2007 - 00:46)

koala64

Modérateur

8 Jun 2007 à 06:34

Salut,

oui exact. C'est d'ailleurs très bien que tu soulèves ce point parce que c'est une bonne illustration du pourquoi je fais mes rollovers... en js. Smiley ravi

On est bien d'accord sur le fait que pour ce cas précis, css peut suffire donc si Jango51 n'a pas besoin de particuliers, ce que tu as fait convient bien. Smiley cligne

Néanmoins, les possibilités ne sont pas les mêmes. Lorsqu'on laisse chacun a sa tache (js pour le comportement et css pour la mise en page), on peut instaurer un mouvement en plus du changement d'état, faire changer la couleur et/ou l'opacité progressivement, agir sur 10 éléments répartis partout sur la page, etc... etc... tout en codant de manière propre (sans recourir à des bidouilles plus ou moins accessibles).

Pour être plus clair, je ferais le parallèle entre un hover (focus, active) css et de la mise en page qu'on ferait via html. En général, c'est faisable mais les possibilités sont moins étendues et pour des cas complexes, on en arrive vite à faire n'importe quoi.

On pourrait dire :
"oui mais si on peut faire sans js, pourquoi s'embêter avec js ?"

Toujours avec ce parallèle, je pose la question :
"si on peut faire la mise en page en html, pourquoi s'embêter avec css ?"

Comme je ne sais pas quels souhaits j'aurais demain mais que je veux me laisser de la marge et rendre mon application portable, mon choix est tout fait. Smiley smile

Jango51

11 Jun 2007 à 08:34

c'est exactement ce que je recherchais , merci a vous pour vos réponses ^^

Sujet clos