Forums des Zéros

25 novembre 2010 à 14:29:36

Salut,
Tout ces appels à getElementById, ça ralenti le script. Récupère l'élément une bonne fois pour toutes dans une variable !
Ensuite, le browser testing, c'est pas bien.

Essaie ceci :

var curseur = document.getElementById("curseur");

function move(e){
	e = e || window.event;
	if(i){
		curseur.style.left=e.pageX + 5+"px";
		curseur.style.top=e.pageY + 10+"px";
	}
}

25 novembre 2010 à 16:58:00

Merci Lcaba !
Le problème est que je ne connais pas du tout Javascript. Je copie je colle et je vois si ça marche !
Je ne sais pas quelles lignes tu as modifiées ! Après quelques essais à l'instinct, ça ne marche pas .
Peux-tu me donner l'intégral du script ?
Merci encore !

26 novembre 2010 à 1:30:39

Toi plutôt, poste l'intégrale du script (html compris) ou alors un lien vers une page en ligne.

26 novembre 2010 à 2:33:46

Ce n'est pas encore en ligne.
Je te colle ci-dessous une copie du code source de la page afin de t'éviter le php, mysql et autres inserts de mes fichiers originaux. J'espère que c'est ok pour toi.
J'ai aussi un autre bug : J'aimerai désactiver l'info-bulle due à la fonction "title" car elle fait doublon avec l'infobulle JavaScript. Je dois cependant conserver l'information de "title" car elle est utilisée par Fancybox.
Je colle aussi ci-dessous le CSS de l'info-bulle.
Un très grand merci !

<!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">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Monch - les galeries</title>

<!-- Cascading Style Sheets (CSS) -->
	<link href="CSS/am_gal.css" rel="stylesheet" type="text/css" />
	<link rel="stylesheet" href="fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
	
<!-- Icone navigateur -->	
<link rel="SHORTCUT ICON" type="image/ico" href="images/logo_am2_50.ico"/>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript" src="fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="fancybox/jquery.easing-1.4.pack.js"></script>

<script type="text/javascript">
	$(document).ready(function() {	
		$("a[rel=group]").fancybox({
					'transitionIn'		: 'elastic',
					'transitionOut'		: 'elastic',
					'titlePosition' 	: 'outside',
					'overlayColor'		: '#000',
					'overlayOpacity'	: 0.9	
				});
	});
</script>

<script type="text/javascript">
<!--
function GetId(id)
{
return document.getElementById(id);
}
var i=false; // La variable i nous dit si la bulle est visible ou non
 
function move(e) {
  if(i) {  // Si la bulle est visible, on calcul en temps reel sa position ideale
    if (navigator.appName!="Microsoft Internet Explorer") { // Si on est pas sous IE
    GetId("curseur").style.left=e.pageX + 5+"px";
    GetId("curseur").style.top=e.pageY + 10+"px";
    }
	
    else { // Modif proposée par TeDeum, merci à lui
    if(document.documentElement.clientWidth>0) {
GetId("curseur").style.left=20+event.x+document.documentElement.scrollLeft+"px";
GetId("curseur").style.top=10+event.y+document.documentElement.scrollTop+"px";
    } else {
GetId("curseur").style.left=20+event.x+document.body.scrollLeft+"px";
GetId("curseur").style.top=10+event.y+document.body.scrollTop+"px";
         }
    }
  }
}
 
function montre(text) {
  if(i==false) {
  GetId("curseur").style.visibility="visible"; // Si il est cacher (la verif n'est qu'une securité) on le rend visible.
  GetId("curseur").innerHTML = text; // on copie notre texte dans l'élément html
  i=true;
  }
}
function cache() {
if(i==true) {
GetId("curseur").style.visibility="hidden"; // Si la bulle est visible on la cache
i=false;
}
}
document.onmousemove=move; // dès que la souris bouge, on appelle la fonction move pour mettre à jour la position de la bulle.
//-->
</script>


		<!-- Meta supplémentaires -->
		<meta name="Description" content="Monch, photographies expressionnistes, photos expressionnistes, artiste en imagerie expressive, galeries de photos, web, peintures, art numérique. Influence : art brut, expressionnisme, art contemporain, art insolite, art décalé, poésie naturelle ou de hasard"/>
		<meta name="keywords" content="art brut, expressionnisme, art contemporain, art insolite, art décalé, art numérique"/>

</head>

<body>


	<div id="page_galeries">

		<div id="entete_galeries">

			<p><a href="javascript:history.go(-1)">retour</a></p>
			<h1> LES GALERIES </h1>
		</div>

			<div id="inser_galerie">	<!--inser PHP-->
				
<p> Galerie Portraits - défiguration </p>

		<div class="bloc_icones_gal">

			
						<div class="conteiner_img">
							<a class="grouped_elements" rel="group" href="images_oeuvres/something_primitive_tg_logo.jpg" title="Vous avez dit primitif ?" >					
							<img src="images_oeuvres/something_primitive_gal.jpg" class="icone" alt="Vous avez dit primitif ?" onmouseover="montre('<span>Vous avez dit primitif ?</span> <br/><br/>Photomontage - Buste humain, bois flotté, matières.');" onmouseout="cache();"/></a>	
						</div>	
					
						<div class="conteiner_img">
							<a class="grouped_elements" rel="group" href="images_oeuvres/stormy_weather_tg_logo.jpg" title="Temps orageux" >					
							<img src="images_oeuvres/stormy_weather_gal.jpg" class="icone" alt="Temps orageux" onmouseover="montre('<span>Temps orageux</span> <br/><br/>Photomontage - Visage humain, matières.');" onmouseout="cache();"/></a>	
						</div>	
					
						<div class="conteiner_img">
							<a class="grouped_elements" rel="group" href="images_oeuvres/dissolved_tg_logo.jpg" title="Dissolution" >					
							<img src="images_oeuvres/dissolved_gal.jpg" class="icone" alt="Dissolution" onmouseover="montre('<span>Dissolution</span> <br/><br/>Photomontage - Buste humain et matières (photo de fiente de pigeons sur une vitre).');" onmouseout="cache();"/></a>	
						</div>	
					
						<div class="conteiner_img">

							<a class="grouped_elements" rel="group" href="images_oeuvres/death_rattle_tg_logo.jpg" title="Râle" >					
							<img src="images_oeuvres/death_rattle_gal.jpg" class="icone" alt="Râle" onmouseover="montre('<span>Râle</span> <br/><br/>Tableau photographique - Photos humaines et minérales.');" onmouseout="cache();"/></a>	
						</div>	
					
						<div class="conteiner_img">
							<a class="grouped_elements" rel="group" href="images_oeuvres/mr_hide_tg_logo.jpg" title="Moi pluriel" >					
							<img src="images_oeuvres/mr_hide_gal.jpg" class="icone" alt="Moi pluriel" onmouseover="montre('<span>Moi pluriel</span> <br/><br/>Photomontage digital - Portrait, branches et matières.');" onmouseout="cache();"/></a>	
						</div>	
					
						<div class="conteiner_img">
							<a class="grouped_elements" rel="group" href="images_oeuvres/a_fleur_de_peau_tg_logo.jpg" title="" >					
							<img src="images_oeuvres/a_fleur_de_peau_gal.jpg" class="icone" alt="" onmouseover="montre('<span></span> <br/><br/>');" onmouseout="cache();"/></a>	
						</div>	
					
						<div class="conteiner_img">
							<a class="grouped_elements" rel="group" href="images_oeuvres/and_the_thing_began_human_tg_logo.jpg" title="Tentative tentaculaire" >					
							<img src="images_oeuvres/and_the_thing_began_human_gal.jpg" class="icone" alt="Tentative tentaculaire" onmouseover="montre('<span>Tentative tentaculaire</span> <br/><br/>');" onmouseout="cache();"/></a>	
						</div>	
					
						<div class="conteiner_img">

							<a class="grouped_elements" rel="group" href="images_oeuvres/white_noice_tg_logo.jpg" title="Bruit blanc" >					
							<img src="images_oeuvres/white_noice_gal.jpg" class="icone" alt="Bruit blanc" onmouseover="montre('<span>Bruit blanc</span> <br/><br/>');" onmouseout="cache();"/></a>	
						</div>	
					
						<div class="conteiner_img">
							<a class="grouped_elements" rel="group" href="images_oeuvres/human_material2_tg_logo.jpg" title="Matériau humain" >					
							<img src="images_oeuvres/human_material2_gal.jpg" class="icone" alt="Matériau humain" onmouseover="montre('<span>Matériau humain</span> <br/><br/>');" onmouseout="cache();"/></a>	
						</div>	
					
						<div class="conteiner_img">
							<a class="grouped_elements" rel="group" href="images_oeuvres/one_more_try_to_appear_tg_logo.jpg" title="Encore un effort pour apparaître" >					
							<img src="images_oeuvres/one_more_try_to_appear_gal.jpg" class="icone" alt="Encore un effort pour apparaître" onmouseover="montre('<span>Encore un effort pour apparaître</span> <br/><br/>');" onmouseout="cache();"/></a>	
						</div>	
					
						<div class="conteiner_img">
							<a class="grouped_elements" rel="group" href="images_oeuvres/out_of_the_cocoon_tg_logo.jpg" title="Sortir du cocon" >					
							<img src="images_oeuvres/out_of_the_cocoon_gal.jpg" class="icone" alt="Sortir du cocon" onmouseover="montre('<span>Sortir du cocon</span> <br/><br/>');" onmouseout="cache();"/></a>	
						</div>	
					
						<div class="conteiner_img">

							<a class="grouped_elements" rel="group" href="images_oeuvres/fit_of_anger_tg_logo.jpg" title="Accès de colère" >					
							<img src="images_oeuvres/fit_of_anger_gal.jpg" class="icone" alt="Accès de colère" onmouseover="montre('<span>Accès de colère</span> <br/><br/>');" onmouseout="cache();"/></a>	
						</div>	
					
						<div class="conteiner_img">
							<a class="grouped_elements" rel="group" href="images_oeuvres/introduce_myself_tg.jpg" title="Puis-je me présenter ?" >					
							<img src="images_oeuvres/introduce_myself_gal.jpg" class="icone" alt="Puis-je me présenter ?" onmouseover="montre('<span>Puis-je me présenter ?</span> <br/><br/>');" onmouseout="cache();"/></a>	
						</div>	
					
						<div class="conteiner_img">
							<a class="grouped_elements" rel="group" href="images_oeuvres/je_crois_que_j_ai_besoin_des_arbres_tg_logo.jpg" title="Je crois que j'ai besoin des arbres" >					
							<img src="images_oeuvres/je_crois_que_j_ai_besoin_des_arbres_gal.jpg" class="icone" alt="Je crois que j'ai besoin des arbres" onmouseover="montre('<span>Je crois que j'ai besoin des arbres</span> <br/><br/>');" onmouseout="cache();"/></a>	
						</div>	
					
						<div class="conteiner_img">
							<a class="grouped_elements" rel="group" href="images_oeuvres/despite_my_pleading_tg.jpg" title="Malgré mes supplications" >					
							<img src="images_oeuvres/despite_my_pleading_gal.jpg" class="icone" alt="Malgré mes supplications" onmouseover="montre('<span>Malgré mes supplications</span> <br/><br/>');" onmouseout="cache();"/></a>	
						</div>	
					
						<div class="conteiner_img">

							<a class="grouped_elements" rel="group" href="images_oeuvres/dr_livingstone_I_presume_tg_logo.jpg" title="Dr Livingstone je présume ?" >					
							<img src="images_oeuvres/dr_livingstone_I_presume_gal.jpg" class="icone" alt="Dr Livingstone je présume ?" onmouseover="montre('<span>Dr Livingstone je présume ?</span> <br/><br/>');" onmouseout="cache();"/></a>	
						</div>	
					
						<div class="conteiner_img">
							<a class="grouped_elements" rel="group" href="images_oeuvres/dispertion2_tg.jpg" title="Dispertion" >					
							<img src="images_oeuvres/dispertion2_gal.jpg" class="icone" alt="Dispertion" onmouseover="montre('<span>Dispertion</span> <br/><br/>');" onmouseout="cache();"/></a>	
						</div>	
					
						<div class="conteiner_img">
							<a class="grouped_elements" rel="group" href="images_oeuvres/prey_from_the_shadows_tg_logo.jpg" title="Prières issues des ténèbres " >					
							<img src="images_oeuvres/prey_from_the_shadows_gal.jpg" class="icone" alt="Prières issues des ténèbres " onmouseover="montre('<span>Prières issues des ténèbres </span> <br/><br/>');" onmouseout="cache();"/></a>	
						</div>	
									<div id="curseur" class="infobulle">	</div>
		</div>

					
			</div>
	</div>
</body>

</html>

et la propriété CSS de l'info-bulle :

.infobulle{
	position: absolute;
	visibility : hidden;
	border: 1px solid Black;
	padding: 10px;
	font-family: Verdana, Arial;
	font-size: 10px;
	background-color: #003366;
	width: 160px;
	opacity: 0.8;
	moz-opacity: 0.8;
	khtml-opacity: 0.8;
	filter: alpha(opacity=80);
	color: #CCCCCC;	
}

.infobulle span{
	font-weight: bold;
	text-align: center;   
}

26 novembre 2010 à 10:11:40

Premièrement, tu devrais virer tous les onmouseover et onmouseout inline. C'est vraiment pas beau tout ce javascript perdu au milieu du html, et c'est très répétif. Voici un code, et voici les quelques modifs à apporter à ton HTML pour que ce soit fonctionnel :

Virer tous les onmouseover et onmouseout des images
Virer le visibility:hidden de la classe .infobulle
Virer tous les scripts de ta page
Virer les rel="group" et remplacer title par rel
Ajouter un id="gallery" au div qui contient toutes les images
Mettre tout ce code en fin de body ou dans un onload

Pour commencer, un exemple d'une image une fois les modifs apportées :

<div class="bloc_icones_gal" id="gallery">

	<div class="conteiner_img">
		<a class="grouped_elements" href="images_oeuvres/something_primitive_tg_logo.jpg" rel="Vous avez dit primitif ?" >					
		<img src="images_oeuvres/something_primitive_gal.jpg" class="icone" alt="Vous avez dit primitif ?"/></a>	
	</div>

Et voici le code javascript fonctionnel sous IE, Chrome et Firefox (et surement les autres) :

var listeDesImages = document.getElementById("gallery").getElementsByTagName("IMG"),
i = 0,
n = listeDesImages.length,
infoBulle = document.createElement("DIV"), // On crée une DIV
laSourisEstSurLImage = false;
montre = function (){
	laSourisEstSurLImage = true;
	infoBulle.innerHTML = this.parentNode.rel; // On place le texte dans l'info-bulle
	document.body.appendChild( infoBulle ); // On affiche la DIV
},
cache = function(){
	laSourisEstSurLImage = false;
	infoBulle.innerHTML = "";
	infoBulle.parentNode.removeChild( infoBulle );
},
move = function(e){
	if( laSourisEstSurLImage ){
		e = e || window.event;
		infoBulle.style.left = ( 10 + e.pageX ) + "px";
		infoBulle.style.top = ( 10 + e.pageY ) + "px";
	}
};

infoBulle.className = "infobulle";

for( ; i<n ; i++){ // On parcours la liste des images
	listeDesImages[i].onmouseover = montre;
	listeDesImages[i].onmouseout = cache;
}

document.onmousemove = move;

$("#gallery a").each(function(){
	// Ici this, représente le lien
	$(this).fancybox({
	'transitionIn'		: 'elastic',
	'transitionOut'		: 'elastic',
	'titlePosition' 	: 'outside',
	'overlayColor'		: '#000',
	'overlayOpacity'	: 0.9,
	'title': this.rel // On définit le title dans le options
	});
});

if( laSourisEstSurLImage ) n'est pas essentiel, c'est juste une mini optimisation. D'ailleurs, je l'ai viré dans le code suivant

Une version plus jQuery, tout en gardant les référence vers les objets et fonctions dans des variables pour ne pas encombrer la mémoire inutilement :

var $infoBulle = $( "<div>", {
	"class": "infobulle"
}),
addFancyBox = function(){
	// Ici this, représente le lien
	$(this)
		.fancybox({
			'transitionIn'		: 'elastic',
			'transitionOut'		: 'elastic',
			'titlePosition' 	: 'outside',
			'overlayColor'		: '#000',
			'overlayOpacity'	: 0.9,
			'title': this.rel
		})
		.find("img").hover( montre, cache );
},
montre = function (){
	$infoBulle.html( this.parentNode.rel ).appendTo( "body" );
},
cache = function(){
	$infoBulle.remove();
},
move = function(event){
	$infoBulle.css({
		"left": ( 10 + event.pageX ) + "px",
		"top": ( 10 + event.pageY ) + "px"
	});
};

$(document).mousemove( move );
$("#gallery a").each( addFancyBox );

Et enfin, un exemple en ligne.

26 novembre 2010 à 13:04:19

Merci tout plein pour ton... dévouement !
Je me suis dépêché à appliquer ton code (le deuxième) et en 10 minutes... et bien ça a marché !
Très très fort : Merci.
Il demeure quand même quelques soucis dont les deux premiers sont très importants:
- Dans l'infobulle j'avais mis 2 variables issues de la BDD :le titre ($titre) et le commentaire ($commentaire). Je pourrais concaténer mais le problème est que je veux un CSS différent pour chaque variable et des retours à la ligne(<br/>) entre les deux.

- La fonction "scroll" ainsi que les flèches de défilements sur les images agrandies de Fancybox ne fonctionnent plus. On pouvait passer à l'image suivante/précédente de Fancybox avec le scroll et...ça me plaisait bien ! Il faut que la valeur du "rel" soit unique au groupe d'images pour permettre cette fonction (scroll et flèches), voir explication là. Comme la valeur de rel est maintenant le titre, ben ça marche plus.

- J'ai 2 erreurs html dues à

var $infoBulle = $( "<div>", {

Le "<div>" n'est pas accepté (Il y a t-il quelque chose à faire pour faire disparaitre ces erreurs ?

Merci encore !

29 novembre 2010 à 14:42:58

C'est bon j'ai fait une nouvelle version de ce code. Côté HTML, j'ai remis le rel="group" pour conserver le diaporama, et c'est le alt des images qui sers à la fois pour l'infoBulle et pour la fancybox. Du coup, j'ai inversé la recherche : au lieu de chercher tous les liens puis les images qu'ils contiennent, je recherche toutes les images, puis j'ajoute une fancybox sur le lien parent.
Le alt des images contient à la fois le titre et l'éventuel commentaire, séparé par la chaîne " | Commentaire : ", et dans le JS on sépare les deux avec la méthode split.

<!--  Exemple d'image avec commentaire : -->
<img src="..." alt="De l'eau  | Commentaire : Un commentaire bidon" />
<!-- Exemple d'image sans commentaire : -->
<img src="..." alt="De la neige :D" />

Enfin j'ai préféré remplacer le span par un div, comme ça pas besoin de <br> (et l'avantage c'est que s'il n'y a pas de commentaire, il n'y a pas de saut de ligne inutile)

Et voilà le travail, avec commentaire dans le code source

http://sdz.kryl.fr/forum/js/583333-inf [...] ersion-2.html

S'il y a des passages que tu ne saisi pas, n'hésite pas à demander

29 novembre 2010 à 16:00:03

Merci LCaba,
mais il doit y avoir un problème. Sur ton exemple, rien n'apparait exceptés les images. Pas de lien (vers les pubs), pas d'infobulles.
C'est ou l'erreur ?

29 novembre 2010 à 16:07:04

J'ai changé le nom d'une variable, et j'ai oublié de faire la modif dans le ternaire (if arrAlt.length etc...)

29 novembre 2010 à 16:13:38

Moi y-en a pas culture suffisante pour capter !
Suis de retour dans une petite heure...

29 novembre 2010 à 16:15:20

Une autre version avec un petit changement : les commentaire apparaissent aussi dans la fancybox. Hésite pas à poser des question

29 novembre 2010 à 19:11:02

C'est impeccable !
Merci de ton indispensable aide. Je te suis vraiment reconnaissant !
Les questions sur Javascript JQuery seraient beaucoup trop nombreuses, ignare que je suis.
Pour les méticuleux, j'ai 2 erreurs W3C dues au "<div>" dans le code Javascript !
MERCI !

30 novembre 2010 à 8:28:41

La validation W3C du script on s'en fou. En HTML5 (non strict) le validateur ne dit rien là dessus. En xHTML il faut placer ton script dans une balise <![CDATA[ ton script ]]>, à condition qu'il soit servit avec le type MIME application/xhtml+xml et non text/html. Tu peux aussi contourner le problème en écrivant ceci :

"\74div\76"

30 novembre 2010 à 11:59:06

Sans avoir vraiment creusé le problème, le principe d'une écriture "universelle" me convient bien. C'est parce que plein de personnes en on rien à foutre qu'on se retrouve par exemple à corriger des bugs pour chaque navigateur (surtout IE).
Mais je dis peut être des conneries, je ne suis pas programmeur...
En tout cas ta solution a fonctionné, en mettant "\74/div\76" aussi sur la borne fermante.
Merci encore ! Si je peux faire quelque chose dans l'avenir, dis-moi !

30 novembre 2010 à 12:46:16

Le chevron, je trouve ça beaucoup plus universel que "\74" :-°