lien dans une page d'une présentation accordeon

3 participants

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

Résolu lien dans une page d'une présentation accordeon

Message par emc2 Mer 4 Avr 2012 - 22:51

Bonsoir,

J'ai vu sur forum très bien présenté que l'on pouvais inclure un lien dans les image qui compose une présentation en accordéon. En cliquant dessus, cela nous emmène sur une autre page. Ma question, comment peut-on inclure un lien sur chaque image dans le html de l'accordéon ?
J'ai vu aussi que l'on pouvais modifier la hauteur de l'accordéon, quels sont les paramètres à modifier pour faire cela ?

Merci à vous.


Dernière édition par emc2 le Ven 6 Avr 2012 - 0:04, édité 1 fois
emc2

emc2
*****

Messages : 555
Inscrit(e) le : 30/09/2011

http://sainte-croix.forumgratuit.org/
emc2 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: lien dans une page d'une présentation accordeon

Message par Matriochka Jeu 5 Avr 2012 - 10:46

Bonjour,

Quel est votre code actuel, concernant cette accordéon ? Serait-il possible d’avoir également une capture d’écran de l’élément concerné par votre requête ainsi qu’un lien vers le forum concerné ?

Merci par avance
avatar

Matriochka
Membre actif

Messages : 7604
Inscrit(e) le : 14/07/2010

Matriochka a été remercié(e) par l'auteur de ce sujet.

Résolu Re: lien dans une page d'une présentation accordeon

Message par hd-fred Jeu 5 Avr 2012 - 12:50

Bonjour

Pour mette un lien sur une image, il faut mettre une balise "img" entre une "a" qui te permet d'écrire un hyper lien.

comme ceci

Code:
<a href="adresse du lien"><img src="adresse de l'image"></a>

quand à la hauteur de l’accordéon, une modif css, du "heigth" sur la "class" ou "id" en question règlera la question.


@ plus et bonne aprem
hd-fred

hd-fred
**

Masculin
Messages : 68
Inscrit(e) le : 18/03/2010

http://www.forum-generationmobiles.net/
hd-fred a été remercié(e) par l'auteur de ce sujet.

Résolu Re: lien dans une page d'une présentation accordeon

Message par emc2 Jeu 5 Avr 2012 - 23:15

Bonsoir,
voici le code de ma présentation accordéon. Je souhaiterais y glisser un lien sur chaque volet. Le lien du site, http://vote-archives.forumgratuit.org/ et le site que j'utilise pour mes essais et mise au point avant de les mettre sur les forums que j'administre.

Code:
<div id="accordeon-pa" class="accordion">
    <ol>
        <li>
            <h2><span>La commune</span></h2>
            <div>
              <figure>
                <img class="full" src="http://i49.servimg.com/u/f49/17/19/42/30/accord16.jpg" alt="image" /> 
              </figure>
            </div>
        </li>
        <li>
            <h2><span>L' U.H.P.</span></h2>
            <div>
              <figure>
                <img class="full" src="http://i49.servimg.com/u/f49/17/19/42/30/accord19.jpg" alt="image" />
              </figure>
            </div>
        </li>
        <li>
            <h2><span>L' A.F.N.</span></h2>
            <div>
              <figure>
                <img class="full" src="http://i49.servimg.com/u/f49/17/19/42/30/accord17.jpg" alt="image" />
              </figure>
            </div>
        </li>
        <li>
            <h2><span>Le P.A.N.</span></h2>
            <div>
              <figure>
                <img class="full" src="http://i49.servimg.com/u/f49/17/19/42/30/accord18.jpg" alt="image" />
              </figure>
            </div>
        </li>
        <li>
            <h2><span>Maison Royale</span></h2>
            <div>
              <figure>
                <img class="full" src="http://i49.servimg.com/u/f49/17/19/42/30/accord20.jpg" alt="image" />
              </figure>
            </div>
        </li>
        <li>
            <h2><span>Le M.E.I.S.</span></h2>
            <div>
              <figure>
                <img class="full" src="http://i49.servimg.com/u/f49/17/19/42/30/accord21.jpg" alt="image" />
              </figure>
            </div>
        </li>
    </ol>
</div>

Merci de vouloir m'aider.


hd-fred a écrit:Bonjour

Pour mette un lien sur une image, il faut mettre une balise "img" entre une "a" qui te permet d'écrire un hyper lien.

comme ceci

Code:
<a href="adresse du lien"><img src="adresse de l'image"></a>

quand à la hauteur de l’accordéon, une modif css, du "heigth" sur la "class" ou "id" en question règlera la question.


@ plus et bonne aprem
Merci pour le tuyau, ce me servira pour placer des liens dans des images, et merci encore pour les variables css
emc2

emc2
*****

Messages : 555
Inscrit(e) le : 30/09/2011

http://sainte-croix.forumgratuit.org/
emc2 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: lien dans une page d'une présentation accordeon

Message par Matriochka Jeu 5 Avr 2012 - 23:24

Pour mettre un lien vers une image, il vous suffit d’utiliser la balise a autour de votre image.
Exemple avec l’une de vos images :
Code:
<a href="URL"><img class="full" src="http://i49.servimg.com/u/f49/17/19/42/30/accord20.jpg" alt="image" /></a>
Remplacez la mention "URL" par le lien que vous désirez inclure sur votre image.

Enfin, concernant la taille de votre accordéon, quels sont les codes CSS liés à celui-ci, s’il vous plaît ? Smile
avatar

Matriochka
Membre actif

Messages : 7604
Inscrit(e) le : 14/07/2010

Matriochka a été remercié(e) par l'auteur de ce sujet.

Résolu Re: lien dans une page d'une présentation accordeon

Message par emc2 Jeu 5 Avr 2012 - 23:32

Voici les css:
Code:
@charset 'utf-8';
/*************************************************!
*
*  project:    liteAccordion - a horizontal accordion plugin for jQuery
*  author:    Nicola Hibbert
*  url:        http://nicolahibbert.com/liteaccordion-v2/
*  demo:      http://www.nicolahibbert.com/demo/liteAccordion/
*
*  Version:    2.0.2
*  Copyright:  (c) 2010-2011 Nicola Hibbert
*  Licence:    MIT
*
**************************************************/
/****************************************** Core */
.accordion { text-align: left; font: 'Helvetica Neue', Verdana, Arial, sans-serif }
.accordion > ol { position: relative; overflow: hidden; height: 100%; margin: 0; padding: 0; list-style-type: none }
.accordion .slide > h2 {
  color: black;
    font-size: 16px;
  font-weight: normal;
  margin: 0;
  z-index: 100;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transform: translateX(-100%) rotate(-90deg);
  -webkit-transform-origin: right top;
  -moz-transform: translateX(-100%) rotate(-90deg);
  -moz-transform-origin: right top;
  -o-transform: translateX(-100%) rotate(-90deg);
  -o-transform-origin: right top;
  transform: translateX(-100%) rotate(-90deg);
  transform-origin: right top;
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.accordion .slide > h2 span {
    display: block;
    padding-right: 8%;
    text-align: right;
    height: 90%;
    margin-top: 5px;
    -moz-user-select: none;
    -khtml-user-select: none;
    user-select: none;
}
.accordion .slide > h2 b {
    display: inline-block;
    position: absolute;
    top: 13%;
    left: 10%;
    text-align: center;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}
.accordion .slide > h2:hover { cursor: pointer }
.accordion .slide > div { height: 100%; position: absolute; top: 0; z-index: 10; overflow: hidden; background: white }
 
/****************************************** Basic */
.accordion .slide > h2 { background: #333; color: white; line-height: 225% }
 
/*************************************** Rounded */
.rounded, .rounded > ol { -webkit-border-radius: 6px; -moz-border-radius: 6px; -ms-border-radius: 6px; border-radius: 6px }
.rounded .slide > h2 span { -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px }
 
/******************************************** IE */
.ie .slide > h2 b { top: 42%; left: 5% }
.ie9 .slide > h2 { filter: none; -ms-transform: translateX(-100%) rotate(-90deg); -ms-transform-origin: right top }
 
/******************************************** FA */
.accordion figure .full { width: 100%; height: 100%; }
.accordion h2 { border: none; }
emc2

emc2
*****

Messages : 555
Inscrit(e) le : 30/09/2011

http://sainte-croix.forumgratuit.org/
emc2 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: lien dans une page d'une présentation accordeon

Message par Matriochka Jeu 5 Avr 2012 - 23:38

Ajoutez ceci :
Code:
div#accordeon-pa.accordion.rounded.basic {
height: ***px;
width:***px;}
Remplacez *** par le nombre de pixels de votre choix. Notez que width = largeur de l’élément et height = hauteur de l’élément.
avatar

Matriochka
Membre actif

Messages : 7604
Inscrit(e) le : 14/07/2010

Matriochka a été remercié(e) par l'auteur de ce sujet.

Résolu Re: lien dans une page d'une présentation accordeon

Message par emc2 Ven 6 Avr 2012 - 0:01

Merci, c'est parfait. cela fonctionne très bien.
Je baise en "résolu"
emc2

emc2
*****

Messages : 555
Inscrit(e) le : 30/09/2011

http://sainte-croix.forumgratuit.org/
emc2 a été remercié(e) par l'auteur de ce sujet.

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

- Sujets similaires

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