BackGround-Image + AREA

Bonjour à tous,

Je suis actuellement en train de mettre une image sur mon site sur ma page d'index.

Jusque là pas de problèmes.

Par contre je l'ai mise dans le background sous cette forme :

body{
background-image: url(templates/fond_index.jpg);
background-color: #FFFFFF ;
background-position:center center;
background-attachment:fixed; 
width: 100%;
height: 100%;
}

Donc déjà j'ai eu des soucis avec la mise en page lol

parfois l'image était coupée, d'autres fois celle ci dépassée enfin bref, a force de bodouille, j'ai enfin quelques chose d'a peu pret correct


Mon problème est que j'aimerais mettre au point des zones AREA sur les quatres étoiles de langue afin de cliquer dessus pour accéder au site dans la bonne langue, mais je ne sais pas comment faire

Pourriez vous svp m'aider ?

Merci beaucoup par avance

PS : si au passage quelqu'un avait une idée afin que l'image s'adapte a la taille de la fenettre du navigateur, cela serait génial car j'ai du la passer en 800*600 là et fixe

PS2 : le lien du futur site : http://www.solutions-globales.com/
Modifié par Felipe (29 Aug 2005 - 17:35)

bonjour,
mon, idée,
part sur une liste classique pour tes 4 lien avec texte ensuite le css pour le cacher et le positionner:
,
positionne tes li en absolue et et % (top left) par le biais d'"id"
ensuite pour les balises <a> il te faut mettre les liens texte dans des balises span auxquelles tu applique un display none pour les cacher.
ensuite pour que tes liens soit effectivement actifs sous tout les navigateurs, tu ajoute avant ou apres le span un espace insecable.
ce qui donnerait un html comme ça;

<ul>
<li><a href="#" id="un">&nbsp;<span>etoile 1</span></a></li>
<li><a href="#" id="deux">&nbsp;<span>etoile 2</span></a></li>
<li><a href="#" id="trois">&nbsp;<span>etoile 3</span></a></li>
<li><a href="#" id="cat">&nbsp;<span>etoile 4</span></a></li>
</ul>

pour completement cacher le lien tu met le "texte-decoration" a "none"
et ton lien est invisible mais clickable.
pour donner une dimension a tes balises a il te faut leur appliquer un "display:block;"

tu peux aussi ajouter un roll-over d'image pour bien visualiser la zone cliquable.
j'utilise ce truc sur cette page : http://gcyrillus.free.fr/tole/ , exepté que les liens ne sont pas positionné en absolute, (l'avantage du texte caché est peut-etre pour le referencement de ton site par les moteurs de recherches et laisse le menu comprehensible/visible si le navigateur n'applique pas le css).

en esperant que cela te serve.

a plus

Bonjour,

j'ai édité le 1er message afin de rajouter les balises [ code] [ /code] manquantes.
Merci d'y penser à l'avenir

gcyrillus a écrit :
bonjour,
mon, idée,
part sur une liste classique pour tes 4 lien avec texte ensuite le css pour le cacher et le positionner:
,
positionne tes li en absolue et et % (top left) par le biais d'"id"
ensuite pour les balises <a> il te faut mettre les liens texte dans des balises span auxquelles tu applique un display none pour les cacher.
ensuite pour que tes liens soit effectivement actifs sous tout les navigateurs, tu ajoute avant ou apres le span un espace insecable.
ce qui donnerait un html comme ça;

<ul>
<li><a href="#" id="un">&nbsp;<span>etoile 1</span></a></li>
<li><a href="#" id="deux">&nbsp;<span>etoile 2</span></a></li>
<li><a href="#" id="trois">&nbsp;<span>etoile 3</span></a></li>
<li><a href="#" id="cat">&nbsp;<span>etoile 4</span></a></li>
</ul>

pour completement cacher le lien tu met le "texte-decoration" a "none"
et ton lien est invisible mais clickable.
pour donner une dimension a tes balises a il te faut leur appliquer un "display:block;"

tu peux aussi ajouter un roll-over d'image pour bien visualiser la zone cliquable.
j'utilise ce truc sur cette page : http://gcyrillus.free.fr/tole/ , exepté que les liens ne sont pas positionné en absolute, (l'avantage du texte caché est peut-etre pour le referencement de ton site par les moteurs de recherches et laisse le menu comprehensible/visible si le navigateur n'applique pas le css).

en esperant que cela te serve.

a plus

Bonsoir,

merci à toi pour ta réponse, je vais essayer de mettre cela en application demain même si cela me semble très complexe vu comme cela a première vue

et je vous tiens au courant

Sinon désolé pour les balises je ferai attention

Bonjour,

Je te remercie gcyrillus pour ta réponse, mais en fait, je n'arrive vraiment pas à la mettre en application

Je pense plutot qu'il va falloir que je reparte de 0 cela sera surement plus simple.

Donc en fait je dispose tout d'abord de cette image :
http://www.solutions-globales.com/templates/fond_index.jpg (800*600)
et de celle ci :
http://www.solutions-globales.com/templates/img_fond.jpg (1024*768)

Ce que je souhaite :
L'image occupe la totalité de la fenetre, et quand on clique sur les étoiles, on arrive sur la bonne partie du site.

J'aimerai déjà si possible que la taille de l'image s'adapte automatiquement à la fenêtre du navigateur du visiteur, au moins sous IE et firefox si possible.

Ensuite, que l'on puisse cliquer sur les fameuses étoiles afin de se rendre sur la bonne page. Pour cela il doit falloir utilisé des AREA avec coords et tout je pense mais comme l'image était en background-image je n'arrivais pas non plus

Voila, en fait je ne veux rien de plus que cela, mais simplement cela

Mais je n'y arrive vraiment pas...

C'est pas faute d'essayer pleins de choses pourtant :s

Quelqu'un (gcyrillus ?) pourrait il m'aider svp ?

Merci bcp par avance

Amicalement Norbert