différence site / PC

snide a pensé très fort :
[...]

Q :
Comment permettre de ne pas recharges des images identiques ?

Je n'ai peut êtr pas tout compris de ton problème, mais je suggérerais
de créer les images par MyImg = new Image(), cette solution étant
utilisée pour le preloading, elle pourrait peut être marcher dans ton
cas ... ?
Si tu fais :
MyImg = new Image;
MyImg.src = "hello.gif";
Je ne vois pas pourquoi il irait te la recharger ...
Ce n'est qu'une idée !

Quelles différences entre un PC local et le site en ligne, hormis la vitesse
de chargement ?

A partir du moment où l'user clique sur un lien, même si ce n'est qu'un
<a href="javascript:;">, tous les chargements cessent : images, objets
...
En local, le chargement des images est immédiat, donc tout se passe
bien, et l'user (à moins d'être + rapide que son ombre) ne peut pas
gêner le chargement.
Par contre avec un site en ligne, le chargement n'est pas instantané,
donc si ton user clique sur un lien ou qqch d'approchant avant que la
page soit entièrement chargée, ça arrête tout.
Je ne sais pas non plus si cette réponse va t'aider :D

Hormis la vitesse de chargement, il y a peut être les proxy HTTP, les
différences de config d'Apache, de PHP ...

@+ & bonne chance
Olivier

--
Ceci est une signature automatique de MesNews.
Site : http://mesnews.no-ip.com

snide wrote:

Hello

après avoir développé mon site et mis au point en local sur mon PC, (tout
est OK),

principe No 1
toujours tenter de réduire le poids de ses images en dessous du strict
minimum pour soi admissible
(quitte à en changer le format .gif .jpg .png si necessaire)

je l'ai mis en ligne, et là quelques navrantes différences sont apparues :

* Un menu déroulant, avec images de fond, présente le défaut suivant :

tu n'as qu'à utiliser les css
exemple rapide :
http://perso.wanadoo.fr/stephane.moriaux/truc/bouton_3_etats_css.htm

* Un diaporama, qui marche très bien sur le PC, présente des défauts d'image
en ligne :
les images n'ont pas toutes la même dimension, et elles sont normalement
mises à l'échelle, mais en ligne seule la partie supérieure des images
apparaît.

ce n'est pas comme çà qu'on fait un diaporama
tu te fous de ton visiteur (surtout s'il est en RTC)
il faut envoyer l'image à la bonne taille (surtout si c'est une diapo)
http://perso.wanadoo.fr/stephane.moriaux/internet/web_html/pass_vue/

les images apparaissent normalement en s'agrandissant, mais sur le site
l'image apparaît d'abord entièrement, puis disparaît et s'agrandit.


Je n'ai pas de preload des images, ni autre indication.

Les menus sont créés dynamiquement au lancement de la page par des lignes du
genre

ne jamais jamais faire çà !

et si mon javascript est désactivé ?

writeln(<A HREF=' + ...
Les propriétés sont défines par un style où figure également l'image :
BACKGROUND-IMAGE=url(...)

en minuscules tout et toujours

le diaporama s'affiche par simple modification du src=...
l'agrandissement des images se fait par modification du clip des image > rect(...)

ma foi ... quand on peut faire compliqué, pourquoi s'en passer ?

Q :
Comment permettre de ne pas recharges des images identiques ?
Quelles différences entre un PC local et le site en ligne, hormis la vitesse
de chargement ?

il y a d'enooormes différences : tout le traitement des requettes http
sauf à ce que ton site sur ton PC soit aussi sur un serveur ?

Merci pour vos lumières

Denis

--
Stephane Moriaux et son [moins] vieux Mac

merci pour ces indices.

En fait, mes lignes de menu sont de DIV, et mes images de fond de menu sont
faites dans un style du DIV via le BACKGROUND-IMAGE=url(...)
peut-être une particularité du background-image par rapport une balise <IMG>
?

d'ailleurs, en passant par un new image(), je n'arrive pas à reprogrammer
mon fond :
la syntaxe de background-image est obligatoirement url(nom fichier).
avec
im1=new image()
im1.src="fond1.gif"

nom_div.style.backgroundImage=im1.src
donne une erreur

nom_div.style.backgroundImage="url(" + im1.src + ")"
ne donne pas d'erreur, mais le problème reste le même !



Denis

<<toujours tenter de réduire le poids de ses images en dessous du strict
<<minimum pour soi admissible

déjà fait, les images sont à la taille correspondant à la zone d'affichage,
mais n'ont pas toutes exactement la même hauteur.


<<tu n'as qu'à utiliser les css
déjà fait : les zones de fond de menus sont définies dans un style du div
qui constitue la ligne de menu.
j'utilise le background-image du div pour afficher un fond.


<<ce n'est pas comme çà qu'on fait un diaporama
<<tu te fous de ton visiteur (surtout s'il est en RTC)
<<il faut envoyer l'image à la bonne taille (surtout si c'est une diapo)

déjà fait, les images sont réduites


<<ne jamais jamais faire çà !
<<et si mon javascript est désactivé ?

dans ce cas seul le texte principal d'entrée du menu apparaît, seul le
détail n'apparaît pas, mais c'est secondaire.
la page apparaît simplement plus dépouillée, mais reste lisible avec ses
éléments principaux.
De plus, si on suppose qu'une page doit fonctionner à l'identique sans
javascript, ce langage et ce newgroup n'ont plus de sens.

<<ma foi ... quand on peut faire compliqué, pourquoi s'en passer ?

on peut ne pas vouloir une présentation spartiate avec images à la suite.
l'apparition depuis le centre de l'image est simple à faire et rapide. le
clipping ne remet pas l'image à l'échelle, il n'en n'affiche qu'une
portion.
Tout ça tient en 10 lignes de JS, pas très compliqué....

Merci pour vos lumières

Denis

snide a exposé le 27/07/2005 :

merci pour ces indices.

En fait, mes lignes de menu sont de DIV, et mes images de fond de menu sont
faites dans un style du DIV via le BACKGROUND-IMAGE=url(...)
peut-être une particularité du background-image par rapport une balise <IMG>
?

d'ailleurs, en passant par un new image(), je n'arrive pas à reprogrammer
mon fond :
la syntaxe de background-image est obligatoirement url(nom fichier).
avec
im1=new image()
im1.src="fond1.gif"

nom_div.style.backgroundImage=im1.src
donne une erreur

nom_div.style.backgroundImage="url(" + im1.src + ")"
ne donne pas d'erreur, mais le problème reste le même !



Denis

Tu as une url à proposer pour qu'on puisse voir ton truc fonctionner
(enfin, bugger ^^) ?

--
Ceci est une signature automatique de MesNews.
Site : http://mesnews.no-ip.com

snide wrote:

merci pour ces indices.

En fait, mes lignes de menu sont de DIV, et mes images de fond de menu sont
faites dans un style du DIV via le BACKGROUND-IMAGE=url(...)
peut-être une particularité du background-image par rapport une balise <IMG>
?

d'ailleurs, en passant par un new image(), je n'arrive pas à reprogrammer
mon fond :
la syntaxe de background-image est obligatoirement url(nom fichier).

toutafé

avec
im1=new image()
im1.src="fond1.gif"

nom_div.style.backgroundImage=im1.src

ben non ... ce n'est pas possible comme çà

donne une erreur

j'a rien compris :

- tu backgroundes ton image de fond via css ou via JS ?

- en css tu as un roll-over possible (cf ma démo)

- en JS ->

document.getElementById('nom_du_div').style.background='url(image.jpg)';

ce qui pourrait nous donner :

function changeImgFond(vue,nom_du_div) {
var f = document.getElementById(nom_du_div).style;
f.background='url('+vue+')';
}

nom_div.style.backgroundImage="url(" + im1.src + ")"
ne donne pas d'erreur, mais le problème reste le même !

qui est ?

si c'est pour changer d'image de fond au survol :
il faut faire comme je montre dans ma démo
tu es ainsi assuré du pré-chargement
(surtout si la FdS est externe et la même de page en page)

si tu veux absolument passer ton rollover dans une moulinette JS
Mais ... aucune garantie
(normalement la FdS devrait avoir assuré le pré-chargement)

(zoom() serait ton truc de clipage)

[ f d S ]
.bouton1 { background: url(bout_1.jpg) top left yellow; }
.bouton_o1 { background: url(bout_1over.jpg) top left orange; }
.bouton2 { background: url(bout_2.jpg) top left tellow; }
.bouton_o1 { background: url(bout_2over.jpg) top left orange; }

[ html ]
<ul id="menu">
<li><a href="page1.htm" class="bouton1"
onmouseover="this.className='bouton_o1'; zoom();"
onmouseout="this.className='bouton_1'; zoom();">page 1 </a></li>
<li><a href="page2.htm" class="bouton2"
onmouseover="this.className='bouton_o2'; zoom();"
onmouseout="this.className='bouton_2'; zoom();">page 2 </a></li>


Est-ce que tu est allé voir l'url que j'ai donnée (10ko page + image) ?
pour voir comment on fait un roll-over en css !


--
Stephane Moriaux et son [moins] vieux Mac

snide wrote:

les images sont à la taille correspondant à la zone d'affichage,
mais n'ont pas toutes exactement la même hauteur.

elles ne sont donc pas à la *bonne* taille

<<tu n'as qu'à utiliser les css
déjà fait : les zones de fond de menus sont définies dans un style du div

donc pas de blème ... çà doit baigner !

qui constitue la ligne de menu.
j'utilise le background-image du div pour afficher un fond.

si le style est déclaré dans le div tu n'as pas de pre-chargement
mieux vaut faire avec une FdS

c'est ce div que tu rollover ? pour ne zoom-clipper que les boutons ?

De plus, si on suppose qu'une page doit fonctionner à l'identique sans
javascript, ce langage et ce newgroup n'ont plus de sens.

non, juste ne pas oublier que çà doit d'abord fonctionner sans JS

<<ma foi ... quand on peut faire compliqué, pourquoi s'en passer ?

on peut ne pas vouloir une présentation spartiate avec images à la suite.
l'apparition depuis le centre de l'image est simple à faire et rapide. le
clipping ne remet pas l'image à l'échelle, il n'en n'affiche qu'une
portion.

Bon ... pour finir ce zoom-clipage n'est peut-être pas pour le menu ?

Tout ça tient en 10 lignes de JS, pas très compliqué....

c'est sûr que c'est beaucoup plus simple qu'un roll-over standard :-)

bémol : l'effet ne devrait pouvoir commencer qu'après
chargement complet de l'image à cliper

Merci pour vos lumières

avec des infos données par bouts (sans savoir de quel truc on parle)
difficile de savoir où orienter le spot



--
Stephane Moriaux et son [moins] vieux Mac

bon... la tentative est ri.. heu visible sur
www.alsatronic.fr

ce sera peut-être plus clair.

les images des menus disparaissent au rollover, mais dans le mouseover je ne
les change pas ! juste la couleur du texte.
Je ne veux donc même pas faire un rollover avec changement d'image du bouton
!

Après passage de la souris, les images de fond des menus des entrées de
menus
disparaissent, il ne reste que les textes, et elles sont systématiquement
rechargées.

les diaporamas se trouvent sur les autres pages (page études par exemples)
les images restent coupées, au lieu de s'agrandir normalement par le
clipping.

Denis

le problème des menus est quasiment résolu.

En fait, j'avais des <a> contenant des <div>.
le simple fait de modifier la couleur de texte des div force leur
réaffichage avec rechargement du background.
en mettant les div dans les <a>, et en modifiant la couleur de texte des
<a>, le div n'est plus directement concerné et l'image de fond n'est pas
rechargée (ouf!).

il reste le problème des diaporamas, mais je pense à un problème de temps de
chargement.
Je pense, si c'est possible, synchroniser sur le onload de l'image pour
commencer l'agrandissement.

Denis

snide wrote:

bon... la tentative est ri.. heu visible sur
www.alsatronic.fr

ce sera peut-être plus clair.

Pas vraiment, c'est tellement alambiqué !

entre autres :
- pas vu de doctype sur la page
ni même de <html>
à la place on a : <%@ Language=JavaScript%>
qui s'affiche à l'écran
- le menu est tout fabriqué par JS
avec plein de tentatives de detections de navigateurs
qu'on ne sait plus trop où on en est
- avec ce menu JS, pas fastoche d'aller le rebricoller
pour qu'il fonctionne via css (image à plusieurs états)
- le menu est-il aussi dans un table ?
quand on mouseout çà ne change rien (que le mouseover qui fonctionne)
- Avec des fonctions aussi utiles que ceci :
function mover_item(nom_item) {
st=getStyle(nom_item);
if (st==null) return;
st.color=coul_texte_on
}
Sans doute pour être compatible NC4 ?
Il y a de quoi se paumer
Il y en a dans tous les sens et de tous côtés (en ext et sur la page)
Çà m'étonnerait que dans 3 mois tu t'y retrouves encore

En tous cas je suis perdu :
au moins 3 fonctions pour faire glisser un tournevis !

les images des menus disparaissent au rollover, mais dans le mouseover je ne
les change pas ! juste la couleur du texte.

Je n'ai pas eu çà

Je ne veux donc même pas faire un rollover avec changement d'image du bouton
!

... ne voyant pas ce que tu vois ...

Après passage de la souris, les images de fond des menus des entrées de
menus
disparaissent, il ne reste que les textes, et elles sont systématiquement
rechargées.

les diaporamas se trouvent sur les autres pages (page études par exemples)
les images restent coupées, au lieu de s'agrandir normalement par le
clipping.

Là il y a des images qui n'arretent pas de se recharger
(sans aucun clipping-zoom)
comment sont-elles déclarées ?
(si l'url se modifie à chaque appel, hop! çà recharge, c'est normal)

Je ne comprends même pas ce que tu veux faire, quand, pour afficher
qquels vues en boucles, il te faut 3 tableaux s'interconnectant (ou se
carrambolant) l'un l'autre :
getObjet(liste_diap[num_liste]).src=photos[num_liste][idx_image[num_liste]]

et avec tout çà où sont les photos finalement ?
Ha ! les voilà sur l'autre page
dans un tableau :
var photos=new Array;
non ce serait mieux :
var photos=new Array();
où et comment tu les précharges alors que ttes les 6 secondes
tu relances tout le schmilblik à partir de zero
(enfin ... c'est ce que je crois avoir compris ... )

Normalement on déclare les images
Img_1 = new Image(largeur,hauteur);
et on en précise la source
Img_1.src = 'dossier/fichier.jpg';
Mais cela ne nous assure pas qu'elles sont en cache
On use alors d'un outil de vérification
(celui que j'utilise : IE le comprend assez mal) qui ne necessite
absolument pas de revenir à zero
(on ne redéclare pas tout le tremblement, il faut séparer les 2)


Bref, pour résumer et pour reprendre le truc à triple arrays
(à toi de t'y retrouver dans tes multiples fonctions)

// declaration des tableaux
arrayPhotos = new Array();
arrayPhotos[0] = new Array('vue1.jpg','vue2.jpg','vue3.jpg');
arrayPhotosCache = new Array();
// declaration des vues et avec verif() mise en cache
function photosCache(n) {
arrayPhotosCache[n] = new Array();
if(document.images {
for(var i=0;i<arrayPhotos[n].length;i++) {
arrayPhotosCache[n][i] = new Image();
arrayPhotosCache[n][i].src = arrayPhotos[n][i];
}
verif(n); // c'est ici que toi tu refais partir du début
}
}
// verification de mise en cache des images (pas top pour IE)
function verif(n) {
ok=true;
for(var i=0;i<arrayPhotosCache[n].length;i++) {
if(!(arrayPhotosCache[n][i].complete)) okúlse;
}
if(!ok) setTimeout('verif('+n+')',200);
}
// initialisation du bazar-truc
function init() {
photosCache(0);
photosCache(1);
}
// post-chargement des images
onload = init;

Si le post-chargement n'est pas fini
et si le changement des vues se fait à l'aide des *.src
engrangées après chargement de la page
ce n'est pas très très grâve, des vues seront sautées aux
1ers passages, on les aura lors des boucles suivants.

Reste le clipping-zoom ...
qui, bien entendu,
devrait ne démarrer qu'à complète ouverture de l'image
(bien que ... ? )

pour définir un clip :
P { clip: rect(5px, 10px, 10px, 5px); }
or tu fais écrire :
P { clip: rect(5% 10% 10% 5%); }
où sont passées les virgules ?

pendant que tu y es : essaie que les images ne recouvrent pas le texte

--
Stephane Moriaux et son [moins] vieux Mac