[CSS/Javascript] Positionnement relatif d'une image dans un DIV

Positionnement relatif d'une image dans un DIV [CSS/Javascript] - HTML/CSS - Programmation

Marsh Posté le 07-07-2005 à 11:45:45    

Bonjour,
 
je voudrais être capable de positionner une image dans un div de façon relative.
J'ai pensé à deux méthodes en javascript/CSS :
- soit il est possible de le faire directement
- soit on peut récupérer les coordonnées de la DIV en question puis y ajouter un offset en X et en Y pour faire du positionnement relatif.
 
Quelqu'un a-t-il déjà fait ça ?

Reply

Marsh Posté le 07-07-2005 à 11:45:45   

Reply

Marsh Posté le 07-07-2005 à 13:53:49    

pas d'idées sur ce coup là ???

Reply

Marsh Posté le 07-07-2005 à 14:01:34    

ben soit ya rien dans le div et l'image tu la possition avec le margin-left et le margin-top, soit tu met ta div en position:relative, et l'image en position:absolute, puis apres libre à toi te placer l'image avec les propriété top et left

Reply

Marsh Posté le 07-07-2005 à 14:30:31    

ok, j'ai un code qui va bien pour faire ça. Maintenant, je voudrais que je puisse modifier la position du div intérieur par javascript :).
 
Voici la feuille de style :

Code :
  1. div.carte {
  2. background-color: #ddf;
  4. border: 1px solid #669;
  6. padding: 0em;
  7. margin: .25em;
  9. width: 15em;
  10. height: 15em;
  11. }
  13. div.carte div.croix {
  14. position: relative;
  15. background-color: #ea9;
  16. width: 1em;
  17. height: 1em;
  19. left: 1em;
  20. top: 4em;
  21. }


voici ma page de test :

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title>Test</title>
  5. <link href="style.css" rel="stylesheet" type="text/css"/>
  7. </head>
  8. <body>
  9.  <div class="carte">
  10.   <div class="croix">&nbsp;</div>
  11.  </div>
  12. </body>
  13. </html>


 
une indication ?? :D

Reply

Marsh Posté le 07-07-2005 à 14:45:17    

pkoi modifier la position du div avec du JS ?  
parke tu arives po à le faire en CSS ?

Reply

Marsh Posté le 07-07-2005 à 14:48:45    

Ben je voudrais de façon dynamique que lorsqu'on survole un lien, l'image prenne une position en fonction du lien. Les positions possibles étant nombreuses, je préfère n'avoir qu'une image.
 
Je ne vois pas de solution en CSS uniquement

Reply

Marsh Posté le 07-07-2005 à 14:51:25    

Chelou ton truc ...
 


---------------
http://www.alsacreations.com , http://www.openweb.eu.org. Mon CV : http://cv.roane-irkana.net/. Exemple à ne surtout pas suivre : www.worldinternet.be
Reply

Marsh Posté le 07-07-2005 à 18:59:23    

up !

Reply

Marsh Posté le 07-07-2005 à 22:59:30    

up

Reply

Marsh Posté le 07-07-2005 à 23:09:25    

Met des id à ton <div> rouge comme ça:
 

Code :
  1. <div class="carte">
  2. <div id="croix" class="croix">&nbsp;</div>
  3. </div>


 
Et change sa position avec ça, en Javascript:
 

Code :
  1. document.getElementById('croix').style.left = '5em';
  2. //ou
  3. document.getElementById('croix').style.top = '5em';


 
C'est bien ça ?

Reply

Marsh Posté le 07-07-2005 à 23:09:25   

Reply

Marsh Posté le 08-07-2005 à 08:17:35    

hum, ça ressemble à ce que je cherche :)
je teste ça en détails et je te dis ;)
merci !


Message édité par ceyquem le 08-07-2005 à 08:17:40
Reply

Marsh Posté le 08-07-2005 à 09:02:06    

j'aurai dis qu'il y a plus simple :
 
c'est pas un truc de ce genre là que tu veux faire ??
 
http://www.elmoustikoblog.net/bordel/mangas_nemesis/
 
regarde le texte en bas à droite du l'image.
 
et tout ca rien qu'en CSS

Reply

Marsh Posté le 08-07-2005 à 09:10:21    

Dis donc c'est très très joli ça :)
mais c'est pas exactement ce que je veux faire.
Merci en tout cas

Reply

Marsh Posté le 08-07-2005 à 09:20:11    

Excellent !
Je viens de tester ton code et c'est parfaitement ce qu'il me fallait :) Merci
Bonne journée à tous

Reply

Marsh Posté le 08-07-2005 à 09:23:18    

Ma page de test :
 

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <link href="style.css" rel="stylesheet" type="text/css"/>
  5. <script type="text/javascript" language="JavaScript">
  6.  function move( Pleft, Ptop ){
  7.   PcH = false;
  8.   if ( document.getElementById && document.getElementById( 'croix' ) ) // Pour les navigateurs récents
  9.   {
  10.    Pdiv = document.getElementById( 'croix' );
  11.    PcH = true;
  12.    }
  13.   else if ( document.all && document.all[ 'croix' ] ) // Pour les veilles versions
  14.   {
  15.    Pdiv = document.all[ 'croix' ];
  16.    PcH = true;
  17.   }
  18.   else if ( document.layers && document.layers[ 'croix' ] ) // Pour les très veilles versions
  19.   {
  20.    Pdiv = document.layers[ 'croix' ];
  21.    PcH = true;
  22.   }
  23.   if(PcH)
  24.   {
  25.    Pdiv.style.left = Pleft;
  26.    Pdiv.style.top = Ptop;
  27.   }
  28.  }
  29. </script>
  30. </head>
  31. <body>
  32.  <div class="carte">
  33.   <div class="croix" id="croix">&nbsp;</div>
  34.  </div>
  35.  <div><a href="#" onmouseover="javascript:move('0em','0em')">Top Left</a></div>
  36.  <div><a href="#" onmouseover="javascript:move('0em','6.5em')">Left</a></div>
  37.  <div><a href="#" onmouseover="javascript:move('0em','14em')">Bottom Left</a></div>
  39.  <div><a href="#" onmouseover="javascript:move('6.5em','0em')">Top</a></div>
  40.  <div><a href="#" onmouseover="javascript:move('6.5em','6.5em')">Middle</a></div>
  41.  <div><a href="#" onmouseover="javascript:move('6.5em','14em')">Bottom</a></div>
  43.  <div><a href="#" onmouseover="javascript:move('14em','0em')">Top Right</a></div>
  44.  <div><a href="#" onmouseover="javascript:move('14em','6.5em')">Right</a></div>
  45.  <div><a href="#" onmouseover="javascript:move('14em','14em')">Bottom Right</a></div>
  46. </body>
  47. </html>


Message édité par ceyquem le 08-07-2005 à 19:51:10
Reply

Marsh Posté le 08-07-2005 à 09:23:33    

le code de ki ?

Reply

Marsh Posté le 08-07-2005 à 09:27:27    

Lund ;)

Reply

Marsh Posté le 08-07-2005 à 09:37:54    

erf ben ta po tout compris toi
je te fais la meme chose ke tu veux faire (une action sur survol de souris) en CSS et purement en CSS en placant l'image en question ou je veux.

Reply

Marsh Posté le 08-07-2005 à 09:42:33    

ben je veux bien voir le code ;)

Reply

Marsh Posté le 08-07-2005 à 09:49:38    

gatsusat a écrit :

j'aurai dis qu'il y a plus simple :
 
c'est pas un truc de ce genre là que tu veux faire ??
 
http://www.elmoustikoblog.net/bordel/mangas_nemesis/
 
regarde le texte en bas à droite du l'image.
 
et tout ca rien qu'en CSS


 :ouch:  :ouch:  
ca me troue l'cul!!
franchement chiadé ton truc gatsu, euhh y'aurait moyen d'avoir la CSS qui va avec ou alors m'expliquer succintement le principe ? Pasque là y'a moy' de rien récupérer à part le code HTML :'(  
Tes images sont découpées très serré, ou y'a de la transparence ? Comment fais-tu pour les 'superposer' ? Z-index ?
merci d'avance, ca m'intéresse beaucoup  :hello:

Reply

Marsh Posté le 08-07-2005 à 09:52:32    

Code :
  1. * { margin: 0 ; padding: 0 ; }
  3. h1#header
  4. {
  5. width: 785px ;
  6. height: 247px ;
  7. background: url(design/header.jpg) no-repeat ;
  8. }
  10. h1#header span
  11. {
  12. display: none ;
  13. }
  15. ul#menu
  16. {
  17. width: 785px ;
  18. /* on fixe la largeur pour régler la différente interprétation des éléments flottant sous Opera */
  19. height: 103px ;
  20. list-style-type: none ;
  21. background: url(design/vignettes.jpg) no-repeat ;
  22. }
  24. ul#menu li
  25. {
  26. float: left ;
  27. }
  29. ul#menu li a
  30. {
  31. display: block ;
  32. height: 92px ;
  33. position: relative ;
  34. color: #A8B4F3 ;
  35. text-decoration: none ;
  36. }
  38. li#news a { width: 139px ; margin-left: 133px ; }
  39. li#projets a { width: 60px ; margin-left: -15px ; }
  40. li#team a { width: 83px ; margin-left: -21px ; }
  41. li#forum a { width: 88px ; margin-left: -14px ; }
  42. li#livre a { width: 108px ; margin-left: -22px ; }
  43. li#liens a { width: 108px ; margin-left: -26px ; }
  45. li#news a:hover { background: url(design/vignettes.jpg) 0 -103px ; z-index: 1 ; }
  46. li#projets a:hover { background: url(design/vignettes.jpg) -139px -103px ; z-index: 1 ; }
  47. li#team a:hover { background: url(design/vignettes.jpg) -199px -103px ; z-index: 1 ; }
  48. li#forum a:hover { background: url(design/vignettes.jpg) -282px -103px ; z-index: 1 ; }
  49. li#livre a:hover { background: url(design/vignettes.jpg) -370px -103px ; z-index: 1 ; }
  50. li#liens a:hover { background: url(design/vignettes.jpg) -478px -103px ; z-index: 1 ; }
  52. ul#menu li a span
  53. {
  54. display: none ;
  55. }
  57. ul#menu li a:hover span
  58. {
  59. display: block ;
  60. width: 150px ;
  61. position: absolute ;
  62. top: 65px ;
  63. }
  65. li#news a:hover span { left: 500px ; }
  66. li#projets a:hover span { left: 376px ; }
  67. li#team a:hover span { left: 337px ; }
  68. li#forum a:hover span { left: 269px ; }
  69. li#livre a:hover span { left: 203px ; }
  70. li#liens a:hover span { left: 120px ; }

Reply

Marsh Posté le 08-07-2005 à 09:53:47    

je m'explique pourquoi je pense que le pur css n'ira pas : il faut que le survol d'un lien fasse bouger un div qui est dans un autre bloc css que le lien.
 
donc a priori avec le span ca marcherait pas.

Reply

Marsh Posté le 08-07-2005 à 15:53:20    

denzz a écrit :

:ouch:  :ouch:  
ca me troue l'cul!!
franchement chiadé ton truc gatsu, euhh y'aurait moyen d'avoir la CSS qui va avec ou alors m'expliquer succintement le principe ? Pasque là y'a moy' de rien récupérer à part le code HTML :'(  
Tes images sont découpées très serré, ou y'a de la transparence ? Comment fais-tu pour les 'superposer' ? Z-index ?
merci d'avance, ca m'intéresse beaucoup  :hello:


 
le css est pas caché, tu affiches la source html, et t'as ce qu'il faut :o


---------------
http://www.alsacreations.com , http://www.openweb.eu.org. Mon CV : http://cv.roane-irkana.net/. Exemple à ne surtout pas suivre : www.worldinternet.be
Reply

Marsh Posté le 26-07-2005 à 15:39:26    

Euh, pour l'exemple violet, c'est moi l'auteur du code CSS :P pas gatsusat ;)
 
Et pour le graphisme, c'est l'auteur qui l'a fait, faudrait que je vire cet exemple de mon FTP d'ailleurs.
 
Ca vient de là :
http://forum.hardware.fr/hardwaref [...] 4743-1.htm
 
L'idée est donc de jouer sur les z-index, le positionement relatif et les position négatives pour positionner les images au bon endroit.
C'est tout un jeu de réglage.
En fait, les z-index ne servent qu'à IE qui faisait passer les images par dessous.
Le truc réside aussi dans le bon découpage des images et des zones.
 
Enfin, pour obtenir un effet des plus réussi, il convient d'utiliser une image unique pour l'état normal et l'état survolé sinon, le temps de latence dû au chargement de l'image de l'état survolé est plutôt pénible.
 
Vous pourrez retrouver ce genre d'exemples sous peu sur mes tutos qui sont en cours de réorganisation avec des nouveaux qui vont arriver.
http://tutoriels.olivier-patry.net
Ca arrivera d'ici la fin de la semaine, peut être même avant.
 
@+

Reply

Marsh Posté le 26-07-2005 à 15:41:37    

Ahh oui j'oubliais.
 
Les sources sont directement disponible sur la page.
 
La source HTML saute aux yeux. Et pour tout ce qui est style/mise en page/mise en forme etc, c'est géré comme il se doit par les styles CSS comme l'indiquer le @import url(style.css); dans la balise <style>
 
Pour l'image utilisée : http://www.elmoustikoblog.net/bord [...] nettes.jpg
 
Vous voyez le découpage bien réglé pour la partie survolée.


Message édité par OlivierPatry le 26-07-2005 à 15:42:36
Reply

Marsh Posté le 26-07-2005 à 16:00:52    

erf oué javais oublié de dire que c'est pas de moi, toutes mes excuses

Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

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