Titre de mon blog sous forme de background cliquable : une idée ?

Salut !

Je viens de mettre à jour le thème de mon blog, mais je suis confronté à un petit problème :

je souhaiterais remplacer le titre (qui est un lien vers la page d'accueil) par une image cliquable...

J'ai tant bien que mal essayé les différentes techniques de remplacement d'images, mais aucune ne donnait de bons résultats (je n'arrivais pas à me passer du texte pour n'afficher que l'image de fond). Et bien sûr, impossible d'avoir une image cliquable !

Du coup, dans l'état actuel des choses, je masque le titre avec un text-indent négatif comme conseillé dans la FAQ, et mon titre est incrusté dans l'image du header... pas top !

Le code HTML qui correspond au haut de ma page :

<div id="top">
  <h1><span><a href="http://pierre.equoy.free.fr/blog/index.php?">Made in Taiwan</a></span></h1>

</div>

D'avance merci pour votre aide !

Hello,

lire sur Blog and Blues : Mettre un titre en image et rester accessible.

Cela pourrait donner par exemple :

<h1><a href="index.php"><img src="themes/madeInTaiwan/img/background-header.jpg" width="760" height="173" alt="Made in Taiwan" /></a></h1>

Modifié par Heyoan (03 Jan 2009 - 17:17)

Salut !

Je pense que j'ai trouvé une bonne solution... je ne sais pas pourquoi mais hier malgré tous mes tests en CSS ça ne fonctionnait pas...

Et là, j'ai simplement mis ça dans ma CSS :

#top h1 {
	background: transparent url(img/blog-title.png) no-repeat bottom left;
	height: 62px;
	line-height: 62px;
	padding-top: 100px;
}


#top h1 a {
	display: block;
	text-indent: -999em;
}

les 62px correspondent à la hauteur de l'image de titre, et le padding me permet de descendre le titre vers le bas du header.

Merci pour l'article, au passage !

Ah, je croyais que tu voulais le lien sur tout le header.

Par contre je ne comprends pas bien ta solution : en cas d'images désactivées ton lien est invisible. La solution que je te proposais plus haut avec un élément IMG directement dans le code ne posait pas ce problème.

Au passage :
* à quoi sert le SPAN ?
* pourquoi ne pas faire profiter tout le monde des liens d'accès rapides ?

a écrit :
Par contre je ne comprends pas bien ta solution : en cas d'images désactivées ton lien est invisible. La solution que je te proposais plus haut avec un élément IMG directement dans le code ne posait pas ce problème.

+1

La solution avec un text-indent négatif est une technique de remplacement d'image, et toutes les techniques de remplacement d'image posent problème d'une manière ou d'une autre. Dans certains cas précis leurs avantages peuvent l'emporter (face à des contraintes particulières), mais dans la plupart des cas il est déconseillé de les utiliser.

La solution à retenir est donc celle proposée par Heyoan. On pourrait la décliner en deux options:
1. Intégrer l'image complète (motif et texte) comme une seule image à insérer dans le code HTML avec le texte alternatif qui va bien.
2. Placer le motif en background CSS, et le texte comme une image en PNG-32 (donc avec transparence alpha) ou en PNG-8 avec transparence alpha (possible avec Fireworks par exemple, réduit bien le poids des images pour ce genre de chose).

Dans les deux cas on voudra sans doute jouer sur du display:block pour le lien.

Merci pour vos réponses.

Notez que si on désactive les images et qu'on ne se trouve pas sur la page d'accueil, un lien "Accueil" apparaît (merci Dotclear).

Le SPAN ne me sert à rien ; je suis parti d'un thème de base que j'ai modifié. Il faut que je fasse un peu de ménage dans les templates, je pense.
Modifié par ePierre (03 Jan 2009 - 18:31)