28172 sujets

CSS et mise en forme, CSS3

Lien hover sur une img + display block

Bonjour à tous !
Jusqu'a présent, je me suis toujours débrouillé à cherche une réponse à mes questions (le forum est une véritable mine d'or ! Smiley biggrin ) mais je dois avouer que sur ce soucis, je rame !

Je vous explique, je souhaiterais créer une zone en 2 parties :

- la première sera une img
- la deuxième sera un div en display block pour y stocké du contenu

Le but est d'englober ces 2 éléments dans un lien hypertexte et d'y rajouter un rollover qui changera le background-color du div lors du passage de la souris.

Voici mes débuts, mais je n'avance plus, je ne vois pas ou ca cloche.
Quelqu'un peut-il m'aider ?
Merci !

le .htm
<a href="#" onMouseOut="document.getElementById('info').className='info'" onMouseOver="document.getElementById('info').className='info2'">
<img class="screen" src="images/over.jpg">
<div id="info"></div>
</a>


le .css
#info {
display: block;
position: relative;
margin-left: 50px;
width: 425px;
height: 40px;
background: #FFFFFF; 
}

#info2 {
background: #000000; 
}

Modifié par Uggie (29 Sep 2009 - 11:00)
Bonjour,

Sans même regarder le JS, je vois un problème.

La balise <a> ne peut être parente de <div> (en plus un lien vide c'est mal). D'ailleurs il est tout à fait possible de mettre le code JS sur un div qui engloberait l'image et un ou plusieurs <p>aragraphes dans lesquels se trouverait le contenu textuel.

ps. : innutile de préciser display:block pour le div, c'est son état normal.
Uggie a écrit :
je ne vois pas ou ca cloche

Ça (avec une cédille) cloche par là:
document.getElementById('info').className='info';
...
document.getElementById('info').className='info2';

Au survol ou à la fin du survol, tu remplaces la classe courante de l'élément (vide au départ) par "info" ou "info2". En CSS, tu utilises le sélecteur #info2, qui vise l'élément portant l'identifiant "info2". Classe (class) et identifiant (id), ça n'est pas la même chose. Donc ça ne marche pas.

Tu pourrais modifier ton code JavaScript pour utiliser "style1" et "style2" comme noms de classe (pour ne pas faire de confusion avec l'identifiant "info"), et en CSS:
#info {...}
#info.style1 {...}
#info.style2 {...}

Ceci dit, l'utilisation de JavaScript me semble être peu utile ici, vu que CSS propose la pseudo-classe :hover pour gérer les styles au survol.
Ce qui pourrait donner ca ?

.htm :

<div id="blocfolio" onMouseOut="document.getElementById('info').className='info'" onMouseOver="document.getElementById('info').className='info2'">
	<img class="screen" src="images/screen01.jpg">
	<div id="info"></div>
	
</div>


.css :

#blocfolio {
display: block;
float: left;
margin-left: 50px;
position: relative;
width: 300px;
}

#info {
display: block;
position: relative;
width: 100%;
height: 40px;
background: #FFFFFF; 
}

#info2 {
background: #000000; 
}

img.screen {
display: block;
border: 0px;
}



Bon la ca donne rien, j'ai pas encore trop cherché.
Je préfère précisé, du moins j'ai pas encore choper les nouvelles habitudes, je me suis remis à la prog y a 15j, je ne connaissais que le html 4 et ses jolis tableaux ! Smiley lol
Modifié par Uggie (29 Sep 2009 - 11:35)
J'utilise js pour la compatibilité ie, j'ai appris que le hover css que fonctionne avec ie que dans le cas des hyperliens, c'est juste ?
Bon on avance mon code fonctionne pour le moment sur firefox, mais pas sur ie.
voici le script :

.htm

<div id="blocfolio" onMouseOut="document.getElementById('info').className='style1'" onMouseOver="document.getElementById('info').className='style2'">
	<a href="#"><img class="screen" src="images/screen01.jpg">
	<div id="info"></div></a>
	
</div>


le .css
#blocfolio {
display: block;
float: left;
margin-left: 50px;
position: relative;
width: 300px;
}

#info {
display: block;
position: relative;
width: 100%;
height: 40px;
background: #FFFFFF;
}

#info.style1 {
background: #FFFFFF; 
}

#info.style2 {
background: #000000; 
}

img.screen {
display: block;
border: 0px;
}


a écrit :
La balise <a> ne peut être parente de <div>

Donc c'est uniquement le cas pour ie ?

Petite précision, quand je clique sur le lien sans relâcher, j'ai un petit pixel rouge au dessus, c'est pas grand chose, mais jsuis perfectionniste ! ^^

Jvais essayé de retranscrire ca en css mais comment donner l'ordre de modifier le style du div contenu en survollant son parent ?
Modifié par Uggie (29 Sep 2009 - 11:55)
De nouveaux problèmes apparaissant, qu'est ce que j'adore ca !
Je vous explique, je veux bien évidemment pouvoir ajouter plusieurs de ces "liens" dans ma page. Par logique, si je copie-colle 2 fois le code du .htm, jvais me retrouver avec 2 liens et se retrouverons en conflit...
Savez vous parez ca sans utiliser le js et sans ajouter des classes pour chaque lien ce qui me parait contraignant et pas vraiment optimisé ?
Modifié par Uggie (29 Sep 2009 - 11:55)
Bonsoir,

tu ne pourras pas te passer de javascript .

En gros tu veux rendre un (1)div cliquable , et (2)changer la couleur de fond du div enfant .

1) evenement on click a gerer via js car pas prevue en html ou xhtml . (html 5 faut voir ce que ça donne en final cette histoire , l'attribut href serait utilisable ?)

2) evenement onmouseover . parcours du dom pour cibler et modifier un enfant. (pour etre compatible avec IE 6 , autrement , les selecteur CSS et le pseudo "hover" font l'affaire.

test :
<!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>
<title>XHTML 1.0 Strict</title>
<style type='text/css'>
#hoverclick div {cursor:pointer;border:double;margin:2em;background:#d8e9ec;}
#hoverclick div a {}
#hoverclick div div {background:blue}
#hoverclick div div:hover {background:red}
</style>

<script type="text/javascript" />



	divhoverclick = function() {
		if (document && document.getElementById) 
	{
		div = document.getElementById("hoverclick");
		for (i=0; i<div.childNodes.length; i++) 
		{
			node = div.childNodes[i];
			if (node.nodeName=="DIV") 
				{
					node.onclick=function() 
					{
						window.open(this.title);
  					}
					
					
					for (ii=0; ii<node.childNodes.length; ii++) 
					node2=node.childNodes[ii];
					if (node2.nodeName=="DIV")  
						{
						
						
			  					node2.onmouseout=function() 
							{
		  					this.style.background="blue";
		   					}					
							node2.onmouseover=function() 
							{
		  					this.style.background="red";
		   					}				
				
						}

   				}
  		}
 	}
}

window.onload=divhoverclick;



</script>
</head>
<body>
<div id="hoverclick">
<div title="http://forum.alsacreations.com/topic-4-44346-1-Lien-hover-sur-une-img--display-block.html" >
	<a href="http://forum.alsacreations.com/topic-4-44346-1-Lien-hover-sur-une-img--display-block.html">Lien pour le rendre réel quelquepart </a>
	<img  src="http://www.alsacreations.com/css/img/logo-alsacreations.png" />
	<div> blabla </div>
	</div>
	<div title="http://forum.alsacreations.com/topic-4-44346-1-Lien-hover-sur-une-img--display-block.html" >
	<a href="http://forum.alsacreations.com/topic-4-44346-1-Lien-hover-sur-une-img--display-block.html">Lien pour le rendre réel quelquepart </a>
	<img  src="http://www.alsacreations.com/css/img/logo-alsacreations.png" />
	<div> blabla </div>
	</div>
	</div>
	</body>
</html>


demo : http://gcyrillus.free.fr/essai/div-clikable-v2.html
(js inspiré des tutos de selhtml.org http://fr.selfhtml.org/javascript/index.htm )

et eventuellement un vieux test assez mal foutu pour la curiosité : http://gcyrillus.free.fr/trucs_css/clique-le-div.html[/i]
Sujet clos
Aller à