Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1496 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Un lien quand on clique sur une div ?

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Un lien quand on clique sur une div ?

n°877326
Dawa
www.shootmeagain.com
Posté le 19-10-2004 à 19:40:08  profilanswer
 

Bonjour !
 
Je vais essayer d'etre clair. Je voudrais savoir comment il est possible d'avoir comme lien hypertexte non pas un texte ou une image, mais bien une div complete. par exemple ici :
 
http://www.shootmeagain.com/?section=reviews
 
je voudrais que, quand on clique sur n'importe endroit du bloc, on tombe sur la chronique... comment faire?
 
comment faire également, pour que, quand je passe avec ma souris sur la div, le fond change de couleur? je sais que c'est surement à base de onmouseout etc, mais comment précisément?  
 
merci !


---------------
SHOOT ME AGAIN WEBZINE
mood
Publicité
Posté le 19-10-2004 à 19:40:08  profilanswer
 

n°877331
skylight
Made in France.
Posté le 19-10-2004 à 19:54:50  profilanswer
 

onclic="javascript:window.location.href=''" onmouseover="this.style.cursor = hand;" onmouseout="this.style.cursor = default";


Message édité par skylight le 19-10-2004 à 19:56:18
n°877337
Hermes le ​Messager
Breton Quiétiste
Posté le 19-10-2004 à 19:57:55  profilanswer
 

Dawa a écrit :

Bonjour !
 
Je vais essayer d'etre clair. Je voudrais savoir comment il est possible d'avoir comme lien hypertexte non pas un texte ou une image, mais bien une div complete. par exemple ici :
 
http://www.shootmeagain.com/?section=reviews
 
je voudrais que, quand on clique sur n'importe endroit du bloc, on tombe sur la chronique... comment faire?


 
Un "onclick=fonction_javascript('lien_souhaité.html');" par exemple...
 
Et dans ta fonction javascript : regarde du côté de l'objet window et de la méthode open.
 

Citation :

comment faire également, pour que, quand je passe avec ma souris sur la div, le fond change de couleur? je sais que c'est surement à base de onmouseout etc, mais comment précisément?  
 
merci !


 
C'est possible uniquement avec des CSS, mais ça ne passera pas avec IE.
 
Donc là aussi javascript.
 
onmouseover="fonction_over('id_du_div')";" onmouseout="fonction_out('id_du_div')";
 
Et là tu fais deux fonctions :
 
La fonction_over et la fonction_out.
 
Pour changer dynamiquement une propriété CSS avec JS :
 
document.getElementById('id_que_tu_veux_changer').style.propriété_CSS_que_tu_veux_changer = "nouvelle valeur";

n°877338
Hermes le ​Messager
Breton Quiétiste
Posté le 19-10-2004 à 19:58:30  profilanswer
 

skylight a écrit :

onclic="javascript:window.location.href=''" onmouseover="this.style.cursor = hand;" onmouseout="this.style.cursor = default";


 
Non, il veut que le fond change de couleur... :)

n°877341
masklinn
í dag viðrar vel til loftárása
Posté le 19-10-2004 à 20:00:41  profilanswer
 

ca serait pas possible d'indenter un peu le code?
parce que ca fait mal aux yeux le source :sweat:  
 
 
Pour le fond qui change > CSS  

Code :
  1. div:hover {
  2.     background-color: #3F5;
  3. }


et accessoirement IE ne le gère pas nativement, faut utiliser IE7
 
pour les liens, englober le div dans un <a /> ne marche pas? (j'ai jamais fait donc ca risque que non mais bon [:ddr555] )
 
PS: ici le lien fait toute la div, mais c'est un cas spécial (le div contient une ligne en visibility:hidden et une image en background, le lien englobe la ligne mais il passe sur l'intégralité du div)
 

Citation :

C'est possible uniquement avec des CSS, mais ça ne passera pas avec IE.


Avec IE7 ca marche très bien (voir sur mon lien, c'est une mini démo IE7 perso, hover fonctionne sur un div avec un changement de bg [:thierry3] )
(d'ailleurs le fait que IE recharge les images à chaque fois fait que c'est un peu lent, même si j'ai pas testé j'ai idée que c'est 'achement plus rapide avec de simples couleurs (pas de clignottement))


Message édité par masklinn le 19-10-2004 à 20:02:36

---------------
I've never understood the compulsion to use Web technologies minus the Web's security and deployment models. It seems a bit like throwing the orange away and eating the peel. — @ justinschuh‬
n°877342
skylight
Made in France.
Posté le 19-10-2004 à 20:00:43  profilanswer
 

Hermes le Messager a écrit :

Non, il veut que le fond change de couleur... :)


j'avais pas vu, ben il rajoute un this.style.background-color = "truc";
 
pour le curseur, je mets la main pour que les gens voient que c'est un lien... car le survol d'un div reste la fleche standard :D

n°877343
skylight
Made in France.
Posté le 19-10-2004 à 20:01:42  profilanswer
 

Masklinn a écrit :

ca serait pas possible d'indenter un peu le code?
parce que ca fait mal aux yeux le source :sweat:  
 
 
Pour le fond qui change > CSS  

Code :
  1. div:hover {
  2.     background-color: #3F5;
  3. }


et accessoirement IE ne le gère pas nativement, faut utiliser IE7
 
pour les liens, englober le div dans un <a /> ne marche pas? (j'ai jamais fait donc ca risque que non mais bon [:ddr555] )
 
PS: ici le lien fait toute la div, mais c'est un cas spécial (le div contient une ligne en visibility:hidden et une image en background, le lien englobe la ligne mais il passe sur l'intégralité du div)

encore mieux, utiliser la balise <a> en mode block.

n°877349
masklinn
í dag viðrar vel til loftárása
Posté le 19-10-2004 à 20:04:08  profilanswer
 

skylight a écrit :

encore mieux, utiliser la balise <a> en mode block.


ouaip [:figti]  
en faisant bien attention à changer les propriétés de base des <a> pour lui (couleur, text-decoration, ...)


---------------
I've never understood the compulsion to use Web technologies minus the Web's security and deployment models. It seems a bit like throwing the orange away and eating the peel. — @ justinschuh‬
n°877350
Hermes le ​Messager
Breton Quiétiste
Posté le 19-10-2004 à 20:05:08  profilanswer
 

Je n'aime pas vos solutions.
 
1) IE7 pourquoi pas, mais du coup, le mec apprendra jamais rien en JS, or, il en aura besoin tôt ou tard.
 
2) Pour les autres, apprendre à faire une fonction hors du HTML, c'est le minimum, et c'est très important, surtout quand on débute.

n°877353
skylight
Made in France.
Posté le 19-10-2004 à 20:06:26  profilanswer
 

bah, le lien <a> utilisé en mode block va tres bien je trouve.

mood
Publicité
Posté le 19-10-2004 à 20:06:26  profilanswer
 

n°877354
masklinn
í dag viðrar vel til loftárása
Posté le 19-10-2004 à 20:07:02  profilanswer
 

Hermes le Messager a écrit :

Je n'aime pas vos solutions.
 
1) IE7 pourquoi pas, mais du coup, le mec apprendra jamais rien en JS, or, il en aura besoin tôt ou tard.


Sauf que dans un premier temps ca lui permettra de faire du joli code valide (au lieu de se mettre à bloater ses sites avec du JS partout :o)
 [:the real phoenix]


---------------
I've never understood the compulsion to use Web technologies minus the Web's security and deployment models. It seems a bit like throwing the orange away and eating the peel. — @ justinschuh‬
n°877362
Hermes le ​Messager
Breton Quiétiste
Posté le 19-10-2004 à 20:13:48  profilanswer
 

Masklinn a écrit :

Sauf que dans un premier temps ca lui permettra de faire du joli code valide (au lieu de se mettre à bloater ses sites avec du JS partout :o)
 [:the real phoenix]


 
Je crains que le "premier temps" dure éternellement...  :D  
 
Et puis je déteste utiliser des trucs que je ne comprends pas/maitrise pas et/ou que je ne pas entièrement fait moi-même...

n°877376
KangOl
Profil : pointeur
Posté le 19-10-2004 à 20:27:06  profilanswer
 

merci sky pour l'info...
 
note que sous mozilla faut mettre pointer et pas hand ;)


---------------
Nos estans firs di nosse pitite patreye...
n°877382
masklinn
í dag viðrar vel til loftárása
Posté le 19-10-2004 à 20:34:10  profilanswer
 

Hermes le Messager a écrit :

Et puis je déteste utiliser des trucs que je ne comprends pas/maitrise pas et/ou que je ne pas entièrement fait moi-même...


Pourtant tu utilises bien Firefox [:kbchris]


---------------
I've never understood the compulsion to use Web technologies minus the Web's security and deployment models. It seems a bit like throwing the orange away and eating the peel. — @ justinschuh‬
n°877446
Hermes le ​Messager
Breton Quiétiste
Posté le 19-10-2004 à 21:16:57  profilanswer
 

Masklinn a écrit :

Pourtant tu utilises bien Firefox [:kbchris]


 
non, j'utilise mozilla, et puis ça n'a rien à voir. Je parle de "prog".  [:totozzz]

n°877450
Hermes le ​Messager
Breton Quiétiste
Posté le 19-10-2004 à 21:17:49  profilanswer
 

KangOl a écrit :

merci sky pour l'info...
 
note que sous mozilla faut mettre pointer et pas hand ;)


 
quelque soit le navigateur , c'est pointer. et tant pis pour IE < 6

n°877555
Dawa
www.shootmeagain.com
Posté le 19-10-2004 à 22:43:31  profilanswer
 

bon j'ai lu vos explications et je dois dire que je m'embrouille un peu, je sais pas trop ce qui est le mieux entre mettre un bout de javascript (je suis pas contre, j'ai deja quelques morceaux par-ci par-là dans mon code...) ou mettre la div en block dans un <a>, ce que j'ai essayé et qui ne marche qu'à moitié sous IE et pas du tout sous Firefox : http://masterdawa.dyndns.org/shootme/?section=reviews
 
j'aimerais qd meme préciser que j'aimerais faire des trucs qui marchent sous IE, car c'est qd meme le navigateur le + répandu, d'autant + que ce site est lu qd meme en majorité par des gens qui ne sont pas spécialement balaises en info, et donc qui ne vont pas faire la démarche d'installer un autre navigateur sur leur ordi... donc je voudrais la solution la plus universelle dirons-nous !  
 
merci à tous en tout cas !


---------------
SHOOT ME AGAIN WEBZINE
n°877567
Hermes le ​Messager
Breton Quiétiste
Posté le 19-10-2004 à 22:49:44  profilanswer
 

Dans ce cas, suis ma méthode qui marchera partout.

n°877580
Dawa
www.shootmeagain.com
Posté le 19-10-2004 à 23:04:56  profilanswer
 

ok, je te remercie.
 
ca me semble etre la bonne occasion de commencer a créer des fonctions javascript alors...
 
je vais chercher quelques infos de ce coté, et essayer de bidouiller un peu. si jamais j'ai un petit probleme je reviens :o
 
merci !


---------------
SHOOT ME AGAIN WEBZINE
n°877774
Lorr Hyde
L'univers est trop grand Zut !
Posté le 20-10-2004 à 10:36:34  profilanswer
 

voilà ce que je ferais
 
HTML:
[/cpp]
<a class="typeb" href="index.php?page=inscription.html">
  <span class="liengrand">inscription</span>
</a>
[/cpp]
CSS:

Code :
  1. a.typeb
  2. {
  3. display: block;
  4. background-image:url(../images/bt_1A.jpg);
  5. background-repeat:no-repeat;
  6. background-position:top;
  7. height:75px;
  8. width:88px;
  9. text-decoration:none;
  10. }
  11. a.typeb:hover
  12. {
  13. background-image:url(../images/bt_1B.jpg);
  14. }
  15. span.liengrand
  16. {
  17. position:absolute;
  18. bottom:0px;
  19. width:88px;
  20. color:#666666;
  21. text-decoration:none;
  22. text-align:center;
  23. font-size: 14px;
  24. font-weight:bold;
  25. cursor:hand
  26. }


 
Cela me semble correct
en plus je n'aime pas le JS quand je peut l'éviter


---------------
Tout n'est descriptible que du point de vue de l'observateur, donc sûrement faux pour le reste du monde.

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Un lien quand on clique sur une div ?

 

Sujets relatifs
[Assez urgent] Lien au sein d'un tableau, c'est possible ?Lien hypertexte sur les Modèles (.DOT)
mon lien a href modifie la taille de la fontdelphi : une image qui s enfonce comme un bouton qd on clique dessus?
lien dans un div qui s'ouvre dans un autre divpb données de access vers excel avec lien hypertexte
[XSL-WML] Desactiver un lien apres avoir cliqué dessus ?Imposer un lecteur de video quand on clique sur un lien
Difuser un son au clique d un lien[php] trouver une ruse : updater une bd qd on clique sur un lien
Plus de sujets relatifs à : Un lien quand on clique sur une div ?


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR