Cadre dynamique autour des images ?

Cadre dynamique autour des images ? - HTML/CSS - Programmation

Marsh Posté le 18-09-2004 à 12:11:22    

Hello,
 
Voici un exemple de page Web.
http://laurent.levasseur.free.fr/_sky/test.html
 
Ce que je cherche à faire, c'est de pouvoir faire un cadre de plusieurs couleurs autour de l'image.
J'ai donc pensé a y foutre quelques divs autour, avec une propriété chacun.
J'ai mis les hauteurs et largeurs en auto, pensant que celà aurait été bon, mais en fait non ...
 
Une condition : je ne connais pas les dimensions des images à l'avance, sinon ca aurait été trop simple :D
 
Une astuce ?

Reply

Marsh Posté le 18-09-2004 à 12:11:22   

Reply

Marsh Posté le 18-09-2004 à 12:26:43    

déja mettre la premiere bordure sur l'image.
 
<img style="border:4px solid #aaa;" src="quattroporte2.jpg" alt="Img" />
 
(tu peux calculer les dimensions de l'image s'il le faut vraiment)


---------------
from here and there -- \o__________________________________ -- la révolution de la terre, en silence
Reply

Marsh Posté le 18-09-2004 à 12:29:08    

Oui, mais bon ca fait pas super propre quoi :D

Reply

Marsh Posté le 18-09-2004 à 12:48:12    

Bug spotted on dirait ?
Il y a un espace de 2 pixels en dessous de l'image ...
 
étrange car
ici ca marche :D
http://laurent.levasseur.free.fr/_sky.test.html
 
et ici non :D
 
http://81.56.242.72/

Reply

Marsh Posté le 18-09-2004 à 13:26:19    

skylight a écrit :

Bug spotted on dirait ?
Il y a un espace de 2 pixels en dessous de l'image ...


 
http://incongru.webdynamit.net/EspaceSousLesImages [:dawa]


---------------
from here and there -- \o__________________________________ -- la révolution de la terre, en silence
Reply

Marsh Posté le 18-09-2004 à 13:27:49    

Tiens je le savais mais ca ne m'a meme pas traversé l'esprit [:dawa] Surtout que dans l'un des exemples ça ne le fait pas [:dawa]

Reply

Marsh Posté le 18-09-2004 à 14:59:18    

salut,
 
si ça peut t'aider ...
 

Code :
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2. <html>
  3. <head>
  4. <title>Page Web</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  6. <style type=text/css>
  7. body{
  8. text-align:center; color: blue; font-size: 11px; font-family: Arial, Helvetica; margin:0px; background:aliceblue;
  9. }
  10. #cont{
  11. position:absolute; top:50%; left:50%; margin-left: -300px; margin-top: -250px; width:600px; height:500px; padding:0px; border:1px solid blue;background-color:#E1E1FF;
  12. }
  13. </style>
  14. <script language=JavaScript>
  15. function look(){
  16. var W = document.mypict.width;
  17. var H = document.mypict.height;
  18. document.getElementById('ext').style.width = W+20+'px';
  19. document.getElementById('ext').style.height = H+20+'px';
  20. }
  21. </script>
  22. </head>
  23. <body>
  24. <div id="cont"><br><br>
  25. la petite image fait 100*69 , la grande 468*325 , mais ça n'a pas d'importance ...
  26. <div id="ext" style="border:2px solid green; background-color:white;margin-left:auto;margin-right:auto;">
  27. <div style="border:2px solid red;margin:2px">
  28. <div style="border:2px solid blue;margin:2px;">
  29. <img src="http://perso.wanadoo.fr/chateau-de-val/bluejayway/photos/106s.jpg" name="mypict" id="mypic" style="margin:2px;" onload="look();" onclick="document.getElementById('mypic').src='http://perso.wanadoo.fr/chateau-de-val/bluejayway/photos/106.jpg';"></div></div></div>
  30. </div>
  31. </body>
  32. </html>


 
 
++
 
L.

Reply

Marsh Posté le 19-09-2004 à 12:35:00    

sky > tu veux combien de couleurs au fait ?


---------------
from here and there -- \o__________________________________ -- la révolution de la terre, en silence
Reply

Marsh Posté le 19-09-2004 à 14:47:01    

autant que je veux en fait, mais bon pour un dégradé, ca se résume à 3-4 en général...

Reply

Marsh Posté le 19-09-2004 à 14:48:04    

Leris a écrit :

salut,
 
si ça peut t'aider ...
 

Code :
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2. <html>
  3. <head>
  4. <title>Page Web</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  6. <style type=text/css>
  7. body{
  8. text-align:center; color: blue; font-size: 11px; font-family: Arial, Helvetica; margin:0px; background:aliceblue;
  9. }
  10. #cont{
  11. position:absolute; top:50%; left:50%; margin-left: -300px; margin-top: -250px; width:600px; height:500px; padding:0px; border:1px solid blue;background-color:#E1E1FF;
  12. }
  13. </style>
  14. <script language=JavaScript>
  15. function look(){
  16. var W = document.mypict.width;
  17. var H = document.mypict.height;
  18. document.getElementById('ext').style.width = W+20+'px';
  19. document.getElementById('ext').style.height = H+20+'px';
  20. }
  21. </script>
  22. </head>
  23. <body>
  24. <div id="cont"><br><br>
  25. la petite image fait 100*69 , la grande 468*325 , mais ça n'a pas d'importance ...
  26. <div id="ext" style="border:2px solid green; background-color:white;margin-left:auto;margin-right:auto;">
  27. <div style="border:2px solid red;margin:2px">
  28. <div style="border:2px solid blue;margin:2px;">
  29. <img src="http://perso.wanadoo.fr/chateau-de-val/bluejayway/photos/106s.jpg" name="mypict" id="mypic" style="margin:2px;" onload="look();" onclick="document.getElementById('mypic').src='http://perso.wanadoo.fr/chateau-de-val/bluejayway/photos/106.jpg';"></div></div></div>
  30. </div>
  31. </body>
  32. </html>


 
 
++
 
L.


 
Du JS alors que le CSS est fait pour ça [:autobot]

Reply

Marsh Posté le 19-09-2004 à 14:48:04   

Reply

Marsh Posté le 21-09-2004 à 18:40:16    

Citation :

Une condition : je ne connais pas les dimensions des images à l'avance


 
dès que tu arrives à obtenir les dimensions d'une images par css , tu me fait signe , ça m'interresse beaucoup !
 
 :lol:  
 
L.

Reply

Marsh Posté le 21-09-2004 à 18:52:04    

Php, mon gars. mais ca alourdit et c'est pas tres pro.
je vais essayer avec les auto.

Reply

Marsh Posté le 21-09-2004 à 23:57:17    

t'as raison , les autos y'a pas mieux ... renault va commercialiser la Logan .
 
en tout cas , moi j'ai reussi ... sans javascript . tout en css.
 
 :bounce:  
 
L.

Reply

Marsh Posté le 22-09-2004 à 00:04:59    

Meme chose, hein.

Reply

Sujets relatifs:

Leave a Replay

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