begin process at 2012 05 28 12:37:58
  Trouver un code source :
 
dans
 
Accueil > 

Code

 > 

Frames

 > BEAUCOUP D'IMAGES DANS UNE SEULE PAGE.

BEAUCOUP D'IMAGES DANS UNE SEULE PAGE.


 Information sur la source

Note :
6,5 / 10 - par 6 personnes
6,50 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Frames Niveau :Débutant Date de création :29/03/2004 Date de mise à jour :29/03/2004 20:13:32 Vu :14 812

Auteur : Dark_Side

Ecrire un message privé
Commentaire sur cette source (8)
Ajouter un commentaire et/ou une note

 Description

Caser un max de photos dans une seule page : souvent un casse tête. Ce script de 13 lignes seulement vous tire de ce mauvais pas et gère même les légendes !

Source

  • // Par DarkSide sergebertet<FuckTheVirus>@voila.fr
  • // (c) 2004 Riyadh - Saoudi Arabia -
  • var prevIndex = 0;
  • var prevLayer;
  • // Nombre de photos dans la page
  • var indexMax = 10;
  • // Taille du texte de la légende
  • var textHeight = 22;
  • function top(layer) {
  • // Style du calque sous la souris
  • a = document.getElementById(layer.id).style;
  • if (prevIndex != 0) {
  • // Restitue le Z-Index du calque précédent
  • document.getElementById(prevLayer.id).style.zIndex = prevIndex;
  • // Restitue la taille du calque précédent
  • document.getElementById(prevLayer.id).style.height = parseInt(document.getElementById(prevLayer.id).style.height.replace('px',''))-textHeight+'px';
  • }
  • // Traitement du layer sous la souris
  • // Sauve le layer
  • prevLayer = layer;
  • // Sauve le Z-Index
  • prevIndex = a.zIndex;
  • // Met le layer en premier plan
  • a.zIndex = indexMax;
  • // Aggrandit le calque pour faire apparaître le texte
  • a.height = parseInt(a.height.replace('px',''))+textHeight+'px';
  • }
// Par DarkSide sergebertet<FuckTheVirus>@voila.fr
// (c) 2004 Riyadh - Saoudi Arabia - 
var prevIndex = 0;
var prevLayer;
// Nombre de photos dans la page
var indexMax = 10;
// Taille du texte de la légende
var textHeight = 22;

function top(layer) {
  // Style du calque sous la souris  
  a = document.getElementById(layer.id).style;
  if (prevIndex != 0) { 
// Restitue le Z-Index du calque précédent
  	document.getElementById(prevLayer.id).style.zIndex = prevIndex;
// Restitue la taille du calque précédent
    document.getElementById(prevLayer.id).style.height = parseInt(document.getElementById(prevLayer.id).style.height.replace('px',''))-textHeight+'px';
  }
// Traitement du layer sous la souris
// Sauve le layer
  prevLayer = layer;
// Sauve le Z-Index
  prevIndex = a.zIndex;
// Met le layer en premier plan
  a.zIndex = indexMax;
// Aggrandit le calque pour faire apparaître le texte
  a.height = parseInt(a.height.replace('px',''))+textHeight+'px';
}

 Conclusion

Pour voir ce script en action et surtout pour découvrir le code html qu'il faut utiliser  avec c'est ici : http://www.zoneserge.com/essai.html
Les curieux noteront le calque de 'loading ...' et son script permettant d'attendre que toutes les images soient arrivées avant de les afficher.
Testé avec IE6 et Mozilla 1.6 ... j'attend vos test sur d'autres navigateurs.


 Sources du même auteur

Source avec Zip Source avec une capture CALENDRIER POPUP

 Sources de la même categorie

Source avec Zip Source avec une capture DIAPORAMA SIMPLE PAR IFRAME par sartoz
Source avec une capture CHARGER UNE PAGE WEB DANS UN DIV par flk974
DYNAMIC CONTENT DANS UNE DIV par duterte
INCLUDE EN JAVASCRIPT par yousfane
Source avec Zip PASSER DE FRAMES A UNE PAGE par David78390

Commentaires et avis

Commentaire de omallet16 le 30/03/2004 07:53:23

comment tu fais pour linserer dans une page html

Commentaire de bultez le 30/03/2004 12:53:29

ça me semblait vachement bien
grâce entr'autres à
a.height = parseInt(a.height.replace('px',''))+textHeight+'px';
par exemple
et hélas, on n'a pas tous les éléments et il faut aller voir un site
c'est de la pub pour ce site ?
c'est dommage.

Commentaire de Dark_Side le 30/03/2004 17:40:34

Euh .., si c'était de la pub y'aurait des liens dans la page d'exemple, je crois.

Pour l'utilisation : copier-coller du source dans un fichier.js et insertion de &lt;script src='fichier.js&gt;&lt;/scritp&gt; dans la page html.

La page html, elle, contient des calques contenant image + texte de légende (1 seule ligne) ayant pour évènement onMouseOver="top(this);". C'est tout.

Commentaire de Dark_Side le 30/03/2004 17:40:55

Euh .., si c'était de la pub y'aurait des liens dans la page d'exemple, je crois.

Pour l'utilisation : copier-coller du source dans un fichier.js et insertion de &lt;script src='fichier.js&gt;&lt;/scritp&gt; dans la page html.

La page html, elle, contient des calques contenant image + texte de légende (1 seule ligne) ayant pour évènement onMouseOver="top(this);". C'est tout.

Commentaire de omallet16 le 30/03/2004 18:00:19

MICI

Commentaire de Cafeine911 le 06/04/2004 08:34:41

juste pour dire que si il y avait un test de visu sur http://www.javascriptfr.com/ il n'aurait pas besoin de mettre un lien pour le voir en action. Moi j'aime bien voir le script en action rapidement pour me faire une idée.

sinon très bien le code

Commentaire de roro06 le 03/12/2004 15:05:01

C'est pas de la pub, c'est un moyen de générer du trafic sur le site... Et comme aujourd'hui le lien donné est mort (erreur 404)... tant pis, une source qui ne sert plus à rien.
Je note 1 pour le principe

Commentaire de cirkooo le 08/06/2009 21:48:50

vous ne croyez pas qu'il faudrait supprimer ce lien: http://www.zoneserge.com/essai.html     je poste ici car je ne trouve pas de lien pour contacter les modérateurs.  Codes Sources aurait pu héberger cette page, pour la proposer plusieurs années de suite...

 Ajouter un commentaire




Nos sponsors


Sondage...

Comparez les prix

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir



 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 3,073 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales