High-Tech Santé Médecine Droit-Finances

Bien choisir

son ordinateur portable

Rechercher : dans
Par :

Contour d'un lien

Dernière réponse le 14 sep 2009 à 15:47:46 Slay, le 14 sep 2008 à 14:47:20 
 Signaler ce message aux modérateurs

Bonjour,
J'ai crée un bouton avec un lien et l'image change quand on clique dessus, le soucis est que quand je clique un contour rouge apparait et je peux "déplacer" l'image:

http://img211.imageshack.us/my.php?image=aidecontourci9.png

Voici mon code html: 

<div class="sculpture"><a class="lien1" href="index.html"></a></div>


Et le css: 
.sculpture {
width: 150px;
height: 150px;
float: left;
}

a.lien1 {
display: block;
width: 150px;
height: 150px;
background-image: url(images/boîte_sculpture.png);
}

a.lien1:active {
display: block;
width: 150px;
height: 150px;
background-image: url(images/boîte_sculpture_e.png);
}
Configuration: Windows XP
Firefox 3.0.1

Meilleures réponses pour « Contour d'un lien » dans :
Enlever la bordure sur une image dans un lien en HTML/CSS VoirVous avez fait une image cliquable en mettant une balise IMG au sein d'un lien et le navigateur vous affiche un cadre ou plus exactement une bordure autour de l'image. Il existe deux façons de supprimer cette bordure...
[PHP] Transformer une URL en lien hypertexte cliquable VoirGrâce aux expressions régulières, il est possible de transformer en lien hypertexte toute URL de la forme http://URL (ou ftp://URL) ou bien commençant par www. :
Faire un lien vers CommentCaMarche VoirVous êtes le bienvenu pour faire un lien vers CommentCaMarche.net ! Vous avez l'autorisation de faire pointer un lien vers la page d'accueil de CommentCaMarche.net ou bien directement vers un des articles. Si vous voulez agrémenter le lien d'une...
Posez votre question Répondre

1

Slay, le 14 sep 2008 à 15:10:13

Toute aide sera la bienvenue car je n'ai jamais rencontré ce problème.
Merci à tous!

   
Répondre à Slay

2

Posotaz, le 14 sep 2008 à 16:41:27

Salut,

Tout cela me semble normal. Le "contour" t'informe que tu as le focus (tu utilises d'ailleurs la pseudo-classe "active" pour te servir du clic de souris afin de récupérer l'événement).

En ce qui concerne le déplacement de l'image, c'est la nouvelle fonctionnalité Drag&Drop de FireFox3 : On voit l'élément qu'on drag pendant l'opération plutôt que de voir uniquement le pointeur de la souris avec un petit carré ou le pointeur "interdit".

   
Répondre à Posotaz

3

Slay, le 14 sep 2008 à 16:47:37

Je te remercie pour ta réponse! :)

Une dernière petite question, y a-t-il une autre possibilité pour récupérer le clic de la souris pour ne pas utiliser la classe "active"?

   
Répondre à Slay

4

Posotaz, le 14 sep 2008 à 17:33:17

Re salut, :)

En HTML + CSS je ne vois rien qui puisse y substituer. Autrement tu peux utiliser le dynamisme du JavaScript. Il existe l'événement "onMouseDown" qui permet d'intercepter le clic de souris dès que tu appuies sur le bouton (sans avoir besoin de le relâcher), c'est à dire exactement comme tu fais pour le moment.

   
Répondre à Posotaz

5

Slay, le 14 sep 2008 à 17:39:45

Encore merci, je vais garder simplement le html et css, parce que le java... ça me sort un peu par les trous de nez ^^
Bonne journée à toi! :)

   
Répondre à Slay

6

loma, le 21 nov 2008 à 09:55:24
  • +1

Bonjour,

j'ai eu ce même problème, et j'ai trouvé la réponse dans le post suivant :
http://forum.alsacreations.com/...

En résumé, il suffit de mettre outline:none; dans les liens pour ne plus avoir ce problème.
Après, selon certains cela pose des problèmes d'accessibilité, mais pour des sites très graphiques c'est intéressant de savoir comment enlever ce cadre.

   
Répondre à loma

7

 aubin, le 14 sep 2009 à 15:47:46

C'est très simple il suffit de rajouter un outline : 0; et outline : none; à vos liens

   
Répondre à aubin
Posez votre question Répondre
Ils ont besoin de votre aide
Collection CommentÇaMarche.net