Une (petite) colle pour les expert ;-)

HEC · 24 Avril 2007

Bonsoir!

Je suis en train de créer le site d'un ami (pour l'instant on en est à la page d'accueil) qui fait de la BD et qui souhaite développer son site.

Pour la page d'accueil il m'a donné un dessin sur lequel j'ai mis des liens en utilisant la balise "map" vue que c'est ce qui m'est apparu le plus simple. Seulement, il souhaite mettre un compteur dans un panneau du dessin; j'ai bien trouvé des script de compteurs simples mais comment puis-je "câler" ça dans le panneau?? Voyez ce que ça donne là:
http://www.jonny-bubble.com/

Si vous avez des idées, merci par avance !!
Et bonne soirée

nalrem · 24 Avril 2007

Tu mets ton compteur dans un div que tu superposes sur le dessin.

misteriron · 24 Avril 2007

Je ne sais pas si faire une map pour les liens est la solution la plus simple. Mais bon, dans ton cas le plus simple est de positionner ton compteur en CSS, comme l'a dit nalrem.

rottman · 24 Avril 2007

Sinon tu génères une image dynamique avec le nombre de visiteurs directement dessus via PHP et la bibliothèque GD.

wullon · 24 Avril 2007

Ou tu fais en flash :-°.

HEC · 24 Avril 2007

Ok je vais essayer de me débrouiller avec le div parce que, excuse moi Rottman mais je suis pas une experte php 8O et j'ai pas bien compris

et puis le flash je connais pas bien on plus :roll:
Merci à vous!

HEC · 24 Avril 2007

Bon très bien je vien de réussir à caler mon compteur dans le panneau, sauf que j'ai mis l'image en background et que j'ai supprimer mes liens "map"; mon ami souhaite avoir ses liens sur les flèches... comment que je peux faire ?? :?:
Merci par avance pour vos idées :roll:

Koxin-L · 24 Avril 2007

Moi, je procèderais comme ceci:

HTML

Code:

<body>
<div id="image">
<div id="lien1">
<a href="./page1.html" title="blabla1"><span class="lien-images">blabla1</span></a>
</div>
<div id="lien2">
<a href="./page2.html" title="blabla2"><span class="lien-images">blabla2</span></a>
</div>
<div id="lien3">
<a href="./page3.html" title="blabla3"><span class="lien-images">blabla3</span></a>
</div>
</div>
</body>

CSS

Code:

div#image
{
background: url(./img/fond.jpg) top left no-repeat;
width: 579px;
height: 800px
}

#lien1
{
width: 100px;
height: 50px
}
        
#lien1 a:link
{
display: block;
width: 100px;
height: 50px;
text-decoration: none
}

.lien-image
{
z-index: -100
}

Explication:
Dans ton code html, tu place tes liens.
Via le CSS, tu places ton image en fond de page.
Tu défini les tailles les div contenant chaque lien.
Avec display, tu défini une box comme zone de clic.

Enfin, tu met une class e, z-index négatif pour que le texte du lien soit sous l'image. N'ai pas peur, les moteur ne te sanctionnerons pas pour ça, car c'est du design et le texte caché est là pour l'accessibilité.

Pandore · 24 Avril 2007

C'est une solution effectivement. On peut également utiliser les images mapées avec la balise "map"

Un exemple de code sur un des nombreux articles que tu peux trouver sur Google :

Balises img et map

:wink:

Koxin-L · 24 Avril 2007

Moi, ce qui m'embête avec les map, c'est l'accessibilité.

HEC · 25 Avril 2007

Ca m'a l'air pas mal du tout Koxin-L je vais tenter cela après un piti café

Je reviens pour vous dire si ça marche!

HEC · 25 Avril 2007

Koxin-L j'ai mis le code + la CSS mais ça marche pas :cry: J'ai mis des margin sur le lien 1 pour placer le div au bon endroit mais ça ne bouge pas... Je l'ai mis en ligne si vous voulez voir ce que ça donne.
Ca fait 2h que je cherche une solution... :roll: Si qqun a une idée...
Merci par avance

Koxin-L · 25 Avril 2007

Met des cadres pour voir ou sont tes "boutons"

comme ça:

Code:

#lien1
{
width: 100px;
height: 50px;
border: 1px dashed #000000
}

ensuite, tu pourra mieux gérer leur emplacement

Bh@Mp0 · 25 Avril 2007

Mieux ... installe Firefox et la Web Developer Toolbar. Dès lors, tu pourras voir quels sont les blocs à chaque endroit et encadrer les blocs que tu veux, sans toucher à ton code.

HEC · 25 Avril 2007

Pas pu m'y remettre avant ce soir mais c'est cool, ça a l'air de marcher yesss!
Merci beaucoup!

HEC · 25 Avril 2007

Ayé c'est fait!! Un peu pris la tête sur les marges mais c'est super, tout à fait ce que je cherchais

Je sens que je vais revenir bientôt par ici ;-)
Merci à vous!