lien dans une page d'une présentation accordeon
3 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1 • Partagez
lien dans une page d'une présentation accordeon
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.
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
Re: lien dans une page d'une présentation accordeon
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
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
Matriochka- Membre actif
- Messages : 7604
Inscrit(e) le : 14/07/2010
Re: lien dans une page d'une présentation accordeon
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
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
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
Re: lien dans une page d'une présentation accordeon
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.
Merci de vouloir m'aider.
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.
Merci pour le tuyau, ce me servira pour placer des liens dans des images, et merci encore pour les variables csshd-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
Re: lien dans une page d'une présentation accordeon
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 :
Enfin, concernant la taille de votre accordéon, quels sont les codes CSS liés à celui-ci, s’il vous plaît ?
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>
Enfin, concernant la taille de votre accordéon, quels sont les codes CSS liés à celui-ci, s’il vous plaît ?
Matriochka- Membre actif
- Messages : 7604
Inscrit(e) le : 14/07/2010
Re: lien dans une page d'une présentation accordeon
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; }
Re: lien dans une page d'une présentation accordeon
Ajoutez ceci :
- Code:
div#accordeon-pa.accordion.rounded.basic {
height: ***px;
width:***px;}
Matriochka- Membre actif
- Messages : 7604
Inscrit(e) le : 14/07/2010
Re: lien dans une page d'une présentation accordeon
Merci, c'est parfait. cela fonctionne très bien.
Je baise en "résolu"
Je baise en "résolu"
Sujets similaires
» Comment insérer un lien de redirection dans le menu accordéon ? bis
» Comment insérer un lien de redirection dans le menu accordéon ?
» Lien dans la présentation du forum
» [Question] Ecrire dans le menu accordéon page d'accueil
» Récupération d'un lien menant a la fiche de présentation dans le profil personnalisé
» Comment insérer un lien de redirection dans le menu accordéon ?
» Lien dans la présentation du forum
» [Question] Ecrire dans le menu accordéon page d'accueil
» Récupération d'un lien menant a la fiche de présentation dans le profil personnalisé
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum