modifier une source javascript

**idamarco** · 14/01/2009, 12h56

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**le_chomeur** · 14/01/2009, 13h24

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**idamarco** · 14/01/2009, 15h16

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?

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!

**le_chomeur** · 14/01/2009, 16h14

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

**idamarco** · 14/01/2009, 16h20

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!

**le_chomeur** · 14/01/2009, 16h28

lol par défaut , lit le code que je t'ai donné

:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**idamarco** · 14/01/2009, 17h07

Je peux te faire un bisou?

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?

**idamarco** · 14/01/2009, 18h28

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

Me reste le texte...

**le_chomeur** · 14/01/2009, 18h37

yop

petite astuce :

ajoute une div en dessous de la grosse :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

puis sur la méthode:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 change(urlimage,letexte){
...
document.getElementById('montext').innerHTML = letexte;
}

il ne te reste plus qu'a changer :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

en

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<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

**idamarco** · 14/01/2009, 21h03

ParfaiTTT!

T'es un

.

Ca marche pile poil!

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

Thanks!!

**le_chomeur** · 14/01/2009, 23h14

n'oublies pas le tag résolu

**idamarco** · 15/01/2009, 10h19

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.

**idamarco** · 17/01/2009, 18h27

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?

**Bovino** · 17/01/2009, 18h31

Essaye sur le onload de l'image.

**le_chomeur** · 19/01/2009, 08h56

+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

**Auteur** · 19/01/2009, 11h07

Envoyé par Bovino

Essaye sur le onload de l'image.

ou utiliser l'attribut complete des images :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ?

**le_chomeur** · 19/01/2009, 11h36

tout a fait auteur , on ajoute un évènement sur onerror qui stoppera la vérification

**idamarco** · 20/01/2009, 21h12

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

**Auteur** · 20/01/2009, 23h33

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

**idamarco** · 21/01/2009, 00h18

Salut Auteur

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

modifier une source javascript

JavaScript

Discussions similaires

Partager

Partager