modifier une source javascript

Version imprimable

modifier une source javascript images survol�es

Bonjour,

je ne sais pas trop comment intituler ce post.
J'ai pris sur le net un javascript.
Il affichait une image agrandit des vignettes sur lesquelles passaient la souris.
J'ai modifi� (au pif) de telle sorte que l'image agrandit s'affiche � une position d�finie.
Ca fonctionne.

Je suppose qu'il y a donc du code en trop et je ne serais pas contre de le supprimer de mon script.

Tant que je ne passe pas sur une vignette, le cadre avec l'image n'apparait donc pas.
J'aimerais que ce cadre apparaisse quand je ne survole pas sur une image.
Il afficherait une image par d�faut qui serait donc remplac�e par celle des vignette survol�e...

Pas facile � d�crire, j'esp�re avoir �t� clair.;)

Voici le script puis le css:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
/*----------------------------*/
/*   Script Infobulle
/*   www.webelix.net
/*----------------------------*/
 
// on charge la feuille de style de la bulle.
document.write('<style type="text/css">@import url(infobulle.css);</style>');
// on formate la bulle.
document.write('<div id="bulle" class="infos_bulle"></div>');
// on met à jour la position de la bulle.
document.onmousemove = move_bulle;
 
var i=false; // La variable i nous dit si la bulle est visible ou non
 
function ElementId(id)
{
  return document.getElementById(id);
}
 
function move_bulle(e) // Fonction de suivi de la souris 
{
  if(i){
    if(navigator.appName!="Microsoft Internet Explorer"){
      ElementId("bulle").style.left = 170+"px";
      ElementId("bulle").style.top = 60+"px";
    }else{
      ElementId("bulle").style.left = 165+"px";
      ElementId("bulle").style.top = 60+"px";
    }
  }
}
 
function open_bulle(content)
{
  if(i==false){
    ElementId("bulle").style.visibility = "visible"; // Si la bulle est cacher on la rend visible.
    ElementId("bulle").innerHTML = content; // on copie le contenu dans la bulle
	move_bulle(ElementId("bulle")); // positionnement initial (correctif X.Dusart)
    i=true;
  }
}
 
function close_bulle()
{
  if(i==true){
    ElementId("bulle").style.visibility = "hidden"; // Si la bulle est visible on la cache
    i=false;
  }
}

le css:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.link_bulle {
cursor: default;
color: gray;
border-bottom: 0px dotted gray;
}
 
.infos_bulle {
z-index: 500;
position: absolute;
top: -999px;
visibility: hidden;
font: normal 10px Verdana, Arial;
color: black;
padding: 8px;
border: 1px solid #ccc;
background-color: #FFFFF;
opacity: 0.9;
-moz-opacity: 0.9;
filter: alpha(opacity=90); 
}

salut :)

tu souhaites que le cadre apparaissent a une position donn�e ??
par exemple sous l'image survol�e ou plut�t un cadre fixe quelque part avec comme effet lors du survol changer la source de l'image du cadre ??

sinon essaye ceci :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>Untitled Document</title>
		<script type="text/javascript">
			function change(urlImg){
				document.getElementById('imgToChange').src = urlImg;
			}
		</script>
	</head>
	<body>
		<img src="img1.jpg" onmouseover="change('img1grand.jpg')" />
		<img src="img1.jpg" onmouseover="change('img1grand.jpg')" />
		<img src="img1.jpg" onmouseover="change('img1grand.jpg')" />
		<img src="img1.jpg" onmouseover="change('img1grand.jpg')" />
		<img src="img1.jpg" onmouseover="change('img1grand.jpg')" />
		<br />
		<div style="width:500px;height:500px;line-height:500px;text-align:center;border:2px solid #ccc">
		<img src="imgpardefaut.jpg" id="imgToChange" />
		</div>
	</body>
</html>

14/01/2009, 15h16
idamarco

Salut,

Merci pour ta r�ponse.

Je pourrais en effet repartir sur les bases de ce que tu me proposes.
Ca marche pas mal en effet et cela me parait surtout bcp plus simple pour un r�sultat identique.

Il manque juste quelques options:
1) il faudrait fixer une image par d�faut dans ce cadre
2) Que le passage de la souris remplace l'image par d�faut par celle de la vignette en grande taille donc comme c'est d�j� le cas.
3) que je puisse ins�rer un texte centre au dessus de l'image.

Et 4) cerise sur le gateau, que la liaison des images se fassent en fondu enchain�.

C'est pas possible monsieur Hassan C��F? :D

Si cela te parait facile � coder, je veux bien ce petit coup de pouce, sinon, apr�s l html, le css, le php, le sql... et ben je me mettrais au javascript! :)
14/01/2009, 16h14
le_chomeur

mieux qu'un long discours :

http://entreamis69.free.fr/demo/

tu peux regarder la source , bon attention elle est un peu plus complexe cot� javascript ;)
14/01/2009, 16h20
idamarco

Houla...
:)

Bon, en attendant de d�velopper la base de ton code en me mettant au javascript, je reviens vers ma premi�re demande � savoir mettre une image par d�faut sur mon code.

Ah bah... on fait avec ses moyens hein!:D

lol par d�faut , lit le code que je t'ai donn� ;) :

Code:

1
2
3
		<div style="width:500px;height:500px;line-height:500px;text-align:center;border:2px solid #ccc">
		<img src="imgpardefaut.jpg" id="imgToChange" />
		</div>

pour l'effet de fondu :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function fade(start, end, objectToFade){
				var IsIE=!!document.all;
				if (start == end) {
					return false
				}
				objectToFade.style.display = "block";
				IsIE ? objectToFade.filters[0].opacity = start : objectToFade.style.opacity = start / 100;
				start >= end ? start -= 5 : start += 5;
 
				var temp = this;
				clearTimeout(objectToFade.timer);
				if (start != end) {
					objectToFade.timer = setTimeout(function(){
						temp.fade(start, end, objectToFade);
					}, 25);
				}
				else {
					clearTimeout(objectToFade.timer);
				}
			}

tu copies/colle et tu modifies la fonction :

Code:

1
2
3
4
			function change(urlImg){
				document.getElementById('imgToChange').src = urlImg;
fade(0,100,document.getElementById('imgToChange'));
			}

tu auras un effet simple , pas d'effet de transition :)

tu as juste a faire du copier / coller ;)

14/01/2009, 17h07
idamarco

Je peux te faire un bisou?
:D

Plus s�rieusement: Merci!

Tu me fais gagner un temps monstre.

C'est PAR-FAI !

J'ai fait expr�s d'oublier le T � parfait parce qu'il manque juste un truc:

Que l'image par d�faut se remette en place lorsque la souris � cesser le survol de la vignette.
Pour ce qui est du texte, je mets les vignettes dans un tableau et je positionne le texte apr�s... C'est nickel!

EDIT:
OUPS... Attends, je dis une b�tise, c'est sous la grande image que je dois faire apparaitre un texte.
Et de constater qu'en fait je passais par un openbulle...
Y a t il une solution simple pour attribuer un texte � chaque image?
14/01/2009, 18h28
idamarco

J'ai rajout� ce code sur l'image pour remettre l image par defaut:
onmouseout="change('imagepardefaut.jpg')"
;)

Me reste le texte...
14/01/2009, 18h37
le_chomeur
yop :)
petite astuce :

ajoute une div en dessous de la grosse :

Code:

<div id="montext"></div>

puis sur la m�thode:
Code:

1 2 3 4 change(urlimage,letexte){ ... document.getElementById('montext').innerHTML = letexte; }
il ne te reste plus qu'a changer :

Code:

<img src="img1.jpg" onmouseover="change('img1grand.jpg')" />

en

Code:

<img src="img1.jpg" onmouseover="change('img1grand.jpg','le super texte que je veux')" />

fait attention si tu met des ' a les echapper exemple : j\'ai faim

;)
14/01/2009, 21h03
idamarco

ParfaiTTT!

T'es un :king: .

Ca marche pile poil!

Je finalise et je le mets en ligne pour qui en aurait besoin. (demain je pense...)

Thanks!!
14/01/2009, 23h14
le_chomeur

n'oublies pas le tag r�solu ;)
15/01/2009, 10h19
idamarco

Bonjour,

je voulais mettre le tag apres avoir copi� mon code.;)
je mettrais le code en ligne plus tard. Pas eu le temps...

Merci encore.:king:
17/01/2009, 18h27
idamarco

Salut tout le monde, salut le chomeur!

It's me again.

Je r�active le sujet afin de peaufiner le script.
J'ai constat� un petit soucis dans le fade.
En fait, c'est comme si le fade commen�ait avant que l'image ne soit t�l�charg�e.
Conclusion, si le fade fonctionne bien une fois que l'image est connu du navigateur, au premier chargement, l'apparition de la grande (et donc 2eme) image est plus s�che car elle intervient en cours de fade.
N'aurait il pas un moyen de ne commencer le fade que lorsque l'image est t�l�charg�e?
;)
17/01/2009, 18h31
Bovino

Essaye sur le onload de l'image.
19/01/2009, 08h56
le_chomeur

+1 avec bovino il faut attendre le chargement complet de l'image dans ce cas la il faut faire une m�thode v�rifiant le load de l'image :)

Citation:

Envoy� par Bovino

Essaye sur le onload de l'image.

ou utiliser l'attribut complete des images :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
var imageACharger = document.getElementById("idImage");
var tentatives = 0;
 
function attenteChargeImage()
{    
  if (imageACharger.complete) // si l'image est chargée...
  {
    // action à réaliser si l'image est chargée
  }
  else // sinon on réexécute la fonction...
  { 
    tentatives++;
    // on fait 5 tentatives (5 secondes)
    if (tentatives<=5)
    {
      setTimeout("attenteChargeImage()","1000"); // nouvelle tentative
    }
    else
    {
      // action à faire en cas d'échec 
    }
  }
}

J'y pense, si l'image n'est pas charg�e, on peut utiliser l'�v�nement onerror dans ce cas ?

19/01/2009, 11h36
le_chomeur

tout a fait auteur , on ajoute un �v�nement sur onerror qui stoppera la v�rification :)
20/01/2009, 21h12
idamarco

Bonjour bonjour,

Merci pour vos r�ponses.
J'ai int�gr� le le java � la place de:
" // action � r�aliser si l'image est charg�e" est ca plante...
En fait je ne sai pas trop o� le mettre ni s'il faut changer un nom de variable quelque part....
20/01/2009, 23h33
Auteur

un bout de code peut-�tre ?
et quelle est l'erreur produite ?

Salut Auteur

Voici le code.
Le javascript n'affiche plus rien.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
var imageACharger = document.getElementById("idImage");
var tentatives = 0;
 
function attenteChargeImage()
{    
  if (imageACharger.complete) // si l'image est chargée...
  {
   var img = 'imgToChange';
img.onload = function(){
  alert('Image chargé');
}
img.src = 'monImage.jpg';		
		function fade(start, end, objectToFade){
				var IsIE=!!document.all;
				if (start == end) {
					return false
				}
				objectToFade.style.display = "block";
				IsIE ? objectToFade.filters[0].opacity = start : objectToFade.style.opacity = start / 100;
				start >= end ? start -= 5 : start += 5;
 
				var temp = this;
				clearTimeout(objectToFade.timer);
				if (start != end) {
					objectToFade.timer = setTimeout(function(){
						temp.fade(start, end, objectToFade);
					}, 35);
				}
				else {
					clearTimeout(objectToFade.timer);
				}
			}
			function change(urlImg,letexte){
				document.getElementById('imgToChange').src = urlImg;
fade(0,100,document.getElementById('imgToChange'));
document.getElementById('montext').innerHTML = letexte;
 
			}
 
  }
  else // sinon on réexécute la fonction...
  { 
    tentatives++;
    // on fait 5 tentatives (5 secondes)
    if (tentatives<=5)
    {
      setTimeout("attenteChargeImage()","1000"); // nouvelle tentative
    }
    else
    {
      // action à faire en cas d'échec 
    }
  }
}

21/01/2009, 10h45
le_chomeur

es tu sur que var imageACharger = document.getElementById("idImage");
existe au moment de l'appel ??

cette ligne ne se trouverais pas dans la balise head par hasard ?

j'aurais fait comme ceci :

Code:

1
2
3
4
5
6
7
 
	<body onload="initPage()">
 
	<div style="width:500px;height:500px;line-height:500px;text-align:center;border:2px solid #ccc">
		<img src="imgpardefaut.jpg" id="imgToChange" />
	</div>	
	<div id="montext"></div>

puis le code javascript :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
 
var imageACharger = null;
var tentatives = 0;
 
function initPage()
{
	imageACharger = document.getElementById("imgToChange");
	if (imageACharger!=null)
		attenteChargeImage();
} 
 
 
 
function attenteChargeImage()
{    
  if (imageACharger.complete) // si l'image est chargée...
  {
	// si l'image à charger on affecte à l'événement onmouseover la fonction change()
	imageACharger.onmouseover = function(){change('img1grand.jpg','le super texte que je veux')};
  }
  else // sinon on réexécute la fonction...
  { 
    tentatives++;
    // on fait 10 tentatives (10 secondes)
    if (tentatives<=10)
    {
      setTimeout("attenteChargeImage()","1000"); // nouvelle tentative
    }
    else
    {
      // action à faire en cas d'échec 
    }
  }
}
 
function change(urlImg,letexte)
{
	document.getElementById('imgToChange').src = urlImg;
	fade(0,100,document.getElementById('imgToChange'));
	document.getElementById('montext').innerHTML = letexte;
}
 
function fade(start, end, objectToFade)
{
	var IsIE=!!document.all;
	if (start == end) 
	{
		return false;
	}
 
	objectToFade.style.display = "block";
	IsIE ? objectToFade.filters[0].opacity = start : objectToFade.style.opacity = start / 100;
	start >= end ? start -= 5 : start += 5;
 
	var temp = this;
	clearTimeout(objectToFade.timer);
	if (start != end) 
	{
		objectToFade.timer = setTimeout(function()
		{
			temp.fade(start, end, objectToFade);
		}, 35);
	}
	else 
	{
		clearTimeout(objectToFade.timer);
	}
}

Lors du onload de la page la fonction initPage() est ex�cut�e et appelle la fonction attenteChargeImage() qui se charge d'attendre le chargement de l'image avant de lui affecter la fonction change() sur l'�v�nement onmouseover.
J'ai augment� le nombre de tentatives : je suis pass� de 5 � 10.

Je ne sais pas si c'est ce que tu souhaites :?
Il y a sans doute plus simple.

sinon un exemple imag� sur le load :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<style>
a:hover{
	background-image:tonurl;
}
a:selected{
	background-image:tonurl;
}
a:{
	text-decoration:none;
}
</style>
<script type="text/javascript">
 
function loadIt(theImage) {
    document.images[0].src = theImage
	verif(document.images[0]);
}
 
function verif(img) {
	if(img.complete)
		alert("chargé");
	else
		setTimeout(function() {verif(img);}, 500);
}
</script>
</head>
 
<body>
<IMG SRC="" width="120" height="90" onLoad="">
<FORM>
<INPUT TYPE="button" VALUE="grosse image" onClick="loadIt('http://www.paris-360.com/admin/upload/tuilerie_neige hd.jpg')">
</FORM>
 
</body>
</html>

exemple ultra simple montrant le fonctionnement du complete, on peut ajouter une gestion des erreurs etc ... si besoins je post un exemple plus complet :)

Mouais... de toute mani�re :
Code:

1 2 3 4 5 6 7 8 9 function attenteChargeImage() { if (imageACharger.complete) // si l'image est chargée... { var img = 'imgToChange'; img.onload = function(){ alert('Image chargé'); } img.src = 'monImage.jpg';
risque pas de marcher... tu appliques l'�v�nement onload sur un objet qui n'est pas une image mais une chaine de caract�res...

21/01/2009, 17h01
idamarco

Merci pour vos r�ponses.

Pour l'instant, je n'arrive pas � le faire fonctionner.
Il doit y avoir un chbinz quelque part.
Je r�essaie plus tard.
21/01/2009, 21h22
idamarco
Re coucou,

En fait, il y a quelque chose qui m'�chappe.
Je mettais le code suivant dans la page php et le voici dans le javascript.
:D
Code:

1 2 ('img1grand.jpg','le super texte que je veux')
Du coup, je suis largu�.
Primo, j'ai int�gr� le code dans des balises tableaux, secundo, j'ai un include pour l'entete.
Modifier le BODY c'est donc modifier l'include, j'esp�re que cela marche aussi dans ce cas.
En bref, retravailler le tout c'est bcp de taf dans mon contexte et avec mes maigres connaissances
A moins que quelque chose m'�chappe, cela implique tout rebidouiller.
N'y a t il pas moyen avec la base sur laquelle nous travaillions d'int�grer le prelaod?
21/01/2009, 22h24
Auteur
Citation:
Envoy� par idamarco

Re coucou,

En fait, il y a quelque chose qui m'�chappe.
Je mettais le code suivant dans la page php et le voici dans le javascript.
:D

Code:

1 2 ('img1grand.jpg','le super texte que je veux')
du code javascript plac� dans ton code PHP, il ne reste que ce bout de code 8O ? Si c'est le cas il y a en effet un probl�me :aie:
21/01/2009, 22h51
idamarco

:D

Ce que je veux dire, c'est que ce bout de code �tait dans le php.
Au tant de fois qu'il y avait d'images et cela entre des balises <TR> et <TD> � profusion.
De le retourver dans le javascript implique que je dois tout modifier.
Je me trompe?
22/01/2009, 10h44
Auteur

tu peux nous montrer tout le code g�n�r� car l� j'ai un peu de mal � suivre :aie:

Hello!

Voil�, j'esp�re ne rien avoir oubli�.

include_entete.php contient:

Code:

<script type="text/javascript" src="js/pub_index.js"></script>

code de la page utilisant le java:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<a href="prestige_conseils.php" title="Conseils">	
	<img src="./images/divers/conseil.png" id="imgToChange" /></a>
		<div id="montext"></div>
		</td>
 
      <td style="height: 500px; width: 100%; vertical-align: top;">
 
 
 
	        <table style="text-align: left; eight: 500px; width: 500px;"
			border="0" cellpadding="2" cellspacing="2">
			<tbody>
			<tr>
 
            <td style="vertical-align: top; text-align: center; height: 96px;"><BR>
			<a href="prestige_requetelisteurl.php?categorie1=rent&ville="><img src="./images/mini/rent.png" onmouseover="change('./images/javaminibig/rent.jpg','')" onmouseout="change('./images/divers/conseil.png','')" /></a>
			<small><?php echo TXT_RENT; ?></small></td>
 
            <td style="vertical-align: top; text-align: center; height: 96px;"><BR>
			<a href="prestige_requetelisteurl.php?categorie1=buy&ville="><img src="./images/mini/buy.png" onmouseover="change('./images/javaminibig/buy.jpg','')" onmouseout="change('./images/divers/conseil.png','')" /></a>
			<small><?php echo TXT_BUY; ?></small></td>

Le java pub_index.js:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
 
img.src = 'monImage.jpg';		
		function fade(start, end, objectToFade){
				var IsIE=!!document.all;
				if (start == end) {
					return false
				}
				objectToFade.style.display = "block";
				IsIE ? objectToFade.filters[0].opacity = start : objectToFade.style.opacity = start / 100;
				start >= end ? start -= 5 : start += 5;
 
				var temp = this;
				clearTimeout(objectToFade.timer);
				if (start != end) {
					objectToFade.timer = setTimeout(function(){
						temp.fade(start, end, objectToFade);
					}, 35);
				}
				else {
					clearTimeout(objectToFade.timer);
				}
			}
			function change(urlImg,letexte){
				document.getElementById('imgToChange').src = urlImg;
fade(0,100,document.getElementById('imgToChange'));
document.getElementById('montext').innerHTML = letexte;
 
			}