Image différente au survol de la souris

[Résolu/Fermé]
Signaler
Messages postés
7
Date d'inscription
vendredi 3 décembre 2010
Statut
Membre
Dernière intervention
4 décembre 2010
-
Messages postés
7
Date d'inscription
vendredi 3 décembre 2010
Statut
Membre
Dernière intervention
4 décembre 2010
-
Bonjour,

Je suis en train de peaufiner les détails sur mon site internet et j'aimerais que les images dans mon menu dépliant sur-brille motorisé par "Jquery".

Je sais qu'il existe deux solution :

-Celle ou il y à deux images, l'une doit remplacer l'autre au survol de la souris
-Et la deuxième est qu'il n'y est qu'une seul image mais que cette image soit plus grand au niveau de la hauteur.



Se que je souhaite, c'est intégrer l'une des deux solution dans ce code :

////////////Code HTML////////////

<div class='bouton-menu1'></div>
<div class='menu1'>   
	<div class='onglet'><a href='#'>Onglet1</a></div>
	<div class='onglet'><a href='#'>Onglet2</a></div>
	<div class='onglet'><a href='#'>Onglet3</a></div>
</div>
<div class='bouton-menu2'></div>
<div class='menu2'>   
	<div class='onglet'><a href='#'>Onglet1</a></div>
	<div class='onglet'><a href='#'>Onglet2</a></div>
	<div class='onglet'><a href='#'>Onglet3</a></div>
</div>

Etc ... jusqu'à "menu5"

////////////Code HTML////////////

////////////Code Css////////////

.bouton-menu1{
background:url(images/bouton-menu1.jpg) no-repeat;
height:32px;
}
.menu1{
background:url(images/menu1.jpg) repeat-y;
}

Etc ... jusqu'à "menu5"

////////////Code Css////////////

////////////Code java////////////

<script type='text/javascript'>
$(document).ready(function () {

	$('div.menu1').show();"; //Le menu1 est affiché à l'arrivé sur la page

	$('div.menu1').addClass('alt');
	$('bouton-menu1').click(function ()
	{
		$('div.menu1').slideToggle('medium');

		// Si le sous-menu était déjà ouvert, on le referme : 

			if ($(this).next('div.menu1:visible').length != 0)
			{ 
				$(this).next('div.menu1').slideUp('normal'); 
			}
			// Si le sous-menu est caché, on ferme les autres et on l'affiche : 	
			else { 
				$('div.menu2').slideUp('normal'); 
				$('div.menu3').slideUp('normal'); 
				$('div.menu4').slideUp('normal'); 
				$('div.menu5').slideUp('normal'); 
				$(this).next('div.menu1').slideDown('normal'); 
			}
	});
});

////////////Code java////////////


Si cela est possible, cela serait gentil de votre part de m'éclairer de vos lumières,


Amicalement Cyril.




6 réponses

Etant relativement novice en codage, je ne connais qu'une solution qui est de faire en sorte que l'image soit changer par une autre image (de même taille) au survol de la souris: le rollover.

Par contre c'est un script javascript et je ne sais pas (parce que je suis novice :p) si ça peut s'accorder avec ton charabia là :p:p

si tu veux quand même demande moi je te balance le script
Messages postés
7
Date d'inscription
vendredi 3 décembre 2010
Statut
Membre
Dernière intervention
4 décembre 2010

Merci de ta réponse HarTT,

Alors ce charabia vient d'ici

https://www.alsacreations.com/tuto/lire/606-Creer-un-menu-accordeon-avec-jQuery.html

Le menu dépliant marche a la perfection et fonctionne avec des "div".
Une div est appelé pour que l'on clik dessus se qui va avoir comme effet de faire disparaitre le menu du dessous. Et les autres fonctions sont que si l'on clique sur l'une des autre 'div.rejoin' les autres se referme pour laissé place a celle que l'on veut faire apparaitre.

J'espere que tu vas comprendre le "charabia" que je raconte car même moi j'ai dû mal.

Maintenant le script que tu me propose peut, peut être s'accorder car il suffirait juste de rajouter des fonctions.

Amicalement.
Messages postés
7
Date d'inscription
vendredi 3 décembre 2010
Statut
Membre
Dernière intervention
4 décembre 2010

Re, J'ai trouvé sa

onmouseover=\"this.style.opacity ='0.7'\"
onmouseout=\"this.style.opacity ='1'\"

Qui fonctionne trés bien sur ma "div rejoin". Es possible de remplacer

" this.style.opacity ='0.7' " et " this.style.opacity ='1' "

par le nom de deux class différente de mon fichier css ?

Amicalement.
Messages postés
5205
Date d'inscription
samedi 20 janvier 2007
Statut
Contributeur
Dernière intervention
19 avril 2020
1 339
????
Salut

Mais tu as deja tout pour le faire dans la CSS !ou alors c est moi qui plane :-))

au pire tu rajoute une valeur au css

		#navigation a:hover  {
 background-image: url(image que tu veux.png);
}


Messages postés
7
Date d'inscription
vendredi 3 décembre 2010
Statut
Membre
Dernière intervention
4 décembre 2010

Voila j'ai modifié mon post pour que ce soit un peu plus clair.

Donc j'ai essayé:

<div class='bouton-menu1' onmouseover=\"this.style.opacity ='0.7'\" onmouseout=\"this.style.opacity ='1'\"></div>


Cela fonctionne mais sa ne me change que l'opacité.

J'ai essayé cela aussi qui fonctionne avec Jquery :

<script type=\"text/javascript\"></script> 
  <script type=\"text/javascript\"> 
   $(document).ready(function(){ 
    $(\"bouton-menu1\").mouseover( function() { $(this).css(\"border\",\"3px solid grey\");}); 
   }); 
  $(\"bouton-menu1\").mouseout( function() { $(this).css(\"border\",\"none\");}); 
</script>


Cela m'ajoute une bordure à mes bouton quand je passe la souris dessus.

Moi se que je veu c'est que sa change la class, par exemple que la class "bouton-menu1" devienne "bouton-menu1.2" au passage de la souris

Voila j'espere avoir était un peu plus clair pour vous, et encore merci de votre patiente et de vos réponse.

PS : La solution que tu m'a proposé RAD ZONE ne fonctionne pas.

Amicalement Cyril.
Messages postés
5205
Date d'inscription
samedi 20 janvier 2007
Statut
Contributeur
Dernière intervention
19 avril 2020
1 339
PS : La solution que tu m'a proposé RAD ZONE ne fonctionne pas. 

je comprend pas ce que tu veux ?

Moi je croyais que c etait un rollover un peu comme CA ?
Messages postés
7
Date d'inscription
vendredi 3 décembre 2010
Statut
Membre
Dernière intervention
4 décembre 2010

C'est sa que je veut, le soucis étant que mes bouton ne fonctionne plus en tant que lien, quand je passe la souris devant elle ne devient pas une petite main comme si on voulais cliquer sur un lien
Messages postés
7
Date d'inscription
vendredi 3 décembre 2010
Statut
Membre
Dernière intervention
4 décembre 2010

J'y suis presque Rad zone en utilisant ton java..
Sauf que moi je ne veut pas utiliser les li et ul mais les div, donc j'ai fait sa comme sa :

<div class=\"bouton-menu1\"><span>texte</span></div>

Sa affiche correctement ma seconde image =)) Mais juste derriere le texte et pas l'intégralité de ma div.

J'aimerais a la limite que <div class=\"bouton-menu1\"> devienne un lien grâce à

$(\".mainmenu div.bouton-menu1 span\").each( function () {
// On stocke le contenu du span :
var TexteSpan = $(this).text();
$(this).replaceWith('<a href=\"\" title=\"Afficher le sous-menu\">' + TexteSpan + '<\/a>') ;
} ) ;
Je vois qu'apparement tu as presque rélger ton problème, tant mieux !
ceci di je te balance mon code quand même au cas, on sait jamais ;)

<head>
<script language="JavaScript">
<!-- Begin
bouton1 = new Image();
bouton1.src = "images/image2.jpg";
end -->
</script>
</head>

<body>
<a href="cible.html" onmouseover="bouton1.src = 'images/image2.jpg';" onmouseout="bouton1.src = 'images/image1.jpg';"> <img src="images/image1.jpg" name=bouton1></a>
</body>


Si il y a plusieurs liens à "rolloveré" tu rajoute un bouton2, bouton3,... dans le <head> et une lignes correspondante sur chaque liens à la manière de celle que j'ai mise.

Je ne sais pas si on peux l'adapter sur un div, je pense que oui mais je n'en suis pas sur. Par contre j'ai remarquer que des fois quand je passais la souris dessus ca me faisait un cadre violet (cadre de liens sur les images), mais lu sur le site du zéro qu'on pouvait virer ca dans le CSS.


voilà tu en fait ce que tu veux, si besoin d'aide par rapport a ca demande moi ;)
Messages postés
7
Date d'inscription
vendredi 3 décembre 2010
Statut
Membre
Dernière intervention
4 décembre 2010

Problème résolu, J'avais juste à rajouter une div autour de chaque bouton et les span :

<div id='ongletmenu'><div class='bouton-menu1'><span></span></div></div>


et du css pour déterminer la taille de la zone 'hover' :

#ongletmenu a, #ongletmenu span { 
display: block; 
text-decoration:none; 
list-style: none; 
width:198px; 
border:none; 
height:32px;



Encore merci de votre aide et vos réponse a tous. Bonne journée,

Amicalement Cyril.