Background des annonces

3 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Background des annonces

Message par minitub43 Ven 29 Mar 2013 - 13:56

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


Dernière édition par minitub43 le Mar 2 Avr 2013 - 14:33, édité 1 fois
minitub43

minitub43
****

Masculin
Messages : 310
Inscrit(e) le : 16/01/2009

http://minitub43.forumactif.com
minitub43 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Background des annonces

Message par Scipion Ven 29 Mar 2013 - 15:52

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
Scipion

Scipion
Membre actif

Masculin
Messages : 8655
Inscrit(e) le : 03/02/2010

https://forum.forumactif.com/
Scipion a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Background des annonces

Message par minitub43 Ven 29 Mar 2013 - 17:50

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
minitub43

minitub43
****

Masculin
Messages : 310
Inscrit(e) le : 16/01/2009

http://minitub43.forumactif.com
minitub43 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Background des annonces

Message par Scipion Ven 29 Mar 2013 - 18:22

Alors voici un exemple :

Like a Star @ heaven 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 :

Like a Star @ heaven Hauteur de la zone d'annonces (en pixels) = 238px
Like a Star @ heaven Enregistrer

Cordialement
Scipion

Scipion
Membre actif

Masculin
Messages : 8655
Inscrit(e) le : 03/02/2010

https://forum.forumactif.com/
Scipion a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Background des annonces

Message par minitub43 Ven 29 Mar 2013 - 18:45

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
minitub43

minitub43
****

Masculin
Messages : 310
Inscrit(e) le : 16/01/2009

http://minitub43.forumactif.com
minitub43 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Background des annonces

Message par Scipion Ven 29 Mar 2013 - 19:01

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
Scipion

Scipion
Membre actif

Masculin
Messages : 8655
Inscrit(e) le : 03/02/2010

https://forum.forumactif.com/
Scipion a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Background des annonces

Message par minitub43 Ven 29 Mar 2013 - 19:32

Où dois-je placer le code html SVP ?

Merci
minitub43

minitub43
****

Masculin
Messages : 310
Inscrit(e) le : 16/01/2009

http://minitub43.forumactif.com
minitub43 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Background des annonces

Message par Scipion Ven 29 Mar 2013 - 19:41

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
Scipion

Scipion
Membre actif

Masculin
Messages : 8655
Inscrit(e) le : 03/02/2010

https://forum.forumactif.com/
Scipion a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Background des annonces

Message par minitub43 Ven 29 Mar 2013 - 19:55

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.
minitub43

minitub43
****

Masculin
Messages : 310
Inscrit(e) le : 16/01/2009

http://minitub43.forumactif.com
minitub43 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Background des annonces

Message par Scipion Ven 29 Mar 2013 - 20:02

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
Scipion

Scipion
Membre actif

Masculin
Messages : 8655
Inscrit(e) le : 03/02/2010

https://forum.forumactif.com/
Scipion a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Background des annonces

Message par minitub43 Ven 29 Mar 2013 - 20:11

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.
minitub43

minitub43
****

Masculin
Messages : 310
Inscrit(e) le : 16/01/2009

http://minitub43.forumactif.com
minitub43 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Background des annonces

Message par Scipion Ven 29 Mar 2013 - 20:14

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. Smile

Cordialement
Scipion

Scipion
Membre actif

Masculin
Messages : 8655
Inscrit(e) le : 03/02/2010

https://forum.forumactif.com/
Scipion a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Background des annonces

Message par Adam_sfp Ven 29 Mar 2013 - 20:15

Bonsoir

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

Adam_sfp

Adam_sfp
Membre actif

Masculin
Messages : 4465
Inscrit(e) le : 18/04/2008

http://antonyadam.kanak.fr
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Background des annonces

Message par minitub43 Ven 29 Mar 2013 - 20:43

minitub43 a écrit: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

minitub43
****

Masculin
Messages : 310
Inscrit(e) le : 16/01/2009

http://minitub43.forumactif.com
minitub43 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Background des annonces

Message par minitub43 Ven 29 Mar 2013 - 20:49

Adam_sfp a écrit:Bonsoir

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

Background des annonces 3563782329

Oui c'est tout à fait cela bravo. Background des annonces 1408441462

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

minitub43
****

Masculin
Messages : 310
Inscrit(e) le : 16/01/2009

http://minitub43.forumactif.com
minitub43 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Background des annonces

Message par minitub43 Sam 30 Mar 2013 - 11:37

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

minitub43
****

Masculin
Messages : 310
Inscrit(e) le : 16/01/2009

http://minitub43.forumactif.com
minitub43 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Background des annonces

Message par minitub43 Lun 1 Avr 2013 - 17:53

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. Crying or Very sad

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
minitub43

minitub43
****

Masculin
Messages : 310
Inscrit(e) le : 16/01/2009

http://minitub43.forumactif.com
minitub43 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Background des annonces

Message par Adam_sfp Lun 1 Avr 2013 - 18:06

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.
Adam_sfp

Adam_sfp
Membre actif

Masculin
Messages : 4465
Inscrit(e) le : 18/04/2008

http://antonyadam.kanak.fr
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Background des annonces

Message par minitub43 Lun 1 Avr 2013 - 19:08

Background des annonces 2120421403 C'est tout à fait cela. Background des annonces 1408441462

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

minitub43
****

Masculin
Messages : 310
Inscrit(e) le : 16/01/2009

http://minitub43.forumactif.com
minitub43 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Background des annonces

Message par minitub43 Mar 2 Avr 2013 - 11:18

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

minitub43
****

Masculin
Messages : 310
Inscrit(e) le : 16/01/2009

http://minitub43.forumactif.com
minitub43 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Background des annonces

Message par minitub43 Mar 2 Avr 2013 - 14:31

minitub43 a écrit: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. Crying or Very sad

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

minitub43
****

Masculin
Messages : 310
Inscrit(e) le : 16/01/2009

http://minitub43.forumactif.com
minitub43 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Background des annonces

Message par minitub43 Mar 2 Avr 2013 - 14:32

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
minitub43

minitub43
****

Masculin
Messages : 310
Inscrit(e) le : 16/01/2009

http://minitub43.forumactif.com
minitub43 a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum