[résolu] Créer un lien depuis une image redondante dans le CSS

hello !

voilou j'ai des petits calques redondants dans ma page qui contiennent des images de fond en forme de bouton. ces boutons servent à revenir en haut de la page.

le probleme c'est que ces calques sont vides et leur fond est spécifié dans la feuille de style.

ces calques étant vides je ne peux pas créer de lien puisqu'ils ne sont pas cliquables. alors bien sur je peux mettre un gif transparent mais ça m'oblige à copier le code pour le lien sur chaque bouton et il apparait plusieurs fois par page, à la fin de chaque news.

est ce que ce serait possible de coller un lien dans la feuille de style pour que ces calques redondants soient cliquables et établissent le lien ?

merci bcp !

le code au cas où :

#ancre_top {
				float: right;
				margin-right: 15px;
				margin-left:200px;
				margin-top:-5px;
				height:10px;
				position: relative;
				background: url(images/top_top.gif) no-repeat top left;
				width:34px;
				display: inline;
}

Modifié par zepokpok (22 Nov 2007 - 12:43)

Bonjour,

Si tu veux faire un lien il va falloir utiliser la balise <a>

A mon avis tu peux essayer un truc du genre :

<a href="#top" id="ancre_top"><span class="Invisible">Haut de page</span></a>

et pour cacher le texte du lien et n'afficher que ton image de fond :

.Invisible {
display: none;
}

L'intérêt c'est qu'un lecteur d'écran lira "Haut de page" ce qui est explicite pour l'utilisateur.

Cordialement,
Kaimite
Modifié par Kaimite (22 Nov 2007 - 10:21)

salut !

merci de ta réponse !

du coup il m'agrandit la zone et ça me dédouble mon image de fond.
et ça m'oblige à copier le code sur chaque image qd meme. mais j'y couperais pas de toute façon je crois..

merci qd meme ! je garde l'astuce un fonctionnement surement sur un autre bouton plus petit et l'idée est excellente !

merci encore

Kaimite a écrit :
et pour cacher le texte du lien et n'afficher que ton image de fond :

.Invisible {
display: none;
}

L'intérêt c'est qu'un lecteur d'écran lira "Haut de page" ce qui est explicite pour l'utilisateur.

Pas avec un display: none (surtout si le display: none en question ne s'applique pas spécifiquement au média screen).

Une solution:

<!-- au début de body -->
<a href="#haut" id="haut" name="haut"></a>

<!-- par la suite dans la page, dès que nécessaire -->
<a href="#haut" title="Revenir au début de la page">
	<img alt="Revenir au début de la page" src="/images/haut.png" />
</a>

Voilà.

zepokpok a écrit :
est ce que ce serait possible de coller un lien dans la feuille de style pour que ces calques redondants soient cliquables et établissent le lien ?

1. Non, ça n'est pas possible.
2. Par ailleurs, ça n'est absolument pas souhaitable!

À la rigueur, si tu estimes que ces liens sont une mesure de confort parfaitement dispensable, tu peux les générer en Javascript. Mais l'intérêt ne me semble pas énorme. Autant les garder dans le code HTML.

ok ok merci bien

je cherche peut etre à automatiser un peu trop de choses !

merci à vous

zepokpok a écrit :
je cherche peut etre à automatiser un peu trop de choses !

Les langages de programmation côté serveur sont là pour ça. Si tu dois générer la même structure de code N fois, tu passes par une boucle et c'est réglé.

tu as completement raison puisque ce sont des paragraphes news en plus...
mais comme je suis dans la structure type avant la programmation asp j'étais loin de tout ça

je réponds sans éditer car j'ai une question au passage,

j'ai réussi à positionner ce fameux bouton au premier plan par rapport à l'arriere plan qui est un autre calque qui contient le contenu de la news, simplement, parce que j'imagine que ce div est après le premier div. avec une marge négative je peux donc superposer les deux.

maintenant je me dis que je pourrais faire pareil avec mon titre (qui se superpose aussi avec le calque de contenu. seulement comme ce div est avant dans le code, ce titre apparait sous le contenu.

une solution ? ya pas un truc avec les z index ?

merci !

EDIT : hop c'est bon !
j'ai tapé betement z-index:2; dans mon css et ça fonctionne désolé pr le dérangement
Modifié par zepokpok (22 Nov 2007 - 14:19)