Bonjour ,

J'ai récupéré et adapter un script qui permet de prévisualiser des images dans une bulle.

Vous aurez un aperçu en passant votre souris sur les 2 premières miniatures des jeux gratuits présentés ici: http://www.voilou.fr/fiche-presentatio [...] ?jeu=Toilokdo

Le fichier javascript se trouve ici: http://www.voilou.fr/javascript/screenshot.js

Je pense que le code à modifier est celui ci-dessous:

var PreviewWindow = Class.create({
  initialize: function() {
    this.windowElement = new Element('div', {id:'tplPreview', style:'display:none; position:absolute;'});
    this.titleElement = new Element('h2', {id:'tplPreviewTitle'});
    this.imageElement = new Element('img', {id:'tplPreviewImage'});
    this.progressBarElement = new Element('div', {id:'tplPreviewProgressBar', style:'display:none;'});

    this.windowElement.insert(
      this.titleElement
    ).insert(
      new Element('div', {id:'tplPreviewBody'}).insert(
        this.imageElement
      ).insert(
        this.progressBarElement.update('Chargement de l\'apercu...')
      )
    );

document.body.appendChild(this.windowElement); 
},

  loadPreview: function(options) {
    this.titleElement.update(options.title);

    var oldImg = this.imageElement;
    this.imageElement = new Element('img', {
      id: 'tplPreviewImage',
      src: options.src,
      width: options.width,
      height: options.height
    });
    oldImg.replace(this.imageElement);

Code à insérer sur les pages:

<script type="text/javascript">
       new TemplatePreview('Arkeo', 
	{
	title:  'Aper&ccedil;u du jeu Arkeo',
	src:'images/screenjeux/jeux-toilokdo/IndianaTaupe.png', 
	width:  320,
        height: 240
	});
</script>

Je souhaiterai savoir s'il est possible de faire en sorte d'ajouter un texte en dessous de l'image (juste 2/3 lignes pour expliquer le but du jeu), et si la réponse est affirmative, comment faire?

merci pour votre aide

Essaie en faisant un truc du genre...

var PreviewWindow = Class.create({
  initialize: function() {
    this.windowElement = new Element('div', {id:'tplPreview', style:'display:none; position:absolute;'});
    this.titleElement = new Element('h2', {id:'tplPreviewTitle'});
    this.imageElement = new Element('img', {id:'tplPreviewImage'});
    this.progressBarElement = new Element('div', {id:'tplPreviewProgressBar', style:'display:none;'});
    this.texteElement = new Element('p', {id:'tplPreviewText'});

    this.windowElement.insert(
      this.titleElement
    ).insert(
      new Element('div', {id:'tplPreviewBody'}).insert(
        this.imageElement
      ).insert(
        this.texteElement
      ).insert(
        this.progressBarElement.update('Chargement de l\'apercu...')
      )
    );

document.body.appendChild(this.windowElement); 
},

  loadPreview: function(options) {
    this.titleElement.update(options.title);
    this.texteElement.update(options.texte);

    var oldImg = this.imageElement;
    this.imageElement = new Element('img', {
      id: 'tplPreviewImage',
      src: options.src,
      width: options.width,
      height: options.height
    });
    oldImg.replace(this.imageElement);

Et

<script type="text/javascript">
       new TemplatePreview('Arkeo', 
	{
	title:  'Aper&ccedil;u du jeu Arkeo',
	src:'images/screenjeux/jeux-toilokdo/IndianaTaupe.png', 
        texte: 'Le jeu consiste à faire ceci et cela',
	width:  320,
        height: 240
	});
</script>

(Code 100% NON testé )

Effectivement cela donne l'effet escompté

Merci encore pour ton aide!!!

merci encore pour tout !
Nico

Wow ! Coup de bol.

Et bien de rien...

(Et encore de rien... )