Background des annonces

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

Résolu Background des annonces

Message par minitub43 le 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
****

Masculin
Messages : 306
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 le 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
+ Hyperactif +

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

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

Résolu Re: Background des annonces

Message par minitub43 le 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
****

Masculin
Messages : 306
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 le 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
+ Hyperactif +

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

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

Résolu Re: Background des annonces

Message par minitub43 le 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
****

Masculin
Messages : 306
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 le 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
+ Hyperactif +

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

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

Résolu Re: Background des annonces

Message par minitub43 le Ven 29 Mar 2013 - 19:32

Où dois-je placer le code html SVP ?

Merci

minitub43
****

Masculin
Messages : 306
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 le 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
+ Hyperactif +

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

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

Résolu Re: Background des annonces

Message par minitub43 le 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
****

Masculin
Messages : 306
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 le 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
+ Hyperactif +

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

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

Résolu Re: Background des annonces

Message par minitub43 le 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
****

Masculin
Messages : 306
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 le 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
+ Hyperactif +

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

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

Résolu Re: Background des annonces

Message par Adam_sfp le Ven 29 Mar 2013 - 20:15

Bonsoir

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


Adam_sfp
+ Hyperactif +

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

http://antonyadam.1fr1.net/portal.htm
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Background des annonces

Message par minitub43 le 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
****

Masculin
Messages : 306
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 le 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/



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
****

Masculin
Messages : 306
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 le Sam 30 Mar 2013 - 11:37

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

minitub43
****

Masculin
Messages : 306
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 le 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://i73.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://i74.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
****

Masculin
Messages : 306
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 le 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
+ Hyperactif +

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

http://antonyadam.1fr1.net/portal.htm
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Background des annonces

Message par minitub43 le Lun 1 Avr 2013 - 19:08

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://i73.servimg.com/u/f73/12/45/48/52/image_10.jpg);
}

minitub43
****

Masculin
Messages : 306
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 le 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
****

Masculin
Messages : 306
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 le 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://i73.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://i74.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
****

Masculin
Messages : 306
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 le 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
****

Masculin
Messages : 306
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