Posez votre question Signaler

Image différente au survol de la souris [Résolu]

akadou_soixante_dix_sept 5Messages postés 3 décembre 2010Date d'inscription 4 décembre 2010Dernière intervention - Dernière réponse le 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.

Image différente au survol de la souris »

Suggestions

Image différente au survol de la souris
Image au survol de la souris ? (Résolu) » Forum
Image qui s agrandie au survol de la sourie (Résolu) » Forum
Texte au survol de la souris sur une image (Résolu) » Forum
Image agrandi survol souris » Forum
Agrandir photo au survol de la souris » Forum

Plus

Réponse

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

Ajouter un commentaire

Réponse

akadou_soixante_dix_sept 5Messages postés 3 décembre 2010Date d'inscription 4 décembre 2010Dernière intervention 3 déc. 2010 à 11:49

Merci de ta réponse HarTT,

Alors ce charabia vient d'ici

http://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.

Ajouter un commentaire

Réponse

akadou_soixante_dix_sept 5Messages postés 3 décembre 2010Date d'inscription 4 décembre 2010Dernière intervention 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.

Ajouter un commentaire

Réponse

RAD ZONE 4790Messages postés 20 janvier 2007Date d'inscription 23 mai 2012Dernière intervention 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);
}

Ajouter un commentaire - Site web

Réponse

akadou_soixante_dix_sept 5Messages postés 3 décembre 2010Date d'inscription 4 décembre 2010Dernière intervention 3 déc. 2010 à 13:52

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.

Ajouter un commentaire

Afficher les 4 commentaires

RAD ZONE- 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 ?

akadou_soixante_dix_sept- 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

akadou_soixante_dix_sept- 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>') ;
} ) ;

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 ;)

Réponse

akadou_soixante_dix_sept 5Messages postés 3 décembre 2010Date d'inscription 4 décembre 2010Dernière intervention 4 déc. 2010 à 11:40

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.

Ajouter un commentaire

Répondre au sujet

Posez votre question

Dossier à la une

Passage au tout numérique : quel coût pour les particuliers ?

Passage au tout numérique : quel coût pour les particuliers ?

Combien cela coûte-t-il au total ? Quelles aides apportent l'état et les acteurs du marché pour alléger cette charge non choisie ? Tous les détails sur Commentçamarche.net.

Image différente au survol de la souris [Résolu]

Image différente au survol de la souris »

Passage au tout numérique : quel coût pour les particuliers ?