Une (petite) colle pour les expert ;-)

le Mar Avr 24, 2007 19:41

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 :-)

le Mar Avr 24, 2007 19:48

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

le Mar Avr 24, 2007 20:16

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.

le Mar Avr 24, 2007 20:27

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

le Mar Avr 24, 2007 20:36

Ou tu fais en flash :-°.

le Mar Avr 24, 2007 20:58

Ok je vais essayer de me débrouiller avec le div parce que, excuse moi Rottman mais je suis pas une experte php

et j'ai pas bien compris :oops:

et puis le flash je connais pas bien on plus :roll:

Merci à vous!

le Mar Avr 24, 2007 21:34

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:

le Mar Avr 24, 2007 21:39

Moi, je procèderais comme ceci:

HTML

Code: Tout sélectionner: <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: Tout sélectionner: 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é.

le Mar Avr 24, 2007 22:08

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:

le Mar Avr 24, 2007 22:13

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

le Mer Avr 25, 2007 5:19

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!

le Mer Avr 25, 2007 7:30

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

le Mer Avr 25, 2007 10:11

Met des cadres pour voir ou sont tes "boutons"

comme ça:

Code: Tout sélectionner: #lien1 { width: 100px; height: 50px; border: 1px dashed #000000 }

ensuite, tu pourra mieux gérer leur emplacement

le Mer Avr 25, 2007 10:19

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.

le Mer Avr 25, 2007 17:15

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

Une (petite) colle pour les expert ;-)

Une (petite) colle pour les expert ;-)

Formation recommandée sur ce thème :

Lectures recommandées sur ce thème :

Qui est en ligne