[résolu] Lien invisible sur un page...

Bonjour à tous.

Voilà, j'ai une petite question.
Récemment, il y avait un tuto qui en parlait un peu, mais après de nombreux échecs, j'ai fini par abandonner.
Alors, je viens demander de l'aide ici, en espérant avoir de l'aide.

Ce que je veux faire est assez simple, et je pense que ça ne devrait poser aucun problème à qui connait mieux que moi le CSS.

Je voudrais faire un lien invisible sur une page.
Je m'explique... J'ai un blog sous Dotclear, et à partir du fichier style.cs de mon thème, j'aimerais une zone de lien qui soit placée précisemment sur la page et qui renverrait vers une page.

Comme j'avais essayé avec le tuto, je crois que les bonnes informations sont celles-ci :

Le rectangle doit faire 6px de largeur et 8px de hauteur.
Il se situe à 1094px du bord gauche.
Et 702px de haut à partir du bas de l'image.
Toutes ces mesures sont fixes.

Je crois que ce que je veux faire s'appelle une "zone réactive". Moi je voudrais qu'elle réagisse à un click en renvoyant vers un lien.

Pour bien comprendre, ces coordonnées correspondent à un endroit précis de l'arrière plan de mon thème.

La question alors, et je suis désolé de la demander si brutalement, c'est :
Est-ce que quelqu'un pourrait m'accorder un peu de son temps pour m'écrire le code CSS correspondant à ce que j'aimerais faire si ce n'est pas trop compliqué ?

D'avance merci...
Modifié par TriskaidekaPiT (03 Dec 2006 - 19:52)

Bonjour,

Bien que je trouve ta question très spéciale ( 1094px du bord droit? ), il est évidemment possible de réaliser cela sans trop de problèmes avec, par exemple, un lien bloc auquel tu donnes les dimensions voulues ainsi qu'un positionnement absolu à l'endroit désiré. Tu peux ensuite cacher ton texte avec la méthode de ton choix (clip, text-indent, etc.).

Pardon... c'est à 1094px du bord gauche.
J'édite ça tout de suite...
Il semblerait que j'ai encore un peu de mal avec ma droite et ma gauche...

Et si cela est possible, je n'en doute pas, mais le problème est que personnellement, je n'ai pas réussi...
Ce doit être quelques lignes tout au plus...
Serais tu le faire toi ?

PS : Voici le tutoriel que j'avais regardé pour essayer de le faire par moi même.
Mais je ne sais même pas si ce tutoriel correspondait exactement à ce que j'aurais voulu faire en fait...
Modifié par TriskaidekaPiT (03 Dec 2006 - 17:42)

Bonjour
Je ne comprends pas bien ce que tu veux faire : une image cliquable ou un lien avec la balise <a> ?
Pour l'image cliquable tu peux faire

<p style="border-style : solid ; border-color : blue ; border-width : 2px;position : absolute ; right : 1094px ; top : 702px; width : 6px ; height : 8px">
<map id="MaMap">
	<area shape="rect" coords="0,0,8,6" href="MaPage.xhtml" alt="Message" />
</map>

<img alt="image" src=".MonImage.gif" width="6" height="8" usemap="#MaMap" />
</p>

ou pour la balise <a>

 <h1 style="border-style : solid ; border-color : blue ; border-width : 2px;position : absolute ; right : 1094px ; top : 702px; width : 6px ; height : 8px">
   <a href="MaPage.xhtml">coucou </a>
</h1>

Merci coucou.

En fait, je ne sais pas si tu vois un peu comment fonctionne Dotclear et les thèmes.
Mais j'ai un thème qui fonctionne avec un fichier template.php et un fichier style.css.
Dans le fichier style.css se trouve une image d'arrière plan.
Cette image fait 1600*1200.
Sur cette image est représenté une main.
Cette main se trouve à 1094px du bord gauche et 702px de haut à partir du bas.
Ce que je voudrais, c'est que l'on puisse cliquer sur cette main, sans qu'il n'y ait de texte ou d'autre image superposée, pour être renvoyé vers une autre page.

Comme cette image d'arrière plan est gérée par le style.css, j'ai pensé qu'il n'y avait qu'à partir de là que l'on pouvait placer une "zone cliquable" à un point donné pour renvoyer vers une autre page.

Et... reprends moi si je me trompe, mais les codes que tu m'as donné sont des morceaux de HTML non ?

Enfin voilà, je suis un peu confus, mais j'espère que j'ai aidé à mieux comprendre ce que je voulais exactement...

TriskaidekaPiT a écrit :
Et si cela est possible, je n'en doute pas, mais le problème est que personnellement, je n'ai pas réussi...
Ce doit être quelques lignes tout au plus...
Serais tu le faire toi ?

Bah y'a pas mal de solutions, essaye quelque chose comme ça:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Titre de la page</title>

<style type="text/css">
p {position:absolute; width:6px; height:8px; top:702px; left:1094px; overflow:hidden;}
a {display:block; height:100%; text-indent:6px;}
</style>


</head>

<body>

<p><a href="#">test</a></p>

</body>
</html>

Bonjour TriskaidekaPiT et bienvenue dans l'univers Alsacréations,

Comme indiqué dans règles dont tu as certainement pris connaissance au moment de ton inscription, ce site est un forum d'entraide et non de travail à ta place ...


Pour répondre à ton questionnement, les parties cliquables ne peuvent se trouver que dans la source html, c'est à dire dans le template.

Ensuite, il est généralement préférable que les liens soient visibles, puisqu'ils font appel à une volonté de l'utilisateur ...

Ta requête serait peut-être plus simple à comprendre avec un exemple en ligne de ce que tu cherches à obtenir.

Merci Vero pour ton accueil, tes conseils, et ton aiguillage.
Ne t'inquiète pas, j'avais bien lu les règles, y compris celles pour poster ici.

C'est vrai que ce que je demande est assez particulier, et je n'espère pas là qu'on fasse mon site à ma place, seulement, je ne vois pas bien comment faire pour être aidé sur quelque chose que je ne suis mentalement pas capable de produire de mes petits doigts inexpert en CSS...
Quoiqu'il en soit les réponses de coucou et Benjamin D.C. notamment m'ont beaucoup aidé. Et je suis désolé de les avoir exploité.

D'ailleurs à ce propos, merci beaucoup Benjamin, parce que tes derniers lignes correspondent bien à ce que je veux...

Il reste un tout petit problème.

Y aurait-il moyen d'appliquer ce style css uniquement sur un seul lien déterminé et qui correspondrait à <p><a href="#">test</a></p> dans ton exemple ?

Parce que, pour te dire, ça marche effectivement bien, mais tous les liens existant sur ma page ont été décallé à ce point précis de la page...
C'est ennuyeux...

En nommant la balse <p> et en faisant une référence dans le <style>, y aurait-il une solution ?
Ou quelque chose comment ça...
Modifié par TriskaidekaPiT (03 Dec 2006 - 18:49)

TriskaidekaPiT a écrit :
Y aurait-il moyen d'appliquer ce style css uniquement sur un seul lien déterminé et qui correspondrait à <p><a href="#">test</a></p> dans ton exemple ?

Parce que, pour te dire, ça marche effectivement bien, mais tous les liens existant sur ma page ont été décallé à ce point précis de la page...

C'est fâcheux Il suffit d'ajouter un identifiant au paragraphe voulu et de le cibler correctement dans ta feuille de style. En reprenant le code de tout à l'heure, donc, on a ceci:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<title>Titre de la page</title>



<style type="text/css">

#lien {position:absolute; width:6px; height:8px; top:702px; left:1094px; overflow:hidden;}

#lien a {display:block; height:100%; text-indent:6px;}

</style>





</head>



<body>



<p id="lien"><a href="#">test</a></p>



</body>

</html>

Voilà, j'ai réussi.

En fait, il restait un dernier problème... c'est qu'avec la valeur absolute, étant donné qu'il y avait une scrolling vertical et horizontal sur ma page, à chaque fois que l'on se déplaçait, la zone cliquable se déplaçait aussi...
Et vu qu'elle est invisible, c'était dur de courrir après.

Alors en bidouillant un peu, j'ai remplacé absolute par fixed...
Ce qui a donné quelque chose comme ça pour le CSS :

<style type="text/css">
	#lien {
	position:fixed;
	width:8px;
	height:6px;
	margin: 0;
	padding: 0;
	top:492px;
	left:1094px;
	overflow:hidden;
}

	#lien a {
	display:block; 
	height:100%; 
	text-indent:6px;}
</style>

Donc je te remercie vraiment beaucoup pour l'aide que tu m'as apporté car je n'y serais jamais arrivé sans ton code !

Bonne continuation à toi.