Un lien quand on clique sur une div ?

Un lien quand on clique sur une div ? - HTML/CSS - Programmation

Marsh Posté le 19-10-2004 à 19:40:08    

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
Reply

Marsh Posté le 19-10-2004 à 19:40:08   

Reply

Marsh Posté le 19-10-2004 à 19:54:50    

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
Reply

Marsh Posté le 19-10-2004 à 19:57:55    

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";

Reply

Marsh Posté le 19-10-2004 à 19:58:30    

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... :)

Reply

Marsh Posté le 19-10-2004 à 20:00:41    

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

---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 19-10-2004 à 20:00:43    

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

Reply

Marsh Posté le 19-10-2004 à 20:01:42    

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.

Reply

Marsh Posté le 19-10-2004 à 20:04:08    

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, ...)


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 19-10-2004 à 20:05:08    

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.

Reply

Marsh Posté le 19-10-2004 à 20:06:26    

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

Reply

Marsh Posté le 19-10-2004 à 20:06:26   

Reply

Marsh Posté le 19-10-2004 à 20:07:02    

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]


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 19-10-2004 à 20:13:48    

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...

Reply

Marsh Posté le 19-10-2004 à 20:27:06    

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


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

Marsh Posté le 19-10-2004 à 20:34:10    

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]


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 19-10-2004 à 21:16:57    

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]

Reply

Marsh Posté le 19-10-2004 à 21:17:49    

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

Reply

Marsh Posté le 19-10-2004 à 22:43:31    

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
Reply

Marsh Posté le 19-10-2004 à 22:49:44    

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

Reply

Marsh Posté le 19-10-2004 à 23:04:56    

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
Reply

Marsh Posté le 20-10-2004 à 10:36:34    

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.
Reply

Sujets relatifs:

Leave a Replay

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