Sujet Précédent Sujet Suivant

Image différente au survol de la souris

Résolu/Fermé
akadou_soixante_dix_sept Messages postés 7 Date d'inscription vendredi 3 décembre 2010 Statut Membre Dernière intervention 4 décembre 2010 - Modifié par akadou_soixante_dix_sept le 3/12/2010 à 13:43
akadou_soixante_dix_sept Messages postés 7 Date d'inscription vendredi 3 décembre 2010 Statut Membre Dernière intervention 4 décembre 2010 - 4 déc. 2010 à 11:40
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.




A voir également:

6 réponses

Réponse 1 / 6
HarTT
3 déc. 2010 à 02:33
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
0
Réponse 2 / 6
akadou_soixante_dix_sept Messages postés 7 Date d'inscription vendredi 3 décembre 2010 Statut Membre Dernière intervention 4 décembre 2010
3 déc. 2010 à 11:49
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.
0
Réponse 3 / 6
akadou_soixante_dix_sept Messages postés 7 Date d'inscription vendredi 3 décembre 2010 Statut Membre Dernière intervention 4 décembre 2010
3 déc. 2010 à 12:39
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.
0
Réponse 4 / 6
RAD ZONE Messages postés 5224 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 22 mars 2024 1 353
3 déc. 2010 à 13:14
????
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);
}


0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 6
akadou_soixante_dix_sept Messages postés 7 Date d'inscription vendredi 3 décembre 2010 Statut Membre Dernière intervention 4 décembre 2010
Modifié par akadou_soixante_dix_sept le 3/12/2010 à 13:53
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.
0
RAD ZONE Messages postés 5224 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 22 mars 2024 1 353
3 déc. 2010 à 14:08 
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 ?
0
akadou_soixante_dix_sept Messages postés 7 Date d'inscription vendredi 3 décembre 2010 Statut Membre Dernière intervention 4 décembre 2010
3 déc. 2010 à 14:19
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
0
akadou_soixante_dix_sept Messages postés 7 Date d'inscription vendredi 3 décembre 2010 Statut Membre Dernière intervention 4 décembre 2010
3 déc. 2010 à 15:44
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>') ;
} ) ;
0
HarTT
3 déc. 2010 à 16:36
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 ;)
0
Réponse 6 / 6
akadou_soixante_dix_sept Messages postés 7 Date d'inscription vendredi 3 décembre 2010 Statut Membre Dernière intervention 4 décembre 2010
Modifié par akadou_soixante_dix_sept le 4/12/2010 à 11:41
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.
0

Discussions similaires

Retrouver l'image originale après avoir fait des modifications ?
Raven -
bonjou -

9 réponses
Comment enlever le rouge sur la photo svp ?
lucas0909 -
Benji -

20 réponses
Sur la plage...
kriiisss -
Utilisateur anonyme -

6 réponses