Liens sur un background

Fermé
HFSJ Messages postés 8 Date d'inscription vendredi 8 mars 2013 Statut Membre Dernière intervention 14 mars 2013 - 8 mars 2013 à 20:32
HFSJ Messages postés 8 Date d'inscription vendredi 8 mars 2013 Statut Membre Dernière intervention 14 mars 2013 - 14 mars 2013 à 12:49
Bonjour,

je n'arrive pas à mettre un background avec des liens cliquables dessus,
http://croissantandtea.com/testaccueil/
Je souhaite faire exactement comme ce qui est fait sur cette image, soit, mettre des liens sur les drapeaux dans un background, seulement j'ai beau regarder les tutoriaux sur internet je n'y comprends pas grand chose...
Merci d'avance à tous ! :)

8 réponses

bg62 Messages postés 23588 Date d'inscription samedi 22 octobre 2005 Statut Modérateur Dernière intervention 9 avril 2024 2 360
8 mars 2013 à 20:40
cherche du côté de " mapping " ...
ici c'est bien le cas : une image avec un mapping dedans pour diriger ...
<map name="Map" id="Map">
  <area shape="poly" coords="504,530,666,533,670,580,784,590,782,443,726,436,725,390,506,391" href="http : / / fr .croissantandtea.com" target="_blank" />
  <area shape="poly" coords="860,533,1032,537,1036,584,1149,594,1146,446,1092,438,1090,386,864,384" href="http : / / en .croissantandtea.com" target="_blank" />
</map>

pas tip top mais bon ;)
0
HFSJ Messages postés 8 Date d'inscription vendredi 8 mars 2013 Statut Membre Dernière intervention 14 mars 2013
8 mars 2013 à 20:54
Faire un mapping sur un background donc ? Étant donné que j'ai fais ça sur dreamweaver en effet c'est pas le top non plus mais c'est ce qu'il y avait de plus précis apparemment !
Tu connaîtrais un code à faire pour arriver au même résultat que sur ce que j'ai fais sur cette page ?
0
graffx Messages postés 6506 Date d'inscription jeudi 22 mars 2007 Statut Contributeur Dernière intervention 24 mars 2019 1 973
8 mars 2013 à 21:01
De memoire, sur dreamwaver il y a cette fonction, selectionne ton image en cliquant dessus et dnas les propriétés de bas de page en bas il y a une icone qui te permettra de faire un contour point par point de chaque image pour y ajouter un lien.

Ca permet par exemple de mettre un lien sur chaque region d'une carte de france.
0
HFSJ Messages postés 8 Date d'inscription vendredi 8 mars 2013 Statut Membre Dernière intervention 14 mars 2013
8 mars 2013 à 21:10
C'est justement ce que j'ai fais sur le cas présenté ci-dessus, merci en tout cas !
Seulement, ça ne marche pas sur un background, Dreamweaver n'a pas cette fonction, en bas rien ne s'affiche, j'ai beau tout essayé rien n'y fait... :/
0
graffx Messages postés 6506 Date d'inscription jeudi 22 mars 2007 Statut Contributeur Dernière intervention 24 mars 2019 1 973
8 mars 2013 à 23:45
Non sur un background, a moins peut etre d'utiliser css et javascript, tu ne peux pas, que sur une image propre.
0
bg62 Messages postés 23588 Date d'inscription samedi 22 octobre 2005 Statut Modérateur Dernière intervention 9 avril 2024 2 360
9 mars 2013 à 08:00
mais dans l'exemple, l'image n'est PAS en background !!!
elle est déclarée ( scr ..) dans le body et le mapping est fait dessus !!!!!!!
en plus : quel intéret de mettre une telle page, vierge de tout comme index, pour mettre derrière du wordpress avec une foule de widgets ... niveau ref c'est nul :)
0
HFSJ Messages postés 8 Date d'inscription vendredi 8 mars 2013 Statut Membre Dernière intervention 14 mars 2013
9 mars 2013 à 13:24
On va créer deux portails : un en anglais et un en français. Cette page sert juste de redirection première en gros... Après c'est mon choix ! Du coup comment je pourrai faire pour centrer l'image et créer ce simple index ? Utiliser CSS & Javascript ? Quel type de balise je dois utiliser ?
0
graffx Messages postés 6506 Date d'inscription jeudi 22 mars 2007 Statut Contributeur Dernière intervention 24 mars 2019 1 973
9 mars 2013 à 14:58
Plusieurs solutions relativement simple, en voici une, c'est pas la plus classe mais bon.

Tu créés une image vide sur fond transparent, que tu positionnes avec css par dessus tes deux boutons et tu leurs donnes le lien.


0
HFSJ Messages postés 8 Date d'inscription vendredi 8 mars 2013 Statut Membre Dernière intervention 14 mars 2013
10 mars 2013 à 22:07
J'ai fais cque tu as dis ! Seulement, quel code css je dois faire pour mettre mon image (sans les drapeaux) en background ?
J'ai essayé cette balise mais ça marche pas... :
#background {
background: url(http://www.croissantandtea.com/img/body.jpg) no-repeat;
width: 1600px;
height: 1142px;
left: 50%;
top: 50%;
position: absolute;
margin: -(1600px / 2) 0 0 -(1142px / 2) ;

}
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
graffx Messages postés 6506 Date d'inscription jeudi 22 mars 2007 Statut Contributeur Dernière intervention 24 mars 2019 1 973
10 mars 2013 à 22:36
Le probleme est que y' a plus ta page avec les drapeaux.

Sinon tu refais ce que tu avais, mais au lieu d'ajouter deux drapeaux par dessus ton background, tu les ajoutes au background. Les drapeaux doivent faire partie du background, de la meme image. Ensuite tu ajoutes deux images transparentes par dessus le background au niveau des drapeaux et tu leur mets les liens FR ENG. En cliquant sur les images transparentes on aura l'impression de cliquer sur les drapeaux.
0
HFSJ Messages postés 8 Date d'inscription vendredi 8 mars 2013 Statut Membre Dernière intervention 14 mars 2013
12 mars 2013 à 18:41
tu peux me donner CSS fiable pour mettre mon image en background et la centrer ensuite? En sachant que l'image est la suivante :
http://croissantandtea.com/img/goodsize.jpg
c'est là dessus que je galère, après pour le reste je pourrais le faire sans difficulté :) merci en tout cas
0
bg62 Messages postés 23588 Date d'inscription samedi 22 octobre 2005 Statut Modérateur Dernière intervention 9 avril 2024 2 360
Modifié par bg62 le 12/03/2013 à 20:14
un exemple à adapter:
body { 
margin : 0; 
padding : 0; 
background : url(img/goodsize.jpg) center no-repeat fixed; 
background-color : #444444; 
  -webkit-background-size: cover; /* pour Chrome et Safari */ 
  -moz-background-size: cover; /* pour Firefox */ 
  -o-background-size: cover; /* pour Opera */ 
  background-size: cover; /* version standardisée */ 
font-family : arial, helvetica, sans-serif; 
color : #ffffff; 
font-size : 0.9em; 
line-height : 1.2em; 
letter-spacing : 0.05em; 
}

mais ce n'est pas comme ça que tu auras ton 'mapping" ... :)
0
HFSJ Messages postés 8 Date d'inscription vendredi 8 mars 2013 Statut Membre Dernière intervention 14 mars 2013
12 mars 2013 à 23:57
Le seul petit hic :
www.croissantandtea.com/img/pb.jpg
Je vois pas le "croissant", et je sais pas comment faire pour faire en sorte qu'on puisse le voir non plus en modifiant le CSS... Je m'y connais pas trop comme je l'ai déjà dis !
Après pour coller les drapeaux ce que je peux faire c'est prendre les deux drapeaux et les coller avec un fond transparent sur le "background" "goodsize", non ?
Merci pour tout encore !
0
HFSJ Messages postés 8 Date d'inscription vendredi 8 mars 2013 Statut Membre Dernière intervention 14 mars 2013
14 mars 2013 à 12:49
up please...
0