begin process at 2012 05 29 00:08:26
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > Forum > 

Javascript / DHTML / Ajax

 > 

JavaScript et le navigateur

 > 

Autre

 > 

changer plusieurs styles dans une div en rollover

Derniers messages déposésPoser une question dans le forum ou lancer une discussion

changer plusieurs styles dans une div en rollover

vendredi 13 janvier 2012 à 11:56:44 | changer plusieurs styles dans une div en rollover

projer
bonjour, j'ai donc un petit problème sur lequel je bloque.

J'ai donc besoin de réaliser ceci :



vous aurez compris que ce sont des liens vers les derniers articles de blog publiés qui sont affichés ici et, quand on survole un de ses articles, le style doit changer.

Code HTML :
<div id="depeches">
	<img src="images/titre_depeches.jpg" alt="Les dernière dépêches" />
	<article>
		<h5>28-12-11</h5>
		<h4>Benoit Lambert sur France Inter</h4>
		<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
	</article>
	<article>
		<h5>28-12-11</h5>
		<h4>Benoit Lambert sur France Inter</h4>
		<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
	</article>
	<article>
		<h5>28-12-11</h5>
		<h4>Benoit Lambert sur France Inter</h4>
		<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
	</article>
</div>


j'ai bien réussi à changer le css de la balise <article> avec un hover mais ça change toutes les balises <article>, pas bon. Puis, le bg-color de la date doit changer aussi, autre problème. Je pense donc qu'il faut gérer ça avec du javascript en envoyant ou changeant un style à la balise survolée mais je bloque sur comment la cibler sans modifier les autres.

Si vous pouviez me guider là-dessus, ça m'aiderai beaucoup :)

Merci d'avance!

--------------------------------------------------------

http://www.projer.fr - dev web
http://www.lysdesign.fr - DA print / web - Illustratrice
vendredi 13 janvier 2012 à 12:21:15 | Re : changer plusieurs styles dans une div en rollover

kazma

Administrateur CodeS-SourceS
bonjour

normalement le hover doit marché si tu l'a assigné au div c'est normalement que sa change tout assigne une classe a chaque articles
vendredi 13 janvier 2012 à 13:58:45 | Re : changer plusieurs styles dans une div en rollover

projer
En fait je l'avais assigné à #id depeches, je l'ai modifié en l'affectant à article mais ça ne marche pas apparemment sur les balises article, je les ai changées par des div et du coup ça fonctionne pour le fond. Pas encore au point le HTML5...

Maintenant le problème est que ça ne me change ni la couleur du texte de la date et de sa couleur de fond (balise h5), comment changer le css du h5 au survol de la div principale?

Merci

--------------------------------------------------------

http://www.projer.fr - dev web
http://www.lysdesign.fr - DA print / web - Illustratrice
vendredi 13 janvier 2012 à 14:54:09 | Re : changer plusieurs styles dans une div en rollover

projer
J'ai essayé ceci :

<article onmouseover="mouseOver()" onmouseout="mouseOut()" >
...

Code Javascript :
<script type="text/javascript">
//rollover dépêches			
function mouseOver(){
	this.getElementsByTagName("h5").style="background-color: #f5131e; color: white;";
}
			
function mouseOut(){
	//alert("out");
}
</script>


mon problème est vraiment de savoir comment cibler la cellule h5...


--------------------------------------------------------

http://www.projer.fr - dev web
http://www.lysdesign.fr - DA print / web - Illustratrice
vendredi 13 janvier 2012 à 15:08:55 | Re : changer plusieurs styles dans une div en rollover

kazma

Administrateur CodeS-SourceS
Réponse acceptée !
il y a cette facon

Code HTML :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<style>
.oute {
background-color:red;
width:400px;
}

.ine{
background-color:blue;
width:400px;
}

.outeh5{
background-color:gray;
color:orange;
}

.ineh5{
background-color:yellow;
color:green;
}
</style>


<script type="text/javascript">

function changeclass(lui) {

var allElements = document.getElementById('depeches').getElementsByTagName('article');

for (var i = 0; i< allElements.length;i++){

if(allElements[i].className=='ine'){
allElements[i].className='oute';
allElements[i].getElementsByTagName('h5')[0].className='outeh5'
}
}
lui.className='ine'
lui.getElementsByTagName('h5')[0].className='ineh5'
} 

</script>
</head>
<body>

<div id="depeches">
	<img src="images/titre_depeches.jpg" alt="Les dernière dépêches" />
	<article class='oute' onmouseover='changeclass(this)'>
		<h5 class='outeh5'>28-12-11</h5>
		<h4>Benoit Lambert sur France Inter</h4>
		<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
	</article>
	<article class='oute' onmouseover='changeclass(this)'>
		<h5 class='outeh5'>28-12-11</h5>
		<h4>Benoit Lambert sur France Inter</h4>
		<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
	</article>
	<article class='oute' onmouseover='changeclass(this)'>
		<h5 class='outeh5'>28-12-11</h5>
		<h4>Benoit Lambert sur France Inter</h4>
		<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
	</article>
</div>
</body>
</html>
vendredi 13 janvier 2012 à 15:57:42 | Re : changer plusieurs styles dans une div en rollover

projer
Ok, merci beaucoup, je vois mieux comment on gère le ciblage maintenant!

Merci encore pour le temps passé pour me dépanner!


--------------------------------------------------------

http://www.projer.fr - dev web
http://www.lysdesign.fr - DA print / web - Illustratrice


Cette discussion est classée dans : changer, http, rollover, benoit, fr

Répondre à ce message

Sujets en rapport avec ce message

Ouvrir une pub+ changer de page [ par supergrey ] Salut, sur mon site pour l'instant j'ai sur une page un lien qui permet de changer de page ca c'est normale.Ce que je voudrais c'est remplacer ce lien Changer d'images sans actualiser [ par nico606 ] Slt, Voila je voudrais que quand je selectionne un champ dans un menu déroulant qu'une image aparaissent et que quand je change le champ l'image chang rollover lien [ par mathieumg ] Bonjour comment fait-ton pour que lorsque nous survolons un lien celui-ci change de couleur mais graduellement et lorsque onmouseout le même effet se Amélioration javascript : variable dans l'url [ par flocool ] Bonjour à toutes et tous, J'ai pu récupérer un petit script sur le net qui permet d'afficher des images successivement l'une à la place de l'autre. Le [Question] Comment changer depuis un formulaire déroulant un fond (*.PNG) dans une cellule ou un tableau ? [ par Kiscool94 ] Bonsoir ami(e)s programmeur , designers , et autres .Ma question est simple cependant j'ai jamais trouvé réponse à celle ci , dans la mesure du réalis name et id avec le javascript [ par winterboard ] JAI CHANGE UN NAME EN ID DANS MON SCRIPT BODY: <area alt="francais" coords Modification de script ?!! [ par DRAAK88 ] .............................................................................Bonjour, voila, j'ai voulu mettre ce scripte dans la partie HTML de mon s [HTML + Javascript ] Webapp pour Iphone/ipod Touch [ par Nico_35136 ] Bonjours tous le monde, Voila je souhaite réaliser une interface web sur mon iphone pour mon lapin nabaztag, je commence par la page qui permet au la div forcée à 100% [ par projer ] Bonjour, depuis hier j'essaye na vain de trouver une solution à mon problème de div qui ne veut pas se mettre à 100%. Je vous explique : j'ai juste 2 Api Youtube [ par Vagners ] Bonjour à tous Je ne sais pas si vous avez deja entendu parler de l' api youtube, mais je m'y suis penchant depuis quelques jours et rien à faire. J'


Nos sponsors


Sondage...

Comparez les prix


Samsung LE26B350 LCD
Entre 359€ et 417€

Visiter le guide achat

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

Photothèque

Photo Waterfall in Kauai Hawaii With RainbowPhoto Water in the Beginning of the Grand Canyon
Photo Children Camping at Night in a Tent 

Visiter la photothèque

A découvrir
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,343 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)