Slideshow en accordéon

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

Résolu Slideshow en accordéon

Message par Kimi Kozuma le Mer 29 Juin 2011 - 13:54

Bonjour o/

J'aimerais pourvoir faire cette slide show et la poster dans un message. Les codes sont en utilisation libre, mais je ne sais pas comment faire pour l'utiliser. Je n'arrive pas à faire l'iframe et à changer les code pour forumactif.

Voici le code html pour les vignettes et leurs descriptions
Code:
<!DOCTYPE html>
<html>
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
       
        <title>InfoGrid</title>
       
        <link rel="stylesheet" type="text/css" href="css/style.css">
       
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script type="text/javascript" src="js/infogrid.js"></script> 
</head>

<body>

    <style type="text/css" style="display: none;">.bsa_it_ad{border:0 !important;padding:6px !important;overflow:hidden !important;background:#eae3c0 !important;-moz-box-shadow:0 0 48px black;-webkit-box-shadow:0 0 48px black;box-shadow:0 0 48px black;}.bsa_it_ad a{margin:0 !important;padding:0 !important}.bsa_it_ad a img{border:0 !important;position:static !important}.bsa_it_ad a:hover img{margin:0 !important}.bsa_it_ad a:hover{background:none !important}.bsa_it_i{margin:0 15px 0 0 !important}.bsa_it_t{margin:12px 0 0 0 !important;font:16px Georgia,Serif !important}.bsa_it_d{font:11px Verdana,Helvetica,Arial,Sans-Serif;padding-right:10px}.bsa_it_p{display:none !important;}#bsap_aplink{position: absolute; color: #999; text-decoration: none; bottom:5px !important;right:5px !important;padding:0 !important}.bsa_it_p a:hover{background:none !important}</style><div id="hook-just-in-case" style="height: 77px; background: black url(/examples/images/examples-header-bg.png) repeat-x; color: white !important; font: 14px Georgia, Serif !important; position: relative; zoom: 1; width: 100% !important; z-index: 6000;"><div style="width: 960px; height: 77px; margin: 0 auto; position: relative;"><img src="/examples/images/example-logo.png" alt="Demo Page" style="position: absolute; top: 0; left: 0;"><div style="position: absolute; left: 140px; top: 52px; width: 400px; text-align: left;"><a class="header-button" href="http://css-tricks.com">← Back Home</a>  <a class="header-button" href="http://css-tricks.com/downloads/">Other Demos →</a></div><div style="width: 420px; position: absolute; right: 0; top: 0;"><div id="bsap_1255488" class="bsarocks bsap_3469a2a501a9e18091036aa0c89f9dcb"></div><a href="http://adpacks.com" id="bsap_aplink">via Ad Packs</a></div></div></div>

        <div id="page-wrap">
               
                <div class="info-col">
               
                <h2>Superman</h2>
               
                <a class="image superman" href="http://jprart.deviantart.com/art/Batman-and-Superman-64545242">View Image</a>
               
                <dl>
                  <dt>Super Power</dt>
                  <dd><a href="http://css-tricks.com">Consectetur</a> adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
    commodo consequat.</dd>
                  <dt>Costume</dt>
                  <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
    commodo consequat.</dd>
                  <dt>Morality</dt>
                  <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
    commodo consequat.</dd>
                  <dt>Sidekicks</dt>
                  <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
    commodo consequat.</dd>
                  <dt>Vehicles</dt>
                  <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
    commodo consequat.</dd>
                  <dt>Weaknesses</dt>
                  <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
    commodo consequat.</dd>
                </dl>
               
                </div>
               
        <div class="info-col">
       
                <h2>Batman</h2>
               
                <a class="image batman" href="http://jprart.deviantart.com/">View Image</a>
               
                <dl>
                  <dt>Super Power</dt>
                  <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
        aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat.</dd>
                  <dt>Costume</dt>
                  <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
        aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat.</dd>
                  <dt>Morality</dt>
                  <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
        aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat.</dd>
                  <dt>Sidekicks</dt>
                  <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
        aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat.</dd>
                  <dt>Vehicles</dt>
                  <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
        aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat.</dd>
                  <dt>Weaknesses</dt>
                  <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
        aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat.</dd>
                </dl>
       
        </div>
               
                <div class="info-col">
               
                <h2>Aquaman</h2>
               
            <a class="image aquaman" href="http://www.deviantart.com/print/8342014/">View Image</a>
               
                <dl>
                  <dt id="starter">Super Power</dt>
                  <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
    commodo consequat.</dd>
                  <dt>Costume</dt>
                  <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
    commodo consequat.</dd>
                  <dt>Morality</dt>
                  <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
    commodo consequat.</dd>
                  <dt>Sidekicks</dt>
                  <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
    commodo consequat.</dd>
                  <dt>Vehicles</dt>
                  <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
    commodo consequat.</dd>
                  <dt>Weaknesses</dt>
                  <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
    commodo consequat.</dd>
                </dl>
               
                </div>
               
                <div class="info-col">
               
                <h2>Spiderman</h2>
               
            <a class="image spiderman" href="http://eldelgado.deviantart.com/">View Image</a>
               
                <dl>
                  <dt>Super Power</dt>
                  <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
    commodo consequat.</dd>
                  <dt>Costume</dt>
                  <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
    commodo consequat.</dd>
                  <dt>Morality</dt>
                  <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
    commodo consequat.</dd>
                  <dt>Sidekicks</dt>
                  <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
    commodo consequat.</dd>
                  <dt>Vehicles</dt>
                  <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
    commodo consequat.</dd>
                  <dt>Weaknesses</dt>
                  <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
    commodo consequat.</dd>
                </dl>
               
                </div>
               
                <div class="info-col">
               
                <h2>Ironman</h2>
               
            <a class="image ironman" href="http://diablo2003.deviantart.com/">View Image</a>
               
                <dl>
                  <dt>Super Power</dt>
                  <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
    commodo consequat.</dd>
                  <dt>Costume</dt>
                  <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
    commodo consequat.</dd>
                  <dt>Morality</dt>
                  <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
    commodo consequat.</dd>
                  <dt>Sidekicks</dt>
                  <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
    commodo consequat.</dd>
                  <dt>Vehicles</dt>
                  <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
    commodo consequat.</dd>
                  <dt>Weaknesses</dt>
                  <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
    commodo consequat.</dd>
                </dl>
               
                </div>
                       
        </div>
       
       
</body>

</html>

voici le code css
Code:
 /*
    CSS-Tricks Example
    by Chris Coyier
    http://css-tricks.com
*/

* { margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; background: #eee; }
body { font: 14px Georgia, serif; }
#page-wrap { width: 960px; padding: 0 0 0 15px; margin: 0 auto; overflow: hidden; height: 100%; }

.info-col { float: left; width: 132px; height: 100%; padding: 50px 0 0 0; }
.info-col h2 { text-align: center; font-weight: normal; padding: 25px 0; }

.image { height: 100px; text-indent: -9999px; display: block; border-right: 1px solid white; }

.batman { background: url(../images/batman.jpg) center center no-repeat; }
.spiderman { background: url(../images/spiderman.jpg) center center no-repeat; }
.aquaman { background: url(../images/aquaman.jpg) center center no-repeat; }
.ironman { background: url(../images/ironman.jpg) center center no-repeat; }
.superman { background: url(../images/superman.jpg) center center no-repeat; }

dt { padding: 5px; background: #900; color: white; border-bottom: 1px solid white; border-right: 1px solid white; }
dd { position: absolute; left: -9999px; top: -9999px; width: 299px; background: #900; padding: 10px; color: white; border-right: 1px solid white; }

dt:nth-of-type(1) { background: #b44835; }
dd:nth-of-type(1) { background: #b44835; }

dt:nth-of-type(2) { background: #ff7d3e; }
dd:nth-of-type(2) { background: #ff7d3e; }

dt:nth-of-type(3) { background: #ffb03b; }
dd:nth-of-type(3) { background: #ffb03b; }

dt:nth-of-type(4) { background: #c2a25c; }
dd:nth-of-type(4) { background: #c2a25c; }

dt:nth-of-type(5) { background: #4c443c; }
dd:nth-of-type(5) { background: #4c443c; }

dt:nth-of-type(6) { background: #656b60; }
dd:nth-of-type(6) { background: #656b60; }

.curCol { -moz-box-shadow: 0 0 10px rgba(0,0,0,0.2); -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.2); z-index: 1; position: relative; }

merci d'avance o/


Dernière édition par Kimi Kozuma le Mer 29 Juin 2011 - 20:54, édité 1 fois

Kimi Kozuma
****

Messages : 245
Inscrit(e) le : 03/06/2009

http://setmybodyfree.forumactif.fr/
Kimi Kozuma a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Slideshow en accordéon

Message par Adam_sfp le Mer 29 Juin 2011 - 14:25

Bonjour

Il faut déjà commencer par essayer de le faire fonctionner dans une page HTML.

Il faut héberger et mettre le lien correspondant pour le CSS (votre 2ème code)

et ensuite le mettre dans cette ligne (de votre premier code):

Code:
  <link rel="stylesheet" type="text/css" href="ICI VOTRE CSS HEBERGE">

faire de même avec le javascript : infogrid.js il faut l'héberger au format js

et mettre le lien dans la ligne correspondante

Code:
<script type="text/javascript" src="LE LIEN VERS infogrid.js"></script> 

*Cela ne fonctionnera pas dans un post (les scripts sont désactivés dans les messages ).
à moins de le mettre en Iframe.



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: Slideshow en accordéon

Message par Kimi Kozuma le Mer 29 Juin 2011 - 14:49

Ben c'est justement ce que je veux faire! Mettre tout ça dans une iFrame, mais je ne sais pas comment faire.

Kimi Kozuma
****

Messages : 245
Inscrit(e) le : 03/06/2009

http://setmybodyfree.forumactif.fr/
Kimi Kozuma a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Slideshow en accordéon

Message par Adam_sfp le Mer 29 Juin 2011 - 15:57

Bonjour

Vous ne savez pas comment faire pour:

Que le code fonctionne?
Pour le mettre en iframe?


Quand votre code fonctionne dans une page html.

Vous pouvez l'insérez ensuite de cette manière
Code:
<iframe src="votre adresse page.html" width="largeur" height="hauteur" frameborder="0" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>

En changeant avec l'adresse de votre page ainsi que mettre vos tailles.

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: Slideshow en accordéon

Message par Kimi Kozuma le Mer 29 Juin 2011 - 16:02

Je ne sais pas comment faire pour que le code fonctionne. J'ai mis tout ça dans une page html. Mais ça ne marche pas. ;o;

Kimi Kozuma
****

Messages : 245
Inscrit(e) le : 03/06/2009

http://setmybodyfree.forumactif.fr/
Kimi Kozuma a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Slideshow en accordéon

Message par Adam_sfp le Mer 29 Juin 2011 - 16:04

Bonjour

Vous avez hébergé le CSS et le javascript les liens images etc..?

Sinon collez tout votre code modifié ici

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: Slideshow en accordéon

Message par Kimi Kozuma le Mer 29 Juin 2011 - 16:09

Héberger quoi ? Comment on fait ça ? O.O

Kimi Kozuma
****

Messages : 245
Inscrit(e) le : 03/06/2009

http://setmybodyfree.forumactif.fr/
Kimi Kozuma a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Slideshow en accordéon

Message par Adam_sfp le Mer 29 Juin 2011 - 16:18

Bonjour


Et bien vous ne pouvez pas récupérer un code comme ça le prendre le coller utiliser les mêmes images etc...et que cela fonctionne de suite...

Il faut modifier les textes et les images par les votres et donc hébergés celle ci.

Il faut aussi héberger le script infogrid.js le Css .
vous pouvez héberger tout ça chez archive host par exemple.

Et ensuite remplacer les différents liens par les vôtres.

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: Slideshow en accordéon

Message par Kimi Kozuma le Mer 29 Juin 2011 - 16:40

Voilà, j'ai hébergé, je dois donner les liens de tout ça ? Et vous parlez de quel code modifié ?

Kimi Kozuma
****

Messages : 245
Inscrit(e) le : 03/06/2009

http://setmybodyfree.forumactif.fr/
Kimi Kozuma a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Slideshow en accordéon

Message par Adam_sfp le Mer 29 Juin 2011 - 17:56

Bonjour

Il faut remplacer les différents liens du code que vous donnez dans votre premier message: images css et javascript par les votres que vous avez hébergés

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: Slideshow en accordéon

Message par Kimi Kozuma le Mer 29 Juin 2011 - 18:04

ça ne marche toujours pas.

Kimi Kozuma
****

Messages : 245
Inscrit(e) le : 03/06/2009

http://setmybodyfree.forumactif.fr/
Kimi Kozuma a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Slideshow en accordéon

Message par Adam_sfp le Mer 29 Juin 2011 - 18:13

Bonjour

Pouvez vous poster votre code que vous avez modifié ici?

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: Slideshow en accordéon

Message par Kimi Kozuma le Mer 29 Juin 2011 - 18:22

Code:
<iframe src="http://butterfly.forumactif.fr/h1-infogrid" width="100%" height="100%" frameborder="0" border="0" marginwidth="0" marginheight="0" scrolling="no">
<link rel="stylesheet" type="text/css" href="http://www.archive-host.com/files/1090975/dba23ec3d70d62420740d4cf0b20a5d2de43d676/style.css"> <script type="text/javascript" src="http://www.archive-host.com/files/1090859/dba23ec3d70d62420740d4cf0b20a5d2de43d676/infogrid.js"></script>  </iframe>

Kimi Kozuma
****

Messages : 245
Inscrit(e) le : 03/06/2009

http://setmybodyfree.forumactif.fr/
Kimi Kozuma a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Slideshow en accordéon

Message par Adam_sfp le Mer 29 Juin 2011 - 20:05

Bonsoir

Il ne faut pas l'insérer comme ceci.

et avant de l'insérer en iframe il faut être sur que le code fonctionne dans la page HTML ce qui n'est pas le cas.
Il faut aussi modifier le CSS et mettre les liens vers les images car ceci ne peut pas fonctionner .
Par exemple



Code:
.batman { background: url(../images/batman.jpg) center center no-repeat; }

Il faut

Code:
.batman { background: url(ICI LE LIEN DE L'IMAGE HEBERGE) center center no-repeat; }

Voila ensuite le code avec le rajout de votre javascript il faudra changer le lien du CSS par le votre modifié.

Code:
<!DOCTYPE html>
    <html>
    <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
         
            <title>InfoGrid</title>
         
            <link rel="stylesheet" type="text/css" href="ICI LE LIEN DE VOTRE CSS">
         
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
        <script type="text/javascript" src="http://www.archive-host.com/files/1090859/dba23ec3d70d62420740d4cf0b20a5d2de43d676/infogrid.js"></script>
    </head>

    <body>

       

            <div id="page-wrap">
                 
                    <div class="info-col">
                 
                    <h2>Superman</h2>
                 
                    <a class="image superman" href="http://jprart.deviantart.com/art/Batman-and-Superman-64545242">View Image</a>
                 
                    <dl>
                      <dt>Super Power</dt>
                      <dd><a href="http://css-tricks.com">Consectetur</a> adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
        aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat.</dd>
                      <dt>Costume</dt>
                      <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
        aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat.</dd>
                      <dt>Morality</dt>
                      <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
        aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat.</dd>
                      <dt>Sidekicks</dt>
                      <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
        aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat.</dd>
                      <dt>Vehicles</dt>
                      <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
        aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat.</dd>
                      <dt>Weaknesses</dt>
                      <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
        aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat.</dd>
                    </dl>
                 
                    </div>
                 
            <div class="info-col">
         
                    <h2>Batman</h2>
                 
                    <a class="image batman" href="http://jprart.deviantart.com/">View Image</a>
                 
                    <dl>
                      <dt>Super Power</dt>
                      <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
            aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
            commodo consequat.</dd>
                      <dt>Costume</dt>
                      <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
            aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
            commodo consequat.</dd>
                      <dt>Morality</dt>
                      <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
            aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
            commodo consequat.</dd>
                      <dt>Sidekicks</dt>
                      <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
            aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
            commodo consequat.</dd>
                      <dt>Vehicles</dt>
                      <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
            aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
            commodo consequat.</dd>
                      <dt>Weaknesses</dt>
                      <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
            aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
            commodo consequat.</dd>
                    </dl>
         
            </div>
                 
                    <div class="info-col">
                 
                    <h2>Aquaman</h2>
                 
                <a class="image aquaman" href="http://www.deviantart.com/print/8342014/">View Image</a>
                 
                    <dl>
                      <dt id="starter">Super Power</dt>
                      <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
        aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat.</dd>
                      <dt>Costume</dt>
                      <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
        aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat.</dd>
                      <dt>Morality</dt>
                      <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
        aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat.</dd>
                      <dt>Sidekicks</dt>
                      <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
        aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat.</dd>
                      <dt>Vehicles</dt>
                      <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
        aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat.</dd>
                      <dt>Weaknesses</dt>
                      <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
        aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat.</dd>
                    </dl>
                 
                    </div>
                 
                    <div class="info-col">
                 
                    <h2>Spiderman</h2>
                 
                <a class="image spiderman" href="http://eldelgado.deviantart.com/">View Image</a>
                 
                    <dl>
                      <dt>Super Power</dt>
                      <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
        aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat.</dd>
                      <dt>Costume</dt>
                      <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
        aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat.</dd>
                      <dt>Morality</dt>
                      <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
        aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat.</dd>
                      <dt>Sidekicks</dt>
                      <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
        aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat.</dd>
                      <dt>Vehicles</dt>
                      <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
        aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat.</dd>
                      <dt>Weaknesses</dt>
                      <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
        aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat.</dd>
                    </dl>
                 
                    </div>
                 
                    <div class="info-col">
                 
                    <h2>Ironman</h2>
                 
                <a class="image ironman" href="http://diablo2003.deviantart.com/">View Image</a>
                 
                    <dl>
                      <dt>Super Power</dt>
                      <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
        aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat.</dd>
                      <dt>Costume</dt>
                      <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
        aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat.</dd>
                      <dt>Morality</dt>
                      <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
        aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat.</dd>
                      <dt>Sidekicks</dt>
                      <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
        aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat.</dd>
                      <dt>Vehicles</dt>
                      <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
        aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat.</dd>
                      <dt>Weaknesses</dt>
                      <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
        aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat.</dd>
                    </dl>
                 
                    </div>
                         
            </div>
         
         
    </body>

    </html>

Il faut donc modifier le CSS en mettant les liens vers les différentes images superman batman ironman etc...
hébergez ensuite de nouveau ce CSS modifié et insérez le dans le code que je vous donne en remplaçant ICI LE LIEN DE VOTRE CSS
Code:
<link rel="stylesheet" type="text/css" href="ICI LE LIEN DE VOTRE CSS">
par votre lien du CSS.

puis testez si cela fonctionne dans la page html en prévisualisation.

*Vous pouvez essayer avec vos images en 320*100 de taille


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: Slideshow en accordéon

Message par Kimi Kozuma le Mer 29 Juin 2011 - 20:53

ça marche ! Merci beaucoup beaucoup *^*

Kimi Kozuma
****

Messages : 245
Inscrit(e) le : 03/06/2009

http://setmybodyfree.forumactif.fr/
Kimi Kozuma 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