Comment rendre cliquable le logo de mon site ..

Bonjour tout le monde,
Voila j'aimerais creer un lien sur le logo de mon site pour que les utilisateurs puissent acceder a la page d'accueil rapidement.

Le probleme est que j'utilise pour le moment une image en background d'une div et un h1 pour mon titre ... Ceci afin d'optimiser le referencement ..
mon code:

			
<div id="logo">
	<h1>blabla</h1>
</div>

Mon site : ici

Je ne sais pas comment faire pour ajouter un lien sans nuire au referencement .. Si vous avez une idee ..

Merci par avance pour votre aide
Modifié par kvndevils (01 Aug 2008 - 17:12)

Pourquoi pas juste un :

 onclick='document.location.href="index.php";'

?

Comme le dit igor l'attribut ALT aussi t'aidera au niveau du référencement (trouvé par google images il me semble).

Mais tu peux faire un href aussi.
Modifié par ffwrude (01 Aug 2008 - 17:22)

Bonjour,

<h1><a href=""><img src="" alt="blabla" /></a></h1>

Mon probleme est que je place du texte sur l'image a une position precise .. et j'aimerais que tout l'image soit cliquable .. Donc idealement que le texte ne change pas au survol ..

bin ca ne t'empeche pas de faire un onclick sur la div qui contient l'image. Le onclick n'aura pas les effet du href,donc pas de :hover et cie.

<div id="logo" onclick="alert('cuicui');document.location.href='index.php';">
	<h1>blabla</h1>
</div>

Modifié par ffwrude (01 Aug 2008 - 18:00)

Bonjour,

Pourquoi ne pas mettre le texte directement dans l'image avec le texte alternatif qui vas bien?

Salut !

Un peu plus compliqué :

Tu peux aussi faire un lien en display:block de la taille de l'image et tu colles dedans un span en display:none avec le titre du site par exemple (ca évite que le lien soit vide).
Le lien va se caler au dessus l'image et aura l'impression de cliquer dessus.
Ca évite le javascript.

HTML :

<div id="logo">
<a href="#" title="Mon site qui tue"><span>texte du lien qui se voit pas</span></a>
<h1>blabla</h1>
</div>

CSS :

div#logo{
position:relative: /* pour le calage en absolue du H1 */
}
div#logo a{
display:block; /* pour donner la taille voulue */ 
width:XXpx;
height:YYpx;
}
div#logo a span{
display:none; /* on masque le contenu*/
}

Zeke a écrit :
Tu peux aussi faire un lien en display:block de la taille de l'image et tu colles dedans un span en display:none avec le titre du site par exemple

Solution séduisante en apparence, mais pas accessible. Utiliser un text-indent négatif plutôt qu'un display: none est un peu moins pire, mais pas complètement accessible pour autant (CSS appliquées et images de fond non chargées: plus de lien visible).

La solution indiquée par Igor est la solution accessible de référence. D'aucuns disent que ça nuit au référencement (concrètement, que <img alt="Machin"> aurait moins de poids que Machin), mais ce n'est pas prouvé et à vrai dire ça me semble plutôt douteux.

Si on a besoin d'un effet de rollover, on peut éventuellement le faire en JavaScript (ça ne mord pas ).
Modifié par Florent V. (01 Aug 2008 - 18:25)

Florent V. a écrit :

La solution indiquée par Igor est la solution accessible de référence. D'aucuns disent que ça nuit au référencement (concrètement, que <img alt="Machin"> aurait moins de poids que Machin), mais ce n'est pas prouvé et à vrai dire ça me semble plutôt douteux.

Oui moi aussi j'aimerai bien qu'on me dise pourquoi cette solution (simple et robuste) n'est pas plus populaire, au profit de bidouillages variés sensés être "SEO compliant" .

Je suis assez curieux qu'on m'explique avec des arguments solides ce qui peut pénaliser le référencement avec çà.

Merci a tous pour vos reponses .. Elles mont bcp aide ..
Finalement, j'ai opte pour celle de ffwrude qui est tres simple a mettre en oeuvre et qui ne modifie pas la structure de mon code .. a savoir ajouter une action onclick sur le div ..

kvndevils a écrit :
Finalement, j'ai opte pour celle de ffwrude qui est tres simple a mettre en oeuvre et qui ne modifie pas la structure de mon code .. a savoir ajouter une action onclick sur le div ..

Dommage... c'est aussi la moins accessible de celles proposées. Il suffit que le Javascript soit désactivé et ton lien ne fonctionnera pas.