Background des annonces

[minitub43]

Bonjour

Est il possible de faire en sorte que le background du bandeau des annonces soit constitué d'une succession d'images individuelles de façon à pouvoir les remplacer individuellement et que l'ensemble puisse se déplacer en boucle de gauche à droite ?

Si oui comment faire ?

Voici pour exemple ce que nous souhaiterions obtenir:
http://jsfiddle.net/Lcmuk/18/

Merci de votre aide

[Scipion]

Bonjour

Faites un test avec ce code :

Code:

<table style="background-image: url(http://i70.servimg.com/u/f70/13/94/72/47/53200010.jpg);                      width:800px;;border-width:2px;border-style:ridge; padding:5px;border-color:#6E0B14;margin-left:auto;margin-right:auto;border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px; -webkit-border-radius: 10px; -htm-border-radius: 10px;">
<tr><td align="left" vertical-align="middle">
<marquee direction="right" scrollDelay="1" scrollAmount="1">
<img src="http://i69.servimg.com/u/f69/17/89/69/95/images10.jpg" border="0" alt="" />
<img src="http://i69.servimg.com/u/f69/17/89/69/95/images11.jpg" border="0" alt="" />
</marquee>
</td></tr>></table>

Cordialement

[minitub43]

Merci beaucoup Scipion

Première étape résolue, je viens de le mettre pour essai sur notre forum.
Avant de continuer, est-il possible le mettre cette fonctionnalité en guise de fond pour les annonces défilantes à la place de ce code dans le CSS :

/***** pour modifier le fond des annonces defilantes ****/
#fa_ticker_container {
background-image:url(http://mon_image_de_fond.jpg);
}

Merci

[Scipion]

Alors voici un exemple :

Installer ce code CSS et valider :

Code:

/***** pour modifier le fond des annonces defilantes ****/
#fa_ticker_container {
background-image:url(http://i69.servimg.com/u/f69/17/89/69/95/39777910.jpg);
}

Dans options générales des annonces :

Hauteur de la zone d'annonces (en pixels) = 238px
Enregistrer

Cordialement

[minitub43]

Merci mais ce code est exactement le même que celui que j'ai indiqué dans mon message précédent.

Je demandais s'il était possible de reproduire en background dans les annonces défilantes la même présentation que celle donnée dans le code html plus haut.

Nous souhaiterions que ce background puisse être composé d'images individuelles accolées les unes aux autres sans espace, le tout défilant de gauche à droite.

Les annonces essentiellement composées de gifs transparents venant ensuite sur superposer au background.

Le but étant d'obtenir en final des gifs animés sur un décor défilant dont ou il sera possible de remplacer certains éléments sans avoir un refaire tout un bandeau.

Merci

[Scipion]

Faites un nouveau test :

Le code CSS

Code:

/***** pour modifier le fond des annonces defilantes ****/
#fa_ticker_container {
background-image:url(http://i70.servimg.com/u/f70/13/94/72/47/53200010.jpg);
}

Le code Html

Code:

<br><br><td align="left" vertical-align="middle">
<table width:800px;;border-width:2px;border-style:ridge; padding:5px;border-color:#6E0B14;margin-left:auto;margin-right:auto;border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px; -webkit-border-radius: 10px; -htm-border-radius: 10px;">
<marquee direction="right" scrollDelay="1" scrollAmount="1">
<img src="http://i69.servimg.com/u/f69/17/89/69/95/images10.jpg" border="0" alt="" />
<img src="http://i69.servimg.com/u/f69/17/89/69/95/images11.jpg" border="0" alt="" />
</marquee>

</table></td>

Cordialement

[minitub43]

Où dois-je placer le code html SVP ?

Merci

[Scipion]

Le code Html doit être installé dans l'annonce défilante mais avant il faut remplacer les deux images par vos propres images animées. Pour l'exemple j'ai placé 2 images, cependant vous pouvez rajouter autant d'images animées que vous le souhaitez en utilisant toujours ce code à la suite des premières images :

Code:

<img src="URL de l'image gif" border="0" alt="" />

Pour centrer verticalement les images dans l'ensemble, vous aurez à modifier la Hauteur de la zone d'annonces (en pixels).

Cordialement

[minitub43]

Merci beaucoup pour le mal que vous vous donnez mais j'ai du mal me faire comprendre car nous utilisons déjà actuellement ce principe, voir ici:

http://www.forum-minitub43.com/

Tout en concernant ce principe, nous souhaiterions que notre background ne soit pas qu'une simple image panoramique fixe comme actuellement (ou votre fond bleu) mais composé de plusieurs images placées cote à cote sans espace et que cet ensemble d'images puisse défiler en boucle en sens inverse des images placées dans les annonces.

[Scipion]

D'accord, j'ai bien compris votre préoccupation mais croyez-moi ce n'est pas facile à obtenir et je me demande même si le projet est réalisable. Toujours est-il que nous devons continuer à rechercher la solution idoine.

Cordialement

[minitub43]

On va y arriver.
C'est la raison pour laquelle je persiste en essayant de me rabattre sur la possibilité qu'offre l'outil " Message sur la page d'accueil " autorisant le html. Faut-il encore savoir traduire notre souhait en langage html.

[Scipion]

Très bien, maintenant c'est encore plus clair. Le message d'accueil constitue donc votre deuxième option. J'espère qu'on y arrivera.

Cordialement

[Adam_sfp]

Bonsoir

Pas sur de tout comprendre mais peut être cet effet
http://www.spritely.net/

[minitub43]

On va y arriver.
C'est la raison pour laquelle je persiste en essayant de me rabattre sur la possibilité qu'offre l'outil " Message sur la page d'accueil " autorisant le html. Faut-il encore savoir traduire notre souhait en langage html.

Non pas le message d'acceuil, le Message sur la page d'accueil :
PA > Affichage > Généralités > En bas : Message sur la page d'accueil
Ne pas confondre.

[minitub43]

Bonsoir

Pas sur de tout comprendre mais peut être cet effet
http://www.spritely.net/

Oui c'est tout à fait cela bravo.

Sauf que l'image de fond serait une succession d'images placées cote à cote sans espace afin de changer une partie du fond à la demande.

Merci pour cette découverte.

[minitub43]

Bon voila maintenant que je patauge avec jQuery.spritely quelqu'un pourrait-il nous aider SVP ?

[minitub43]

Bonjour, j'ai énormément progressé.

J'ai énormément avancé. Manque de chance ou de savoir, les 2 gifs animés sont en dessous du bandeau et non au-dessus.

Voici le résultat :

http://www.minitub43.com/Bandeau/band1.html

Si maintenant quelqu'un pouvait me dire comment faire pour remplacer ce code dans mon CSS :

#fa_ticker_container {
background-image:url(https://i.servimg.com/u/f73/12/45/48/52/image_10.jpg);
}

Par ceci (si c'est faisable) :

-------------------------------------------------------------

<html xml:lang="fr">
<head>
<title>Essai</title>

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

/* Text and/or Image Crawler Script v1.53 (c)2009-2011 John Davenport Scheuer
as first seen in http://www.dynamicdrive.com/forums/
username: jscheuer1 - This Notice Must Remain for Legal Use
*/

</script>

<div class="marquee" id="mycrawler2">

<img src="http://www.phsconseils.com/Bandeau/pharmacie.gif" />
<img src="http://www.phsconseils.com/Bandeau/comptoir.gif" />

</div>

<script type="text/javascript">
marqueeInit({
uniqueid: 'mycrawler2',
style: {
'padding': '2px',
'width': '1800px',
'height': '433px'
},
inc: 5, //speed - pixel increment for each iteration of this marquee's movement
mouse: 'cursor driven', //mouseover behavior ('pause' 'cursor driven' or false)
moveatleast: 2,
neutral: 600,
direction: 'right',
savedirection: true,
random: true
});
</script>

<img style="padding: 4px; border: 0px; width: 165px; height: 91px; margin:-40px 0px 0px 500px;
" src= "https://i.servimg.com/u/f74/17/92/24/88/red52e10.gif" /></img>

<img style="padding: 4px; border: 0px; width: 232px; height: 115px; margin:-80px 0px 0px 100px;
" src= "http://reduction-image.com/gif-anime/temp/431910001364148536.gif" /></img>

</head>

<body>
</body>
</html>

-------------------------------------------------------------

Encore merci

[Adam_sfp]

Bonjour

vous pouvez essayer

Code:

<img style=" position:absolute;
left:50px;
top:360px;border: 0px; width: 165px; height: 91px;
" src= "http://i74.servimg.com/u/f74/17/92/24/88/red52e10.gif" /></img>

Cordialement.

[minitub43]

C'est tout à fait cela.

Voir ici le résultat
http://www.minitub43.com/Bandeau/band3.html

Dernière question, est-il possible d'afficher seulement le bandeau dans le CSS à la place de ceci:

/***** pour modifier le fond des annonces defilantes ****/

#fa_ticker_container {
background-image:url(https://i.servimg.com/u/f73/12/45/48/52/image_10.jpg);
}

[minitub43]

Avec pas mal de cogitation et d'essais plus ou moins réussis, j'ai fini par trouver comment faire grâce aux iframes dont je ne connaissais pas l'existence.

Dernier tout petit détail, parfaire le raccord entre le début et la fin de la boucle ? Il y a quelques pixels de jeu que j'aimerais effacer.

[minitub43]

Bonjour, j'ai énormément progressé.

J'ai énormément avancé. Manque de chance ou de savoir, les 2 gifs animés sont en dessous du bandeau et non au-dessus.

Voici le résultat :

http://www.minitub43.com/Bandeau/band1.html

Si maintenant quelqu'un pouvait me dire comment faire pour remplacer ce code dans mon CSS :

#fa_ticker_container {
background-image:url(https://i.servimg.com/u/f73/12/45/48/52/image_10.jpg);
}

Par ceci (si c'est faisable) :

-------------------------------------------------------------

<html xml:lang="fr">
<head>
<title>Essai</title>

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

</script>

<div class="marque" id="mycrawler2">

<img src="http://www.phsconseils.com/Bandeau/pharmacie.gif" />
<img src="http://www.phsconseils.com/Bandeau/comptoir.gif" />

</div>

<script type="text/javascript">
marqueeInit({
uniqueid: 'mycrawler2',
style: {
'padding': '2px',
'width': '1800px',
'height': '433px'
},
inc: 5, //speed - pixel increment for each iteration of this marquee's movement
mouse: 'cursor driven', //mouseover behavior ('pause' 'cursor driven' or false)
moveatleast: 2,
neutral: 600,
direction: 'right',
savedirection: true,
random: true
});
</script>

<img style="pading: 4px; border: 0px; width: 165px; height: 91px; margin:-40px 0px 0px 500px;
" src= "https://i.servimg.com/u/f74/17/92/24/88/red52e10.gif" /></img>

<img style="pading: 4px; border: 0px; width: 232px; height: 115px; margin:-80px 0px 0px 100px;
" src= "http://reduction-image.com/gif-anime/temp/431910001364148536.gif" /></img>

</head>

<body>
</body>
</html>

-------------------------------------------------------------

Encore merci

[minitub43]

J'ai réglé le problème en jouant sur le background.
Si vous souhaitez voir le résultat final, c'est ici :
http://www.forum-minitub43.com/

Un grand merci à Scipion et à Adam_sfp