11543 sujets

JavaScript, DOM et API Web HTML5

Regroupement onMouseOver - onMouseOut

Bonjour,

j'ai un petit script javascript pour dévoiler une partie div par click sur un bouton et la masquer en cliquant sur un autre bouton.

Tout compte fait je dois changer en dévoilant par survol d'une image ma div et donc la masquer quand la souris n'est plus dessus.

Mon script scindé par onclick histoire d'y voir plus clair
<a href="javascript:close()" class="close" >-</a>
<a href="javascript:void(0);" onclick="toggle('case');" class="case">+</a>


Le code que je tente de bricoler...
<a href="javascript:void(0);" id="close" onMouseOver="toggle('case');" onMouseOut="javascript:close()"><img src="img.jpg"></a>


Ça va pas du tout je le conçois.

Du coup à mon avis il va falloir que je revois tout mon code relatif : 
active_case = null;
		
		$(document).ready(function(){
			$('.cases2').hide();
			$('a.close#ID_ARTICLE').hide();
			
			$(window).resize(onResize);
			onResize();
				
				$(function () {
					$("a.close#ID_ARTICLE").live("mouseover mouseout",
						function (event) {
							if(active_case) {
								if (event.type == "mouseover") $("a.close#ID_ARTICLE").css({'background-position':'0px 0px'});
								else $("a.close#ID_ARTICLE").css({'background-position':'0px 0px'});
								
								}					
							});
 
			})
		});
				
 		if($.browser.webkit) {_y = yyy; } 
  
  
		function onResize() {
			var elem = $("a.close#ID_ARTICLE");
			
			var offset = elem.offset();
			elem.css({ left: $(window).width()/2 + 90/2 + "px", top: $('#plus').offset().top + 30 +"px" });

		}
		
		function toggle(id) {
			$('html,body').stop().animate({scrollTop: 200});
			
			if(active_case) {
				active_case.slideUp(1000);
				$('#' + id).delay(1000).slideDown(700);
			} else {
				$('#' + id).slideDown(700);
				$('a.close#ID_ARTICLE').show().animate({'background-position':'0px 0px'});
				$('cases2').hide();
			}
			
			active_case = $('#'+id);
			
			onResize();
		}
		
		
		function close() {
			$('plus').stop();
			
			if(active_case) {
				active_case.slideUp(1000); 
				
				active_case = null;
				$('a.close#ID_ARTICLE').animate({'background-position':'0 0'}).hide(200);
			}		
		}


Merci pour vos idées Smiley smile
J'ai beau lire et essayer de comprendre ce que tu veux faire, j'arrive pas à piger pourquoi tu as cette tartine de code et tous ces machins onResize, detection de Webkit et tout pour au final faire un truc aussi simple.

Pour afficher masquer un élément au survol d'un autre élément :


<div class="hide_me">Cachez-moi</div>
<img class="button" src="img.jpg" alt="Afficher / Masquer" />

$(document).ready(function(){

  $('.hide_me').hide();

  $('.button').hover(

    function () {
      $(this).prev().slideDown(700);
    },

    function () {
      $(this).prev().slideup(700);
    }

  );

});

Modifié par jb_gfx (11 Jul 2012 - 19:51)
Merci beaucoup Smiley smile La tâche a été difficile puisque je jongle avec SPIP et les nominations de classe en fonction des id d'article.
Tu aurais du poster ton HTML. Avoir une idée de comment est formé le DOM de ta page aide pas mal quand tu fais des manipulations de ce dernier en jQuery. Pour la prochaine fois si tu as résolu ton problème. Smiley cligne
Je vais les donner car je suis dans un vrai casse tête chinois Smiley smile à présent mes fadeIn et FadeOut bug à pleurer... Comme dit précédemment c'est un portfolio avec images phares chargées dynamiquement. Au survol de l'image, s'effectue un rollover sur une autre (par exemple on passe d'une image niveau gris à une image couleur) et se déroule le contenu d'un descriptif. J'utilise le cms SPIP3.

Mon contenu est intégré dans un tableau car je souhaite faire une présentation à l'horizontale (donc avec barre horizontale). Chaque projet est dans une cellule, une colonne pour être plus précis <td>

La première image générées n'a pas l'effet rollover donc elle est mise à part. J'essais de simplifier le code pour y voir plus clair... 

<table>
		
			<tr>
					<BOUCLE_articles(ARTICLES) {id_rubrique} {par date}{doublons} {inverse} {0,1}>
					<td>[(#LOGO_ARTICLE_NORMAL|#URL_ARTICLE|image_reduire{0,767}|image_recadre{343,767}|inserer_attribut{id,survoln1})]
					 
						 <div id="global">
							<h2 class="current">#TITRE</h2>
							<div class="case cases#ID_ARTICLE" id="case#ID_ARTICLE" style="display:block">#DESCRIPTIF</div>
						 </div>
					 </td>
					 
					  <script type="text/javascript">
$(document).ready( function () {
  $('img#survoln1').mouseover(function() {

    $('.cases#ID_ARTICLE').stop(true, true).show(400);
}).mouseout(function() {
    $('.cases#ID_ARTICLE').stop(true, true).hide(400);
});

}) ;
</script>
				</BOUCLE_articles>
					
<BOUCLE_articles2(ARTICLES) {id_rubrique} {par date} {inverse} {1,n}>
	<td id="entete">
				 
		<div class="survol#ID_ARTICLE">[(#LOGO_ARTICLE_SURVOL|#URL_ARTICLE|image_reduire{0,767}|image_recadre{343,767})]</div>
		<a href="#URL_ARTICLE"><img src="[(#LOGO_ARTICLE_NORMAL||#URL_ARTICLE||image_reduire{0,767}|image_recadre{343,767}extraire_attribut{src})]" class="survold survolx#ID_ARTICLE" /></a>
					 
<div id="global">
						<h2 class="current">#TITRE</h2>
						<span><BOUCLE_artmot2(MOTS){id_article}>#TITRE </BOUCLE_artmot2></span>
						
						<div id="plus">
						<div class="case cases#ID_ARTICLE" id="case#ID_ARTICLE">#INTRODUCTION</div>
						</div>
					</div>

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

  $('.survol#ID_ARTICLE').mouseover(function() {
    $('.cases#ID_ARTICLE').stop(true, true).show(400);
}).mouseout(function() {
    $('.cases#ID_ARTICLE').stop(true, true).hide(400);
});

$(".survol#ID_ARTICLE").hover(function(){$(".survolx#ID_ARTICLE").fadeIn();}, 
function() {$(".survolx#ID_ARTICLE").fadeOut();});

}) ;
</script>			
				</BOUCLE_articles2>
				
				
			</tr>
			
			</table>


<script type="text/javascript">
$(document).ready( function () {
 $('.case').hide();
}) ;
</script>


Que se passe t'il avec ça ? C'est "simple" le rollover s'effectue non pas sur l'image même mais sur le projet qui suit (enfin précède car les projet sont classés par date inverse) comme si elle avait migré dans l'autre colonne... Le code source de ma page ne m'indique aucune erreur. J'ai beau tourner et retourner le code HTML et js dans tous les sens je n'arrive jamais à obtenir le bon résultat...

Si vous pouviez me dire comment nettoyer ce code et ce qui pêche... Merci d'avance
Sujet clos
Aller à