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

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Cadre dynamique autour des images ?

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Cadre dynamique autour des images ?

n°853102
skylight
Made in France.
Posté le 18-09-2004 à 12:11:22  profilanswer
 

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 ?

mood
Publicité
Posté le 18-09-2004 à 12:11:22  profilanswer
 

n°853113
simogeo
j'ai jamais tué de chats, ...
Posté le 18-09-2004 à 12:26:43  profilanswer
 

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
n°853115
skylight
Made in France.
Posté le 18-09-2004 à 12:29:08  profilanswer
 

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

n°853133
skylight
Made in France.
Posté le 18-09-2004 à 12:48:12  profilanswer
 

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/

n°853157
simogeo
j'ai jamais tué de chats, ...
Posté le 18-09-2004 à 13:26:19  profilanswer
 

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
n°853159
skylight
Made in France.
Posté le 18-09-2004 à 13:27:49  profilanswer
 

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]

n°853199
Leris
Posté le 18-09-2004 à 14:59:18  profilanswer
 

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.

n°853470
simogeo
j'ai jamais tué de chats, ...
Posté le 19-09-2004 à 12:35:00  profilanswer
 

sky > tu veux combien de couleurs au fait ?


---------------
from here and there -- \o__________________________________ -- la révolution de la terre, en silence
n°853549
skylight
Made in France.
Posté le 19-09-2004 à 14:47:01  profilanswer
 

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

n°853550
skylight
Made in France.
Posté le 19-09-2004 à 14:48:04  profilanswer
 

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]

mood
Publicité
Posté le 19-09-2004 à 14:48:04  profilanswer
 

n°855156
Leris
Posté le 21-09-2004 à 18:40:16  profilanswer
 

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.

n°855161
skylight
Made in France.
Posté le 21-09-2004 à 18:52:04  profilanswer
 

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

n°855355
Leris
Posté le 21-09-2004 à 23:57:17  profilanswer
 

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.

n°855358
skylight
Made in France.
Posté le 22-09-2004 à 00:04:59  profilanswer
 

Meme chose, hein.


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

  Cadre dynamique autour des images ?

 

Sujets relatifs
Collision entre deux images pour un jeu ...Au secours ! (pb nom d'objet dynamique)
Images et Mailing ListAccès aux champs d'un formulaire dynamique
Problême pour coller des images pour un menuImages. palette de couleurs + les regions
[Légal] Ink control dans le cadre d'une signature[PHP] Modifier JBrowser pour visualiser les images d'un autre serveur
DotClear : répertoire des imagesliste déroulante dynamique + oracle + php
Plus de sujets relatifs à : Cadre dynamique autour des images ?

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.078 secondes

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