Message d'accueil avec onglet - Les liens ne vont pas

2 participants

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

Résolu Message d'accueil avec onglet - Les liens ne vont pas

Message par MelissaD Ven 24 Juin 2011 - 11:58

Bonjour,

Voilà, j'ai un petit soucis. J'ai décidé, avec ma graphiste, de faire un message d'accueil en onglet et le contenu des onglets serait des images cliquables. Le problème est que les liens ne vont pas du tout. Pourriez-vous m'aider svp ??

Voici le lien où vous pourrez voir les soucis de liens : http://test-forum.sos-forum.net/

Mon code de message d'accueil :

Code:
<script>
function accueilone()
{
document.getElementById('accueil1').style.display='block';
document.getElementById('accueil2').style.display='none';
document.getElementById('accueil3').style.display='none';
}

function accueiltwo()

document.getElementById('accueil2').style.display='block';
document.getElementById('accueil1').style.display='none';
document.getElementById('accueil3').style.display='none';
}
function accueilthree()

document.getElementById('accueil3').style.display='block';
document.getElementById('accueil2').style.display='none';
document.getElementById('accueil1').style.display='none';
}
function accueilfour()

document.getElementById('accueil3').style.display='none';
document.getElementById('accueil2').style.display='none';
document.getElementById('accueil1').style.display='none';
}
function accueilfive()

document.getElementById('accueil3').style.display='none';
document.getElementById('accueil2').style.display='none';
document.getElementById('accueil1').style.display='none';
}
</script>

<ul class="accueil-ul">
  <li class="accueil-li"><a href="#" onmouseover="javascript:accueilone()">Info</a></li>
  <li class="accueil-li"><a href="#" onmouseover="javascript:accueiltwo()">Partenaires / Liens utiles</a></li>
  <li class="accueil-li"><a href="#" onmouseover="javascript:accueilthree()">Concours / Membre de la Semaine</a></li>
</ul><div class="accueil-contenu"> <div id="accueil1"><img usemap="#page_d_accueil" src="http://nsa26.casimages.com/img/2011/06/23/110623093337819098.png" width="766" height="383" border="0">
<map name="page_d_accueil">
<area shape="rect" title="Règlement" coords="128,164,186,176" href="http://graphalasea.forums-actifs.com/t2-reglement-du-forum">
<area shape="rect" title="Formulaire" coords="111,255,182,266" href="http://graphalasea.forums-actifs.com/t1-formulaire-de-presentation">
<area shape="rect" title="Mélissa" coords="560,168,593,246" href="http://graphalasea.forums-actifs.com/u4">
<area shape="rect" title="Kamye" coords="601,168,633,246" href="http://graphalasea.forums-actifs.com/u2">
<area shape="rect" title="Léna" coords="641,168,673,246" href="http://graphalasea.forums-actifs.com/u3">
<area shape="rect" title="Celly" coords="680,168,713,246" href="http://graphalasea.forums-actifs.com/u5">
<area shape="rect" title="Pikkk" coords="720,168,754,246" href="http://graphalasea.forums-actifs.com/u7">
<href="http://graphalasea.forums-actifs.com/">
</map></div><div id="accueil2" style="display: none;"><img usemap="#page_d_accueil" src="http://nsa26.casimages.com/img/2011/06/23/110623093426835433.png" width="766" height="383" border="0">
<map name="page_d_accueil">
<area shape="rect" title="Règlement" coords="126,175,227,183" href="http://graphalasea.forums-actifs.com/t2-reglement-du-forum">
<area shape="rect" title="Présentation" coords="122,190,232,199" href="http://graphalasea.forums-actifs.com/f3-presentation">
<area shape="rect" title="Aide" coords="145,205,210,213" href="http://graphalasea.forums-actifs.com/f6-questions-suggestions">
<area shape="rect" title="Evaluation" coords="128,220,226,228" href="http://graphalasea.forums-actifs.com/f8-evaluation">
<area shape="rect" title="Tutoriaux" coords="129,235,223,243" href="http://graphalasea.forums-actifs.com/f14-tutoriaux">
<area shape="rect" title="Requête" coords="130,250,223,258" href="http://graphalasea.forums-actifs.com/f15-requetes">
<area shape="rect" title="Jeux" coords="143,266,209,273" href="http://graphalasea.forums-actifs.com/f17-jeux">
<area shape="rect" title="Graph'Passion" coords="405,181,493,212" href="http://graph-passion.jdrforum.com">
<area shape="rect" title="Naruto Katana RPG" coords="405,218,493,249" href="http://www.naruto-katana-rpg.com/">
<area shape="rect" title="Manga Destiny" coords="551,183,638,213" href="http://manga-destiny.purforum.com/forum">
<area shape="rect" title="Pub Party" coords="551,220,638,252" href="http://pubparty.forumgratuit.org/">
<href="http://graphalasea.forums-actifs.com/">
</map></div><div id="accueil3" style="display: none;"><img usemap="#page_d_accueil" src="http://nsa26.casimages.com/img/2011/06/23/110623095718686219.png" width="766" height="383" border="0">
<map name="page_d_accueil">
<area shape="rect" title="Membre de la semaine" coords="163,177,260,275" href="http://graphalasea.forums-actifs.com/u3">
<area shape="rect" title="Léna" coords="183,283,233,291" href="http://graphalasea.forums-actifs.com/u3">
<area shape="rect" title="Voir en taille réelle" coords="436,196,742,323" href="http://nsa19.casimages.com/img/2011/06/18/110618100348418431.png">
<area shape="rect" title="Kamye" coords="557,335,621,343" href="http://graphalasea.forums-actifs.com/u2">
<href="http://graphalasea.forums-actifs.com/">
</map></div>
</div>


Et mon CSS :

Code:
.accueil-ul{
overflow: hidden;
width: auto;
margin: 0;
padding: 0;
list-style-type: none;
}
.accueil-li{
  float: left;
  margin-left:6px;
  padding-left:8px;
  padding-right:8px;
  padding-bottom:5px;
}
.accueil-li:hover{
    margin-left:6px;
  padding-left:8px;
  padding-right:8px;
  padding-bottom:5px;
}
.accueil-contenu{
  padding-bottom:10px;
  padding-left:10px;
  padding-right:10px;
  padding-top:10px;
}



a.forumlink {
text-decoration: none;
border-bottom: 1px solid #000000;
border-right: 6px solid #000000;
border-left: 6px solid #000000;
text-align: center;
padding: 2px;
display: block;
-moz-border-radius: 2px 2px 10px 10px ;
background-image: url('http://nsa14.casimages.com/img/2010/06/05/100605114906832699.png');}

a.forumlink:hover {
text-decoration: none;
border-bottom:1px solid #000000;
border-right: 6px solid #000000;
border-left: 6px solid #000000;
display: block;
text-align: center;
background-image: url('http://nsa14.casimages.com/img/2010/06/05/100605114906832699.png');}

body { background: url(http://nsa14.casimages.com/img/2010/07/03/100703121357745908.jpg) center bottom no-repeat fixed;}

a:link {text-decoration: none;}
a:hover{text-decoration: none !important;}
a { text-decoration: none; }
a:link { text-decoration: none; }
a:hover { text-decoration: none; }

a
{
outline: none;
}

legend {color: #452800;}

fieldset {border-color: black;
-moz-border-radius: 5px;}

body.chatbox {
background-color: #9b9488;
}

#chatbox_header {
background-color: #9b9488;
}

.chatbox_row_1,.chatbox_row_2,.chatbox_row_3 {
background-color: #9b9488;
}

.memberlist_row_1 {
background-color: #9b9488;
}

#chatbox_members .member-title {
background-color: #9b9488;
}


Merci d'avance Smile


Dernière édition par MelissaD le Ven 24 Juin 2011 - 12:30, édité 1 fois
MelissaD

MelissaD
****

Féminin
Messages : 222
Inscrit(e) le : 15/11/2009

http://graphalasea.forums-actifs.com/
MelissaD a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Message d'accueil avec onglet - Les liens ne vont pas

Message par Lixyr Ven 24 Juin 2011 - 12:08

Bonjour.

Vos images cliquables, vous les avez faites via gimp ou quelque chose du genre ?


Pour faciliter les recherches, mettez un titre explicite.
Remerciez Message d'accueil avec onglet - Les liens ne vont pas 976083691 le message qui vous a aidé pour que celui-ci soit mis en évidence.
Épinglez votre sujet en résolu Message d'accueil avec onglet - Les liens ne vont pas 3592387030 pour prévenir la modération.

Message d'accueil avec onglet - Les liens ne vont pas Baston10
Lixyr

Lixyr
Aidactive
Aidactive

Féminin
Messages : 7381
Inscrit(e) le : 22/07/2010

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

Résolu Re: Message d'accueil avec onglet - Les liens ne vont pas

Message par MelissaD Ven 24 Juin 2011 - 12:09

Les images ont été faites avec gimp et on a pris les coordonnées avec gimp aussi, mais le reste on a fait grâce à un tuto' de forumactif (Je ne sais plus lequel...)
MelissaD

MelissaD
****

Féminin
Messages : 222
Inscrit(e) le : 15/11/2009

http://graphalasea.forums-actifs.com/
MelissaD a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Message d'accueil avec onglet - Les liens ne vont pas

Message par Lixyr Ven 24 Juin 2011 - 12:21

D'accord. Ca vient de l'id, je crois. Vous avez la même pour chaque map. J'avais un problème similaire avec les images cliquable.
Je suis en train de regarder ça.

*edit*

Voilà le code, fonctionnel :

Code:
    <script>
    function accueilone()
    {
    document.getElementById('accueil1').style.display='block';
    document.getElementById('accueil2').style.display='none';
    document.getElementById('accueil3').style.display='none';
    }

    function accueiltwo()
    {
    document.getElementById('accueil2').style.display='block';
    document.getElementById('accueil1').style.display='none';
    document.getElementById('accueil3').style.display='none';
    }
    function accueilthree()
    {
    document.getElementById('accueil3').style.display='block';
    document.getElementById('accueil2').style.display='none';
    document.getElementById('accueil1').style.display='none';
    }
    function accueilfour()
    {
    document.getElementById('accueil3').style.display='none';
    document.getElementById('accueil2').style.display='none';
    document.getElementById('accueil1').style.display='none';
    }
    function accueilfive()
    {
    document.getElementById('accueil3').style.display='none';
    document.getElementById('accueil2').style.display='none';
    document.getElementById('accueil1').style.display='none';
    }
    </script>

    <ul class="accueil-ul">
      <li class="accueil-li"><a href="#" onmouseover="javascript:accueilone()">Info</a></li>
      <li class="accueil-li"><a href="#" onmouseover="javascript:accueiltwo()">Partenaires / Liens utiles</a></li>
      <li class="accueil-li"><a href="#" onmouseover="javascript:accueilthree()">Concours / Membre de la Semaine</a></li>
    </ul>
<div class="accueil-contenu">
<div id="accueil1">
<img usemap="#page_d_accueil" src="http://nsa26.casimages.com/img/2011/06/23/110623093337819098.png" width="766" height="383" border="0">
    <map name="page_d_accueil">
    <area shape="rect" title="Règlement" coords="128,164,186,176" href="http://graphalasea.forums-actifs.com/t2-reglement-du-forum">
    <area shape="rect" title="Formulaire" coords="111,255,182,266" href="http://graphalasea.forums-actifs.com/t1-formulaire-de-presentation">
    <area shape="rect" title="Mélissa" coords="560,168,593,246" href="http://graphalasea.forums-actifs.com/u4">
    <area shape="rect" title="Kamye" coords="601,168,633,246" href="http://graphalasea.forums-actifs.com/u2">
    <area shape="rect" title="Léna" coords="641,168,673,246" href="http://graphalasea.forums-actifs.com/u3">
    <area shape="rect" title="Celly" coords="680,168,713,246" href="http://graphalasea.forums-actifs.com/u5">
    <area shape="rect" title="Pikkk" coords="720,168,754,246" href="http://graphalasea.forums-actifs.com/u7">
    <href="http://graphalasea.forums-actifs.com/">
    </map>
</div>
<div id="accueil2" style="display: none;"><img usemap="#page_d_accueil2" src="http://nsa26.casimages.com/img/2011/06/23/110623093426835433.png" width="766" height="383" border="0">
    <map name="page_d_accueil2">
    <area shape="rect" title="Règlement" coords="126,175,227,183" href="http://graphalasea.forums-actifs.com/t2-reglement-du-forum">
    <area shape="rect" title="Présentation" coords="122,190,232,199" href="http://graphalasea.forums-actifs.com/f3-presentation">
    <area shape="rect" title="Aide" coords="145,205,210,213" href="http://graphalasea.forums-actifs.com/f6-questions-suggestions">
    <area shape="rect" title="Evaluation" coords="128,220,226,228" href="http://graphalasea.forums-actifs.com/f8-evaluation">
    <area shape="rect" title="Tutoriaux" coords="129,235,223,243" href="http://graphalasea.forums-actifs.com/f14-tutoriaux">
    <area shape="rect" title="Requête" coords="130,250,223,258" href="http://graphalasea.forums-actifs.com/f15-requetes">
    <area shape="rect" title="Jeux" coords="143,266,209,273" href="http://graphalasea.forums-actifs.com/f17-jeux">
    <area shape="rect" title="Graph'Passion" coords="405,181,493,212" href="http://graph-passion.jdrforum.com">
    <area shape="rect" title="Naruto Katana RPG" coords="405,218,493,249" href="http://www.naruto-katana-rpg.com/">
    <area shape="rect" title="Manga Destiny" coords="551,183,638,213" href="http://manga-destiny.purforum.com/forum">
    <area shape="rect" title="Pub Party" coords="551,220,638,252" href="http://pubparty.forumgratuit.org/">
    <href="http://graphalasea.forums-actifs.com/">
    </map></div>
<div id="accueil3" style="display: none;"><img usemap="#page_d_accueil3" src="http://nsa26.casimages.com/img/2011/06/23/110623095718686219.png" width="766" height="383" border="0">
    <map name="page_d_accueil3">
    <area shape="rect" title="Membre de la semaine" coords="163,177,260,275" href="http://graphalasea.forums-actifs.com/u3">
    <area shape="rect" title="Léna" coords="183,283,233,291" href="http://graphalasea.forums-actifs.com/u3">
    <area shape="rect" title="Voir en taille réelle" coords="436,196,742,323" href="http://nsa19.casimages.com/img/2011/06/18/110618100348418431.png">
    <area shape="rect" title="Kamye" coords="557,335,621,343" href="http://graphalasea.forums-actifs.com/u2">
    <href="http://graphalasea.forums-actifs.com/">
    </map></div>
    </div>


Il faut changer l'id des maps quand on en a plusieurs. Une id ne s'utilise d'une seule fois.
Lixyr

Lixyr
Aidactive
Aidactive

Féminin
Messages : 7381
Inscrit(e) le : 22/07/2010

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

Résolu Re: Message d'accueil avec onglet - Les liens ne vont pas

Message par MelissaD Ven 24 Juin 2011 - 12:23

Ah d'accord, merci ^^
MelissaD

MelissaD
****

Féminin
Messages : 222
Inscrit(e) le : 15/11/2009

http://graphalasea.forums-actifs.com/
MelissaD a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Message d'accueil avec onglet - Les liens ne vont pas

Message par Lixyr Ven 24 Juin 2011 - 12:26

J'ai édité et posté le code.

Ce que j'ai modifié :


<div class="accueil-contenu">
<div id="accueil1">
<img usemap="#page_d_accueil" src="https://nsa26.casimages.com/img/2011/06/23/110623093337819098.png" width="766" height="383" border="0">
<map name="page_d_accueil">
<area shape="rect" title="Règlement" coords="128,164,186,176" href="http://graphalasea.forums-actifs.com/t2-reglement-du-forum">
<area shape="rect" title="Formulaire" coords="111,255,182,266" href="http://graphalasea.forums-actifs.com/t1-formulaire-de-presentation">
<area shape="rect" title="Mélissa" coords="560,168,593,246" href="http://graphalasea.forums-actifs.com/u4">
<area shape="rect" title="Kamye" coords="601,168,633,246" href="http://graphalasea.forums-actifs.com/u2">
<area shape="rect" title="Léna" coords="641,168,673,246" href="http://graphalasea.forums-actifs.com/u3">
<area shape="rect" title="Celly" coords="680,168,713,246" href="http://graphalasea.forums-actifs.com/u5">
<area shape="rect" title="Pikkk" coords="720,168,754,246" href="http://graphalasea.forums-actifs.com/u7">
<href="http://graphalasea.forums-actifs.com/">
</map>
</div>
<div id="accueil2" style="display: none;"><img usemap="#page_d_accueil2" src="https://nsa26.casimages.com/img/2011/06/23/110623093426835433.png" width="766" height="383" border="0">
<map name="page_d_accueil2">
<area shape="rect" title="Règlement" coords="126,175,227,183" href="http://graphalasea.forums-actifs.com/t2-reglement-du-forum">
<area shape="rect" title="Présentation" coords="122,190,232,199" href="http://graphalasea.forums-actifs.com/f3-presentation">
<area shape="rect" title="Aide" coords="145,205,210,213" href="http://graphalasea.forums-actifs.com/f6-questions-suggestions">
<area shape="rect" title="Evaluation" coords="128,220,226,228" href="http://graphalasea.forums-actifs.com/f8-evaluation">
<area shape="rect" title="Tutoriaux" coords="129,235,223,243" href="http://graphalasea.forums-actifs.com/f14-tutoriaux">
<area shape="rect" title="Requête" coords="130,250,223,258" href="http://graphalasea.forums-actifs.com/f15-requetes">
<area shape="rect" title="Jeux" coords="143,266,209,273" href="http://graphalasea.forums-actifs.com/f17-jeux">
<area shape="rect" title="Graph'Passion" coords="405,181,493,212" href="http://graph-passion.jdrforum.com">
<area shape="rect" title="Naruto Katana RPG" coords="405,218,493,249" href="http://www.naruto-katana-rpg.com/">
<area shape="rect" title="Manga Destiny" coords="551,183,638,213" href="http://manga-destiny.purforum.com/forum">
<area shape="rect" title="Pub Party" coords="551,220,638,252" href="http://pubparty.forumgratuit.org/">
<href="http://graphalasea.forums-actifs.com/">
</map></div>
<div id="accueil3" style="display: none;"><img usemap="#page_d_accueil3" src="https://nsa26.casimages.com/img/2011/06/23/110623095718686219.png" width="766" height="383" border="0">
<map name="page_d_accueil3">
<area shape="rect" title="Membre de la semaine" coords="163,177,260,275" href="http://graphalasea.forums-actifs.com/u3">
<area shape="rect" title="Léna" coords="183,283,233,291" href="http://graphalasea.forums-actifs.com/u3">
<area shape="rect" title="Voir en taille réelle" coords="436,196,742,323" href="https://nsa19.casimages.com/img/2011/06/18/110618100348418431.png">
<area shape="rect" title="Kamye" coords="557,335,621,343" href="http://graphalasea.forums-actifs.com/u2">
<href="http://graphalasea.forums-actifs.com/">
</map></div>
</div>

mais c'est surtout ici que l'id doit être unique :

<img usemap="#page_d_accueil"


Pour faciliter les recherches, mettez un titre explicite.
Remerciez Message d'accueil avec onglet - Les liens ne vont pas 976083691 le message qui vous a aidé pour que celui-ci soit mis en évidence.
Épinglez votre sujet en résolu Message d'accueil avec onglet - Les liens ne vont pas 3592387030 pour prévenir la modération.

Message d'accueil avec onglet - Les liens ne vont pas Baston10
Lixyr

Lixyr
Aidactive
Aidactive

Féminin
Messages : 7381
Inscrit(e) le : 22/07/2010

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

Résolu Re: Message d'accueil avec onglet - Les liens ne vont pas

Message par MelissaD Ven 24 Juin 2011 - 12:30

Merci beaucoup Smile
La prochaine fois, je ne mettrais plus les même ID ^^
MelissaD

MelissaD
****

Féminin
Messages : 222
Inscrit(e) le : 15/11/2009

http://graphalasea.forums-actifs.com/
MelissaD a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Message d'accueil avec onglet - Les liens ne vont pas

Message par Lixyr Ven 24 Juin 2011 - 12:38

Oui, sinon ça ne marchera pas. ^^

Bonne continuation à vous.


Pour faciliter les recherches, mettez un titre explicite.
Remerciez Message d'accueil avec onglet - Les liens ne vont pas 976083691 le message qui vous a aidé pour que celui-ci soit mis en évidence.
Épinglez votre sujet en résolu Message d'accueil avec onglet - Les liens ne vont pas 3592387030 pour prévenir la modération.

Message d'accueil avec onglet - Les liens ne vont pas Baston10
Lixyr

Lixyr
Aidactive
Aidactive

Féminin
Messages : 7381
Inscrit(e) le : 22/07/2010

https://forum.forumactif.com
Lixyr 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