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