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

modifier une source javascript

JavaScript

Vue hybride

Discussions similaires

Partager

Partager