Votre question

Masquer lien d'une zone cliquable d'une image

Tags :
  • souris
  • Programmation
Dernière réponse : dans Programmation
27 Juin 2008 12:58:57

Bonjour,
Je débute mais j'ai une question... Comment masquer un lien d'une zone cliquable d'une image ? C'est à dire faire en sorte que lorsque l'on passe la souris sur une partie de l'image, on ne voie pas que c'est un lien. Merci

AF117

Autres pages sur : masquer lien zone cliquable image

27 Juin 2008 13:59:45

Bonjour,

dans votre css :

  1. img a {
  2. cursor:default;
  3. }
27 Juin 2008 17:56:22

Ca ne marche pas ! Qqun a autre chose ?
Contenus similaires
27 Juin 2008 19:27:01

Vous voulez bien cacher le curseur ?

Autrement essayez directement sur votre image

  1. <img src="image.png" style="cursor:default;" />
27 Juin 2008 19:53:02

non je pense ce qu'il veux c'est faire : si l'on met son curseur sur une image qui ne mène nul part, ça fait une flèche mais si l'on met le curseur sur une image qui mène vers une page, ça nous met une main

AF117 veut que a la place de la main, il y est une flèche pou cacher la présence du lien qu'envoie l'image
27 Juin 2008 20:17:10

Oula ! Je n'ai rien compris :) 

En gros :
- Images sans lien : curseur normal
- Images avec lien : curseur en main

?
27 Juin 2008 23:54:14

Non !
J'aimerais que le lien soit caché lorsque l'on passe la souris dessus -> Que la flèche de la souris ne se transforme pas main mais reste une flèche.
28 Juin 2008 11:22:07

Dans ce cas c'est comme cela :
  1. <img src="image.png" style="cursor:default;" />
28 Juin 2008 11:29:18

Mais cela ne marche pas !
28 Juin 2008 19:35:35

attend lol

tu a mis ce code dans le code css ??

ta enlever le 1. de cet phrase ??

tu as changé image.png par le nom de ton image et par ton extansion ??
28 Juin 2008 19:46:33

je viens de tester et ca marche niquel chez moi enfin la première solution !

regarde dans ton code css tu mets :

a img
{
border: none;
cursor: default;

}

et puis tu n'oublie pas de mettre dans ton html la balise link entre <head> et </head>
29 Juin 2008 17:22:40

Effectivement si jamais AF117 ne connais pas les bases ça ne risque pas de marcher...
1 Juillet 2008 12:35:35

Ca ne marche pas...
Voici mon HTML:
  1. <td class="footer">
  2. <img src="images/footer.jpg" border=0 width="906" height="128" usemap="#map2" style="cursor efault;">
  3.  
  4. <MAP name=map2>
  5. <AREA href="admin/index.php" shape="rect" coords="24,66,37,71">
  6.  
  7. </MAP></td>

Et voici mon css:

  1. .footer {
  2. HEIGHT: 128px
  3. }
  4. .footer a:img{
  5. cursor: default;
  6. border: none;
  7. }

Je ne vois pas ou est le prob...
1 Juillet 2008 20:44:01

oula il y a des petits probleme dans ton code je crois !

tu mais tout en double ;) 

je vais t'expliquer

déjà tu met dans ton code html l'image que tu veux !

exemple :
________________________________________________________

<!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" xml:lang="fr" >
<head>
<title>Bienvenue sur mon site !</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" >
</head>
<body>
<p>voici une image</p>
<a href="http://ton lien ou tu veux aller.html"><img src="ton image.ton extension" alt="le titre de l'image"></a>
</body>
</html>

_______________________________________________________

tout ce qui est en vert, tu PEUX le changer.

tout ce qui est en rouge, tu DOIS le changer.


puis dans ton css qui s'appelle design.css (dans l'exemple), tu met

  1. a img
  2. {
  3. border: none;
  4. cursor: default;
  5.  
  6. }


et puis voila

tu ne doit pas mettre .footer parce que ton image est footer.jpg et quand tu met HEIGHT: 128px, tu enlève l'accolade qui suit ! c'est du boulot ni fait, ni a faire dsl !

pas besoin de mettre tout tes code parce que la tu t'embête la vie
après si tu veux redimensionner l'image, tu fait dans ton css :

  1. a img
  2. {
  3. border: none;
  4. cursor: default;
  5. width: 155px; /* tu modifie la taille de ton image apres */
  6. height: 20px; /* idem */
  7.  
  8. }
1 Juillet 2008 23:47:35

Merci bien, je vais essayer !
2 Juillet 2008 13:08:21

oki tu nous tiens au courant !
4 Juillet 2008 18:43:48

Du nouveau !
Enfait, avec le nouveau code, ca marche sous IE7 mais pas FF3 ni Opéra...
Et sur IE7, on a toujours un lien s'affichant en bas à gauche du navigateur lorsqu'on passe la souris dessus...
J'attend vos réactions ! ^^
A+
5 Juillet 2008 00:02:08

ah sa désolé mais je crois que le lien y restera tjrs lol

attend je vais essayé des méthodes mais sa m'étonnerais que ca marche :s
6 Juillet 2008 10:14:36

Du nouveau ?
a b L Programmation
6 Juillet 2008 11:26:29

De toutes façons en réglant bien les options de firefox, il y a toujours moyen de voir le lien, et heureusement !
6 Juillet 2008 16:07:27

Ok mais y a pas un moyen qu'on ne voie au moins pas la main sous FF3 et opéra ?!?
6 Juillet 2008 19:24:52

on te la dit plus haut comment faire !
6 Juillet 2008 23:00:20

Ben ca ne marche pas, tu lis un peu ?
9 Juillet 2008 12:26:02

bah oui je lis !

deja je suis ton topic pour t'aider donc si t'es pas content tu le dis et je me casse !
9 Juillet 2008 12:54:37

je crois qu'avec onclick() ( javascript ) le navigateur ne l'interprete pas comme un lien
9 Juillet 2008 17:17:03

Pourrais-tu être un peu plus clair STP ?
10 Juillet 2008 09:51:00

<img src="..." onclick="tafonction();" > // je crois que le ; n'est pas indispensable.

puis dans <script language="JavaScript"></script> qui se trouve dans ton <head> tu mets ta fonction

function tafonction() {

// ce que tu veux faire
}
Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS