aide pour web developer

[biquette57]

Bonjour, je suis novice, et essaie de faire un site !
Je veux pouvoir regarder des photos miniaturisées sans ouvrir de nouvelles fenêtre, j'ai trouvé un javascript (j'ai pas encore tout compris...) qui doit permettre de placer la souris sur la miniature et la photo s'ouvre en plus grand !
ok, mon site n'est pas encore sur le web, je ne fais que des essais, mais pour vérifier si cela fonctionne j'ai lu qu'il fallait installer web developer, mais après ??
J'ai trouvé un site qui fait exactement ce que je recherche (y a plus qu'à copier....) mais en basculant de mon logiciel (ha ! j'utilise expression web) sur internet, cette partie (les photos) n'apparait pas ! alors qu'elle existe sur le site !! en fait, j'y comprends rien !!
un peu d'aide ??

[EricG]

Bonjour,

Si ce n'est pas sur le Web, ce n'est pas sur Internet J'ai du mal à comprendre. Les images sont au bon endroit ?

[biquette57]

J'utilise la touche F12, ce qui me permet de voir ce que donne mes essais sur internet, en cliquant sur tous mes liens, bref pour vérifier la cohérence de ce que je fais !
par contre concernant la partie avec les photos, sur lesquelles je place ma souris pour les agrandir, sans ouvrir de nouvelles fenêtres, pas moyen de voir ça quand je bascule avec F12 !!
j'ai copié une page avec le javascript, comme je veux en faire une, mais c'est là que je n'arrive pas à vérifier ce qui se passe !!

[jpj]

Bonjour,

Je déplace dans "Développement web" mais sans site en ligne et sans code, il ne va pas être simple de t'aider (d'autant que Expression Web n'est peut-être pas trop connu ici).

[biquette57]

snif !! ça fait depuis ce matin que je cherche et cherche !!

[Asumbaa]

Salut,

Pas facile d'aider à l'aveugle
Mais bon ! Déjà, je ne vois pas bien ce que vient faire Web Developer (l'extension Firefox ?) là dedans. Si j'ai bien compris, tu réalises une page avec des images qui s'ouvrent en grand au passage de la souris, par un mécanisme en Javascript (c'est ça ?)

Sur ta page qui ne marche pas comme tu voudrais : ouvre la console (Outils > Console d'erreurs). Vide-la, recharge ta page => as-tu une erreur ?

[biquette57]

Merci de prendre du temps !

Je débute ! je suis tombée sur un site où l'on peut regarder des photos sans cliquer dessus, elles s'agrandissent quen on passe la souris dessus, c'est ce que je veut faire sur mon site.

Le mien n'est pas encore en ligne, il est en fabrication, pour cela j'utilise Expression Web, mais j'ai quelques petites notions de langage htlm....
J'ai pompé le site en question, j'ai la page où se trouve ces photos, je l'ouvre avec expression web, et l'endroit où drevraient être les photos n'apparait pas !! j'utilise la touche F12 pour basculer dans le navigateur, pour voir un peu ce que donne ma création, et là non plus pas de photos, alors que sur le site, elles y sont !!

mon problème est que si je veux copier le script, il faut que je puisse voir ce que ça donne, et là je peux rien voir, et ça commence à me rendre chèvre !!

[biquette57]

wouarf, la page est pleine d'erreur :
extrait :

Avertissement : Erreur d'analyse de la valeur pour « width ». Déclaration abandonnée.
Fichier Source : file:///C:/Users/mss/Documents/Mes%20sites%20Web/lycee%20rombas/www.ac-nancy-metz.fr/Pres-etab/JulieDau ... eSite1.css
Ligne : 8

une autre :

Avertissement : assignment to undeclared variable i
Fichier Source : file:///C:/Users/mss/Documents/Mes%20sites%20Web/lycee%20rombas/www.ac-nancy-metz.fr/Pres-etab/JulieDau ... isite2.htm
Ligne : 158

[Benoit]

Apparemment tu n'accèdes pas à la page via un serveur mais directement en chargeant les fichiers depuis ton disque dur (d'où les adresses file:///). Le comportement du navigateur ne sera pas le même et il est tout à fait possible que certains liens qui fonctionneraient très bien sur un serveur web ne fonctionnent pas en local (pour des raisons de sécurité principalement).

Pour savoir réellement si ça fonctionne, la seule manière est soit de les mettre en ligne au bon endroit, soit de t'installer un petit serveur web personnel sur ta machine.

[biquette57]

c'est ça, mais est il simple d'installer un serveur ??

[Asumbaa]

Normalement, pas besoin de serveur quand on fait juste du HTML et du Javascript. On va essayer de rester simples

Donc ! La page que tu visualises par F12, c'est la tienne ou celle que tu as récupérée ?
Si c'est celle que tu as récupérée, tu as peut-être simplement enregistré la page mais pas les images, ce qui expliquerait que tu ne les vois pas ?
Peux-tu nous donner l'adresse du site que tu voudrais copier ? (si tous publics)

[Invité]

Cool !
voici :
j'ai pas le droit d'envoyer l'adresse par ce site, il refuse !! ouarf, c'est le site du lycée julie daubié de rombas, dans l'académie de nancy-metz

ce qui m'intéresse, c'est les photos en bas !! enfin plutôt la manip !! et c'est ça que j'arrive pas à refaire !!
je me suis créee une nouvelle pasge, j'ai fait des miniatures, mais je pense qu'il me reste le problème de la taille de mes images en grand ! parce que quand je bascule avec F12, a y est, je vois mes miniatures, mais pas d'agrandissement, snif!

[Asumbaa]

Bon, ça avance alors

Est-ce ce site : http://www.ac-nancy-metz.fr/Pres-etab/J ... bieRombas/ ?
Je n'y vois pas d'images qui s'agrandissent, c'est sur quelle page ?
Ceci dit, sans vouloir vexer le webmaster, je te suggère de prendre exemple sur un site un peu plus... disons moderne

Dans l'idée, sur ta page :
- tu as des images en miniature (j'espère que ce sont vraiment des miniatures et que tu n'as pas juste fixé une taille plus petite avec width et height !)
- tu as un petit morceau de Javascript pour gérer le survol
- tu as des images agrandies qui seront appelées lors du survol

[biquette57]

voui, c'est bien, ça, ben heuu, on est un peu formaté pour faire des trucs qui se ressemble... mais la seule chose qui m'inspire de ce site c'est les photos... enfin si j'y arrive un jour, hem !!

elles sont dans visite

j'ai instalé mes photos pour que le logiciel (expression web) fasse des miniatures automatiquement, elles sont rangées dans un dossier miniatures dans le dossier image où sont les photos d'origines
chacune d'elle s'appelle image1, image2 ect... et les miniatures image1_small ect...

mais je n'arrive toujours pas à voir les agrandissements, j'ai même réussi à basculer cette page d'essai dans l'ancien site de mon lycée pour vérifier, mais que neni !

mon script comporte donc une erreur, mais je ne suis pas assez calée pour comprendre où !!

[Asumbaa]

Bien !
Nous sommes donc sur http://www.ac-nancy-metz.fr/Pres-etab/J ... Visite.htm ^^

Alors :
Sur chacune des miniatures, il y a des instructions Javascript pour ouvrir l'image en grand :

Code : Tout sélectionner

onmouseover=showtrail(largeur,hauteur,'nom_de_limage_en_grand') onmouseout=hidetrail()

Il faut bien entendu remplacer les trois paramètres par les valeurs réelles.

Bien entendu, il te faut aussi les fonctions showtrail et hidetrail, qu'on trouve un peu plus haut; et les fonctions associées (à noter que ce script snobe complètement Opera et Safari, on se demande pourquoi) :

Code : Tout sélectionner

var w=1
var h=1
 
if (document.getElementById || document.all)
document.write('<div id="trailimageid" style="position:absolute;visibility:hidden;left:0px;top:-1000px;border:2px solid #888888;background:#DDDDDD;"></div>')
 
function gettrailobj()
{
	if (document.getElementById) return document.getElementById("trailimageid").style
	else if (document.all) return document.all.trailimagid.style
}
 
function truebody()
{
	return (!window.opera && document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function hidetrail()
{
	document.onmousemove=""
	document.getElementById('trailimageid').innerHTML=""
	gettrailobj().visibility="hidden"
	gettrailobj().left=-1000
	gettrailobj().top=0
}
 
 
function showtrail(width,height,file)
{
	if(navigator.userAgent.toLowerCase().indexOf('opera') == -1 && navigator.userAgent.toLowerCase().indexOf('safari') == -1)
	{
		w=width
		h=height
		gettrailobj().visibility="visible"
		gettrailobj().width=w+"px"
 
		thisfile=file;//modifiéparRod
		//thisfile="imagemark.php?image="+file;
		//document.getElementById('trailimageid').innerHTML="<div>"+document.getElementById('preload_text').value+"</div>";
		document.getElementById('trailimageid').innerHTML="<img src='"+ thisfile +"' width='"+w+"px'>"; 
			document.onmousemove=followmouse
	}
}
 
 
function followmouse(e)
{
 
	if(navigator.userAgent.toLowerCase().indexOf('opera') == -1 && navigator.userAgent.toLowerCase().indexOf('safari') == -1)
	{
 
		var xcoord=20
		var ycoord=300
		//var ycoord=20
 
		if (typeof e != "undefined")
		{
			xcoord+=e.pageX
			ycoord+=e.pageY
		}
		else if (typeof window.event !="undefined")
		{
			xcoord+=truebody().scrollLeft+event.clientX
			ycoord+=truebody().scrollTop+event.clientY
		}
 
		var docwidth=document.all? truebody().scrollLeft+truebody().clientWidth : pageXOffset+window.innerWidth-15
		var docheight=document.all? Math.max(truebody().scrollHeight, truebody().clientHeight) : Math.max(document.body.offsetHeight, window.innerHeight)
 
		if (xcoord+w+3>docwidth)
		xcoord=xcoord-w-(20*2)
 
		if (ycoord-truebody().scrollTop+h>truebody().clientHeight)
		ycoord=ycoord-h-20;
 
		gettrailobj().left=xcoord+"px"
		gettrailobj().top=ycoord+"px"
 
	}
 
}

Donc :
- tu copies-colles le gros bout de Javascript dans un fichier (nommons-le images.js)
- tu appelles ce fichier à partir de ta page avec les miniatures

Code : Tout sélectionner

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

- toujours dans ta page, sur chaque miniature, tu ajoutes les instructions Javascript adaptées (voir premier morceau de code)

Si ça coince encore, il faudra que tu nous indiques ton code et éventuellement où on peut voir ta page sur le Web.