Gandi.net Groups

Bonjour,

Sur un blog je souhaite remplacer le texte du titre par une image en
conservant le fait qu'un clique sur le titre réaffiche la page
d'accueil du blog. 

J'ai modifier la feuille de style de la façon suivante :

#top {
height:500px;
margin:0 13px;
map name="MonImage"; /* code douteux */
aera shape="default" href="http://blog.MonDomaine.fr/"; /* code douteux
*/
img align=center scr=url(http://blog.MonDomaine.fr/public/logo.gif)
usemap="#MonImage" ; /* Affichage image Ok */
}

h1 a {
text-decoration:none;
font-size:0px; /* évite l'affichage du texte */
font-weight:bold;
color:transparent;
}

J'affiche bien mon image de titre, mais je n'arrive pas à la rendre
active comme l'est le texte du titre. 

Ma transcription de la création de zone active en HTML, normalement :

<map name="MonImage" >
       <aera shape="default" href="http://blog.MonDomaine.fr/" >
</map>

vers la définition de style est certainement foireuse (je débute en
html et css).

Merci de votre aide.

Bien cordialement.

Hello,

Sérieusement, je suis étonné que ton logo s'affiche avec un tel code.
Je ne suis pas un expert non plus des feuilles de styles, alors
peut-être que votre code fonctionne ! Mais bon, juste comme ça, je
trouve ça bizarre que quelque chose s'affiche... Ne pourrait-on pas
avoir le lien vers votre site pour que nous puissions avoir un aperçu
visuel de ce que vous avez en ce moment ?

Néanmoins, voici comment je procéderais :
- une image de fond pour l'entête (appelons-la "fond.png") sans le logo
- l'image de logo (appelons-la "logo.png") qui est un lien vers
l'accueil

#top {
min-height: 500px; /* Préciser la hauteur du logo*/
min-width: 300px; /* Préciser la largeur du logo, ce sera la taille
minimale que pourra prendre l'entête */
margin: 0;
background: transparent url("http://monblog.com/public/fond.png") top
left repeat; /* On met l'image de fond en arrière-plan de l'entête */
}

h1 a {
text-decoration: none; /* Aucune décoration pour le texte */
color: transparent; /* Le texte sera transparent, ce qui fera en sorte
qu'il n'apparaîtra pas visuellement */
width: 300px; /* Préciser la taille du logo */
height: 500px; /*Préciser la hauteur du logo */
background: transparent url("http://monblog.com/public/logo.png")
no-repeat top left; /* On utilise le logo comme image d'arrière-plan à
l'ancre de lien */
}

Qu'en pensez-vous ?

Bonjour,

Le "color: transparent;" dans la propiété h1 a{...} est inopérant, je
l'ai essayé. Il n'y a qu'en mettant la taille du texte à 0px que j'ai
pu m'en débarrasser.

La référence "top" fait parti intégrante des propriétés du titre
(j'ai vu ça quelque part) votre code me semble donc redondant.

Dans mon code, la gestion de l'image avec la propriété "img" est
bonne. L'image apparait et elle est centrée. Ce n'est que la fonction 
"usemap" qui est inopérante. 

Et c'est la définition de la zone de map qui me pose problème. Elle
est simple en html, mais je n'ai pas trouvé d'exemple ou même d'info
sur la chose en css.

Mais merci pour la réflexion proposé.

En fait après vérification, le code "img" n'est pas bon. Mon image
s'affiche parce qu'elle est en background. (je l'avais fait
précédemment).

les .css récupérés sur les thèmes en modèles sont un peu
bordélique. On y a les définitions pour une même propriété en
divers endroits, une vraie stratification ... :-)

Mais je confirme que la couleur transparente ne semble pas s'appliquer
au texte, mais seulement au fond ...