Comment faire un lien sur images avec du css ?

Comment faire un lien sur images avec du css ? - HTML/CSS - Programmation

Marsh Posté le 26-11-2005 à 20:35:55    

Bonjour,
 
Je suis un apprentis en ce qui concerne les css  :)  
Mon problème c'est que je ne sais pas comment je pourrais faire un lien sur une image en css !
 

Code :
  1. ex: en html on ferait <href="#"><img src="#"></a> mais en css  ?


alors quelqu'un serait quel bout de code dois-je utilisé en css pour faire un lien sur une image ?  
 
 
merci d'avance

Reply

Marsh Posté le 26-11-2005 à 20:35:55   

Reply

Marsh Posté le 26-11-2005 à 20:40:17    

[:pingouino]
 


---------------
Nos estans firs di nosse pitite patreye...
Reply

Marsh Posté le 26-11-2005 à 20:59:44    

Ex: sur la première page je mets une image, je clique dessus, puis je vais sur la deuxième page  :pt1cable:  
 
Comment faire ça en css ?  :)  
 
SVP aider moi !

Reply

Marsh Posté le 26-11-2005 à 21:01:07    

tu as pas trop du comprendre a quoi sert les css


---------------
Nos estans firs di nosse pitite patreye...
Reply

Marsh Posté le 26-11-2005 à 21:10:52    

Peut être que non ! Je vous ai dis qe j'étais débutant !
Au lieu de dire non ce n'est pas possible de faire ça en css, vous dites tout pour énerver les gens.  
Et après comme d'habitude quand on vous dit quelque chose, après les personnes qui ne respectent pas les règles du  forum c'est toujours nous ! :fou:  
 
Tu ne peux pas dire, écoute, non ça ce n'est pas possible ça. C'est dur de dire ça ?!
 
Merci comme même de votre aide  :(  Je vais aller voir sur un autre forum.


Message édité par mansour le 26-11-2005 à 21:11:45
Reply

Marsh Posté le 26-11-2005 à 21:13:01    

non c'est pas possible :o
 
et faut pas s'enerver comme ca :o


---------------
Nos estans firs di nosse pitite patreye...
Reply

Marsh Posté le 26-11-2005 à 21:18:34    

Je viens te dire que tu fais tout pour m'énervé + tu t'énerves aussi. Y'a pas quoi moi qui s'énerve  :fou:  
 
Et pour quelle raison tu affiche le drapeau à chaque fois tu réponds ?  :pfff:

Reply

Marsh Posté le 26-11-2005 à 21:25:01    

mansour a écrit :

Et pour quelle raison tu affiche le drapeau à chaque fois tu réponds ?  :pfff:


[:rofl]


---------------
Nos estans firs di nosse pitite patreye...
Reply

Marsh Posté le 26-11-2005 à 21:25:45    

Un lien c'est de l'html ... rien a voir avec les CSS ... tu fais une enorme confusion assez peu courante pour etonner Kangol voila tout.
C'est navrant quand meme :p

Reply

Marsh Posté le 26-11-2005 à 21:26:29    

il parle du drapeau dans la liste des topics ? :D

Reply

Marsh Posté le 26-11-2005 à 21:26:29   

Reply

Marsh Posté le 26-11-2005 à 21:27:35    

Merci Afbilou  :)  La j'ai compris.
 
Pas de merci pour ce petit kangol = mongol  :lol:   :kaola:


Message édité par mansour le 26-11-2005 à 21:29:11
Reply

Marsh Posté le 26-11-2005 à 21:30:01    

au moins tu m'as fait rire ^^


---------------
Nos estans firs di nosse pitite patreye...
Reply

Marsh Posté le 26-11-2005 à 21:30:48    

enfin, plus depuis ton edit...
 
tu restes poli stp...


---------------
Nos estans firs di nosse pitite patreye...
Reply

Marsh Posté le 26-11-2005 à 21:32:08    

nooooooooo  :lol:

Reply

Marsh Posté le 26-11-2005 à 21:33:22    

:heink:


---------------
Nos estans firs di nosse pitite patreye...
Reply

Marsh Posté le 26-11-2005 à 21:36:33    

[:abnocte invictus] :lol:

Reply

Marsh Posté le 27-11-2005 à 11:38:12    

http://plainsofpain.free.fr/img/hiboux/owllol1fg.jpg
 
 [:ban]
 
Edit, ah ben, à 15 ans, c'est un ado rebelle envers l'autorité, ca explique son comportement ridicule malpoli et débile à souhait :)
 
En espérant que tu reviennes plus jamais, mansour  [:benou_miam]


Message édité par Roane le 27-11-2005 à 11:39:15

---------------
http://www.alsacreations.com, http://www.openweb.eu.org. Mon CV : http://cv.roane-irkana.net. A ne surtout pas prendre en exemple : http://www.worldinternet.be
Reply

Marsh Posté le 01-12-2005 à 09:36:55    

Et bien si ! On y arrive !
Je suis aussi "apprentie"...
Je suis venue ici hier pour trouver une réponse, je l'ai trouvée ailleurs, (alsacréations) et vous la livre.
Dommage de lire que parfois les échanges tournent mal et qu'il y ait peu de "tolérance" envers les débutants comme nous.
Enfin...!
 
Dans la div où se situe l'image.
Insérer un lien a href

Code :
  1. <div id="top"><div class="zone1"><a class="zone1" href="../index.php" title="Retour accueil"></a></div></div>


 
et lesz CSS correspondantes :

Code :
  1. .zone1 {    /* zone cliquable */
  2. width : 250px;
  3. height: 97px;
  4. float:left;
  5. margin: 10px 10px 10px 30px;
  6. }
  7. .zone1 a:link, .zone1 a:visited, .zone1 a:hover, .zone1 a:active { /* pas de lien sur zone cliquable */
  8. text-decoration:none;
  9. border-bottom:none;
  10. }


 
J'ai dû rajouter des spécifications pour les liens pour l'image, sinon, il prenait en compte les CSS des liens normaux.
J'espère que je suis claire, pas facile d'expliquer lorsqu'on débute.

Reply

Marsh Posté le 01-12-2005 à 12:58:10    

coxine a écrit :

Et bien si ! On y arrive !


Non, on ne peut pas. Les CSS font partie de la présentation. Un lien fait partie du contenu/de la structure. Même avec la pseudo-class :content, on ne peut pas générer des éléments dans la partie HTML.
 

coxine a écrit :

Dans la div où se situe l'image.
Insérer un lien a href

Code :
  1. <div id="top"><div class="zone1"><a class="zone1" href="../index.php" title="Retour accueil"></a></div></div>


 
et lesz CSS correspondantes :

Code :
  1. .zone1 {    /* zone cliquable */
  2. width : 250px;
  3. height: 97px;
  4. float:left;
  5. margin: 10px 10px 10px 30px;
  6. }
  7. .zone1 a:link, .zone1 a:visited, .zone1 a:hover, .zone1 a:active { /* pas de lien sur zone cliquable */
  8. text-decoration:none;
  9. border-bottom:none;
  10. }


 
J'ai dû rajouter des spécifications pour les liens pour l'image, sinon, il prenait en compte les CSS des liens normaux.
J'espère que je suis claire, pas facile d'expliquer lorsqu'on débute.


Désolé, mais... Et alors ? Y'a pas de lien en CSS [:johneh] Ensuite à quoi sert ta div autour du lien ? Vu que tu appliques la classe zone1 au lien et à la div autour :??:

Reply

Marsh Posté le 01-12-2005 à 13:00:50    

coxine a écrit :

Et bien si ! On y arrive !
Je suis aussi "apprentie"...
Je suis venue ici hier pour trouver une réponse, je l'ai trouvée ailleurs, (alsacréations) et vous la livre.
Dommage de lire que parfois les échanges tournent mal et qu'il y ait peu de "tolérance" envers les débutants comme nous.
Enfin...!


 
Le

Citation :

Kangol= mongol

était poli peut-etre ?
 
Faut pas abuser non plus, on est pas là pour aider et se faire insulter en échange :o


---------------
http://www.alsacreations.com, http://www.openweb.eu.org. Mon CV : http://cv.roane-irkana.net. A ne surtout pas prendre en exemple : http://www.worldinternet.be
Reply

Marsh Posté le 01-12-2005 à 13:06:21    

rho vous jouez sur les mots !
Peut être que mansour s'est mal exprimé en posant sa question.
SVP les développeurs pro, soyez indulgents sur la sémantique que l'on emploie. J'ai remarqué que lorsqu'on est débutant et que l'on se plante sur des termes ou mots, on nous le fait remarquer mais l'on n'a pas pour autant la réponse à notre question.
 
Moi j'ai été confrontée à ce problème : j'ai une image en background dans le top de mon site (gérée par une CSS), et je n'arrivais pas à y insérer un lien. donc plutôt de répondre ah ben t'as tout faux, aidez-nous ! On a précisé que nous sommes débutants.
 
Je ne sais pas comment j'y suis arrivée, mais le résultat que j'attendais est là
J'ai enfin un lien sur toutes les pages de mon site sur l'image du calque "top". qui permet de revenir à l'accueil. Je ne voulais pas insérer cette image en "dur".
Ok y a pas un lien en CSS, mais un lien <a href> inséré dans la div class zone 1 qui elle est plus petite que mon image d'origine (800x130).
Je ne connais pas de forum pour archis débutants...dommage, car j'apprends bcp des gens qui maitrisent..mais pas toujours facile de trouver des oreilles indulgentes !

Reply

Marsh Posté le 01-12-2005 à 13:08:55    

oups je vois que qq'un a répondu pendant que postais mon dernier message.
Je ne fais pas allusion aux "insultes" puériles. Je n'ai pas de remarque à faire à ce sujet, je trouve cela vraiment déplacé et dommage.
Je ne suis pas venue pour prendre la défense de qqu'un, juste pour "échanger" cordialement, et trouver des réponses à mes questions !
Mais comme je le disais, peut-être qu'il existe d'autres forums pour "nuls"..mais malheureusement, ce n'est pas là-bas qu'on trouvera des réponses de pros et d'experts pour nous faire avancer !
 :)

Reply

Marsh Posté le 01-12-2005 à 13:10:22    

coxine a écrit :

rho vous jouez sur les mots !
Peut être que mansour s'est mal exprimé en posant sa question.


Oui, je pense que tu as loupé ce qu'il a dit :D
 

coxine a écrit :

SVP les développeurs pro, soyez indulgents sur la sémantique que l'on emploie.


Sauf que c'est grâce à la sémantique qu'on comprend ce que veux faire l'homme... Et parfois, c'est dur de deviner :(
 

coxine a écrit :

J'ai enfin un lien sur toutes les pages de mon site sur l'image du calque "top". qui permet de revenir à l'accueil. Je ne voulais pas insérer cette image en "dur".


Sauf que du coup, le lien est vide... Vraiment pas top pour l'accessbilité et pour les moteurs de recherche... Même avec l'utilisation de l'attribut title, je ne pense pas que ça soit super :(
 

coxine a écrit :

Ok y a pas un lien en CSS, mais un lien <a href> inséré dans la div class zone 1 qui elle est plus petite que mon image d'origine (800x130).


La div zone1 ne sert à rien, tu peux la supprimer. Seul le lien sert.

Reply

Marsh Posté le 01-12-2005 à 13:12:22    

coxine a écrit :

Mais comme je le disais, peut-être qu'il existe d'autres forums pour "nuls"..


Y'a le forum d'alsacréations où c'est un peu plus gentil niveau accueil.
 
Mais un forum spécial super-nul est extrêmement difficile à tenir : on le vois ici, les super-nuls posent toujours les mêmes questions, font toujours les même erreurs, et oublient de commencer par le commencement. Genre s'intéresser un peu à la technologie employée, étudier la liste des balises disponibles, bien piger les notions de séparation contenu/présentation. Bref, faire un site web n'est pas si facile que ça...

Reply

Marsh Posté le 01-12-2005 à 13:16:24    

Florent
Désolée je ne sais pas faire de citation  :D  
Ca veut dire quoi : "Sauf que du coup, le lien est vide... Vraiment pas top pour l'accessbilité et pour les moteurs de recherche... Même avec l'utilisation de l'attribut title, je ne pense pas que ça soit super :( "
Ce lien n'apparait pas sur la page d'accueil. Mais sur les pages dans le contenu, dans des répertoires. Il y a aussi un fil d'ariane qui permet de naviguer. En fait, j'ai souhaité rajouter le lien sur l'image du haut, car quelqu'un (un pro internet) m'a fait la remarque que cela manquait à la bonne ergonomie du site.
 
Y a-t-il d'autres solutions ? :??:  
 
Je précise, que je suis webmestre pour un site associatif...que je ne suis pas pro, mais passionnée par le langage de prog, la découverte récente (pour ma part) du Xhtml et de la programmation php..;et que j'ai appris sur le "tas" grâce à des sites comme celui ci, alsacreations, et bien d'autres.... ;)  

Reply

Marsh Posté le 01-12-2005 à 14:10:38    

Pour la citation, clique l'image http://forum-images.hardware.fr/themes_static/images_forum/1/quote.gif en dessous du message que tu veux citer. Ca t'ouvrira une page avec le message en citation. Tu peux aussi cliquer sur l'image http://forum-images.hardware.fr/themes_static/images_forum/1/quote+.gif mais je sais pas exactement comment ca marche.
 
Ce qu'il veut dire pour l'acessibilité, c'est que pour ceux qui ne voyent pas l'image de fond (aveugle et malvoyant disposant de logiciels de lecture vocale, personne disposant d'un navigateur texte ou d'un navigateur réglé pour ne pas afficher les images, ...) le lien n'est pas cliquable vu qu'il ne prendra aucun pixel à l'écran et même si on peut le sélectioner, on ne saura pas vers quoi il pointe vu qu'on ne voit pas l'image de toute maniére.

Message cité 1 fois
Message édité par omega2 le 01-12-2005 à 14:11:19
Reply

Marsh Posté le 01-12-2005 à 14:22:39    

omega2 a écrit :

Ce qu'il veut dire pour l'acessibilité, c'est que pour ceux qui ne voyent pas l'image de fond (aveugle et malvoyant disposant de logiciels de lecture vocale, personne disposant d'un navigateur texte ou d'un navigateur réglé pour ne pas afficher les images, ...) le lien n'est pas cliquable vu qu'il ne prendra aucun pixel à l'écran et même si on peut le sélectioner, on ne saura pas vers quoi il pointe vu qu'on ne voit pas l'image de toute maniére.

:pt1cable:  
Merci pour l'explication !
Ok, capito.
Bon, j'espère que le fil d'ariane que j'ai mis sur les pages, qui est en fait une image là cette fois ci  :sarcastic:  aidera les malvoyants ou autres personnes n'affichant pas les images à se repérer dans le site.
Ou bien, je vais le mettre en texte et non en images !
Merci pour tout !
Je vais tenter une application PHP pour intégrer un moteur..au vu des réponses ds le topic "php" j'ai tout intérêt à cogiter un peu avant de poser ma question  :lol:  
 
 ;)

Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed