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

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

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 le Ven 24 Juin 2011 - 12:08

Bonjour.

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





Lixyr
Aidactive
Aidactive

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

http://forum-test-in-lixyr.rpg-dynasty.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 le 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
****

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 le 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
Aidactive
Aidactive

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

http://forum-test-in-lixyr.rpg-dynasty.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 le Ven 24 Juin 2011 - 12:23

Ah d'accord, merci ^^

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 le 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="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>

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

<img usemap="#page_d_accueil"





Lixyr
Aidactive
Aidactive

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

http://forum-test-in-lixyr.rpg-dynasty.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 le Ven 24 Juin 2011 - 12:30

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

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 le Ven 24 Juin 2011 - 12:38

Oui, sinon ça ne marchera pas. ^^

Bonne continuation à vous.





Lixyr
Aidactive
Aidactive

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

http://forum-test-in-lixyr.rpg-dynasty.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


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