Image aleatoire + lien automatique vers l'image taille réelle et .....

Image aleatoire + lien automatique vers l'image taille réelle et ..... - HTML/CSS - Programmation

Marsh Posté le 02-02-2006 à 08:37:22    

BOnjour !
 
Je connais les générateurs de galeries d'images avec les quelles on a une preview puis apres un clique on a la photo taille réelle
mais ce que je voudrais c'est SA ! + pouvoir les mettrent (les preview clicables) en images aléatoire dans un carre de 100*150 px sur chaqu'une de me pages ...
 voila pas facile tout sa
 
 
merci d'avance !!!!

Reply

Marsh Posté le 02-02-2006 à 08:37:22   

Reply

Marsh Posté le 02-02-2006 à 08:39:20    

Ouais lol, que veut qu'on te dise ...oui c'est possible..
 
Avec du php ;) ou autre langages serveurs.

Reply

Marsh Posté le 02-02-2006 à 08:42:08    

ben enfaite c pour savoir comment faire j'y connais rien alors ....

Reply

Marsh Posté le 02-02-2006 à 15:16:51    

Ben ici on est pas là pour donner du code tout fais si le gars n'y connais rien ;)
 
Donc soit tu t'y met...soit va voir sur google pour trouver des truc tout fais

Reply

Marsh Posté le 02-02-2006 à 15:20:40    

ok merci quand même ...

Reply

Marsh Posté le 02-02-2006 à 17:34:40    

Code :
  1. <script language="javascript">
  2. <!--
  3. function Xander_Popup(file,image_width,image_height,popup_width,popup_height,adapt_image,allow_full_size,bgcolor,textcolor,comments,comments_mode)
  4. {
  5. if (!comments)
  6.  comments = "";
  8. if (!comments_mode)
  9.  comments_mode = 0;
  11. var sWidth = screen.availWidth;
  12. var sHeight = screen.availHeight;
  14. if (!sWidth)
  15.  sWidth = screen.width;
  17. if (!sHeight)
  18.  sHeight = screen.height;
  20. IsFullScreen = 0;
  22. additionnal_margin_for_comment = 0;
  23. if (comments_mode == 3)
  24.  additionnal_margin_for_comment = 20;
  26. if (popup_width > 0)
  27. {
  28.  if (popup_width < 100) popup_width = 100;
  29.  if (popup_height < 100) popup_height = 100;
  30.  if (popup_width > (sWidth - 30)) popup_width = sWidth - 30;
  31.  if (popup_height > (sHeight - 30)) popup_height = sHeight - 30;
  32. }
  34. if (popup_width == -1)
  35. {
  36.  if ((image_width > (sWidth - 30)) || (image_height > (sHeight - 30 - additionnal_margin_for_comment)))
  37.  {
  38.   if (!adapt_image)
  39.   {
  40.    lwidth = image_width; lheight = image_height;
  41.    do { lwidth = lwidth * 0.9; } while (lwidth > (sWidth - 30));
  42.    do { lheight = lheight * 0.9; } while (lheight > (sHeight - 30 - additionnal_margin_for_comment));
  43.   }
  44.   else
  45.   {
  46.    lwidth = image_width; lheight = image_height;
  47.    do { lwidth = lwidth * 0.9; lheight = lheight * 0.9; } while ((lwidth > (sWidth - 30)) || (lheight > (sHeight - 30 - additionnal_margin_for_comment)));
  48.   }
  49.   popup_width = lwidth; popup_height = lheight + additionnal_margin_for_comment;
  50.   if (adapt_image && allow_full_size) popup_width = popup_width + 13;
  51.  }
  52.  else
  53.  { popup_width = image_width; popup_height = image_height + additionnal_margin_for_comment; }
  54. }
  56. if (popup_width >= 0)
  57. {
  58.  if (popup_width < 100) popup_width = 100;
  59.  if (popup_height < 100) popup_height = 100;
  60. }
  62. if (popup_width < 0)
  63. {
  64.  IsFullScreen = 1;
  66.  if (navigator.appName.substring(0,9) == 'Microsoft')
  67.  {
  68.   sWidth = screen.width;
  69.   sHeight = screen.height;
  70.  }
  71.  else
  72.  {
  73.   sHeight = sHeight - 25; // for browsers other than IE : title bar space
  74.  }
  75.  popup_width = sWidth-16; // fullscreen has always toolbars ?...
  76.  popup_height = sHeight - 20 - additionnal_margin_for_comment; // leave place for close link and comment...
  78.  if ((popup_width < image_width) || (popup_height < image_height))
  79.   image_reduced = true;
  80.  else image_reduced = false;
  82.  pop = window.open("","","fullscreen=yes, width="+sWidth+", height="+sHeight+", left=0, top=0, resizable=yes, scrollbars=no,menu=no,menubars=no,status=no,directories=no,location=no,toolbar=no" );
  83. }
  84. else
  85. {
  86.  if ((popup_width < image_width) || ((popup_height - additionnal_margin_for_comment) < image_height))
  87.   image_reduced = true;
  88.  else image_reduced = false;
  90.  var top = (sHeight - popup_height - 25) / 2;
  91.  var left = (sWidth - popup_width - 4) / 2;
  93.  if ((!image_reduced) || (image_reduced && adapt_image && !allow_full_size))
  94.   pop = window.open("","","width="+popup_width+", height="+popup_height+",top="+top+",left="+left+",resizable=no, scrollbars=no,menu=no,menubars=no,status=no,directories=no,location=no,toolbar=no" );
  95.  else pop = window.open("","","width="+popup_width+", height="+popup_height+", top="+top+", left="+left+", resizable=yes, scrollbars=yes,menu=no,menubars=no,status=no,directories=no,location=no,toolbar=no" );
  96. }
  98. pop.window.document.write("<HTML><HEAD><TITLE>Zoom de l'image</TITLE></HEAD><BODY bgcolor='"+bgcolor+"', style=\"margin: 0px; padding: 0px;" );
  99. if (IsFullScreen &&  ((adapt_image && !allow_full_size) || !image_reduced))
  100.  pop.window.document.write("scrollbar-base-color:"+bgcolor+"; scrollbar-highlight-color:"+bgcolor+"; scrollbar-shadow-color:"+bgcolor+"; scrollbar-face-color:"+bgcolor+"; scrollbar-arrow-color:"+bgcolor+";scrollbar-track-color: "+bgcolor+";scrollbar-3dlight-color: "+bgcolor+"; scrollbar-darkshadow-color: "+bgcolor+";" );
  101. pop.window.document.write("\">" );
  103. if (comments_mode == 2)
  104. {
  105.  pop.window.document.write("<style type=\"text/css\">\n<!-" );
  106.  pop.window.document.write("- \n.popperlink {position:absolute;visibility:hidden}\n-" );
  107.  pop.window.document.write("-" );
  108.  pop.window.document.write(">\n</style><div class=popperlink id=topdecklink></div><script language=\"javascript\">domok = document.getElementById;if (domok){ skn = document.getElementById(\"topdecklink\" ).style; if(navigator.appName.substring(0,3) == \"Net\" ) document.captureEvents(Event.MOUSEMOVE); document.onmousemove = get_mouse; }" );
  109.  pop.window.document.write("function poplink(msg) { var content =\"<table border=0 cellpadding=0 cellspacing=0 bgcolor=#000000><tr><td><table width=100% border=0 cellpadding=2 cellspacing=1><tr><td bgcolor=#FFFFE1><font color=#000000 size=2 face='verdana'><center>\"+msg+\"</center></td></tr></table></td></tr></table>\"; if (domok) { document.getElementById(\"topdecklink\" ).innerHTML = content; if (msg != \"\" ) { skn.visibility = \"visible\"; } else { skn.visibility = \"hidden\"; } } } " );
  110.  pop.window.document.write("function killlink() { if (domok) { document.getElementById(\"topdecklink\" ).innerHTML = '';   skn.visibility = \"hidden\"; } } " );
  111.  pop.window.document.write("function get_mouse(e) { var x = (navigator.appName.substring(0,3) == \"Net\" ) ? e.pageX : event.x+document.body.scrollLeft; var y = (navigator.appName.substring(0,3) == \"Net\" ) ? e.pageY : event.y+document.body.scrollTop; if (navigator.appName.substring(0,3) == \"Net\" ) { var tWi = window.innerWidth; var tHe = window.innerHeight; if((x > (tWi-70)) && (tWi-70>=0)) skn.left = tWi-70; else skn.left = x;  if((y > (tHe-50)) && ((tHe-50) > 0)) skn.top = tHe-50; else skn.top = y+20;} else { skn.left = x; skn.top = y+20; } } </script>" );
  112. }
  113. pop.window.document.write("<TABLE border=0, cellspacing=0, cellpadding=0, width=\"100%\", height=\"100%\"><TR><TD valign=center><CENTER>" );
  114. pop.window.document.write("<img src=\""+file+"\"" );
  116. if (comments_mode == 1)
  117. {
  118.  pop.window.document.write(" alt=\""+comments+"\"" );
  119.  pop.window.document.write(" title=\""+comments+"\"" );
  120. }
  121. else if (comments_mode == 2)
  122.  pop.window.document.write(" onMouseOver=\"poplink('"+comments+"');\" onMouseOut=\"killlink();\"" );
  124. if (!image_reduced || !adapt_image)
  125.  pop.window.document.write(" width="+image_width+" height="+image_height);
  126. else
  127. {
  128.  // find best dimension for image...
  129.  var ratioX;
  130.  var ratioY;
  132.  if (allow_full_size) ratioX = (popup_width - 16) / image_width;
  133.  else ratioX = popup_width / image_width;
  134.  if (allow_full_size) ratioY = (popup_height - additionnal_margin_for_comment-5) / image_height;
  135.  else ratioY = (popup_height - additionnal_margin_for_comment) / image_height;
  137.  if (ratioY < ratioX) ratioX = ratioY;
  138.  var temp_width = ratioX * image_width;
  139.  var temp_height = ratioX * image_height;
  141.  pop.window.document.write(" width="+temp_width+" height="+temp_height);
  143.  if (allow_full_size)
  144.  {
  145.   pop.window.document.write(" name=\"embedded_image\" OnClick=\"if(IsReduced == 1) { embedded_image.width="+image_width+"; embedded_image.height="+image_height+";IsReduced=0;}else{embedded_image.width="+temp_width+"; embedded_image.height="+temp_height+";IsReduced=1;}\">" );
  146.   pop.window.document.write("<script language=\"javascript\">var IsReduced=1;</script" );
  147.  }
  148. }
  150. pop.window.document.write(">" );
  151. if (comments_mode == 3) pop.window.document.write("</td></tr><tr height=10 valign=\"bottom\"><td align=\"center\"><font face=\"arial\" size=2 color='"+textcolor+"'>"+comments+"</font></a><br>" );
  152. if (IsFullScreen == 1)  pop.window.document.write("</td></tr><tr height=10 valign=\"bottom\"><td align=\"center\"><a href=\"javascript:window.close()\"><font face=\"arial\" size=2 color='"+textcolor+"'>Fermer</font></a><br>" );
  153. pop.window.document.write("</CENTER></TD></TR></TABLE></BODY></HTML>" );
  154. }
  155. -->
  156. </script>
  157. <style type="text/css">
  158. <!--
  159. a { cursor:pointer; cursor:hand; }
  160. -->
  161. </style>
  162. <CENTER>
  163. <a OnClick="Xander_Popup('../Multimedia/aviron/site/Cadet2005/vichy2005/Photo/P7011138.JPG',2048,1536,-1,-1,1,0,'#000000','#FFFFFF','',1)"><img src="../Multimedia/aviron/site/Cadet2005/vichy2005/Photo/mini/small_P7011138.JPG" width=205 height=154 border=0 alt="" title=""></a>


 
 
 
J'ai trouvé ce code pour afficher une image en lien vers l'image taille réelle
alors comment l'adapter dans  ce script (image aleatoir) :
 
dans HEAD

Code :
  1. </style>
  2. </head>
  6. <script type="text/javascript">
  8. function rand_number(n)
  9. {
  10. var x;
  11. x=Math.round(Math.random()*100);
  12. x%=n;
  13. return x;
  14. }
  15. function banner()
  16. {
  17. var img = new Array();
  18. <!-- vous pouvez rajouter ou supprimez des images -->
  19. img[0]='<a href="lien_1.html"><img src="south park.JPG" border=0 width=150 height=80 alt="Votre commentaire 1"></a>';
  20. img[1]='<a href="lien_2.html"><img src="small_P7011139.JPG" border=0 width=150 height=80 alt="Votre commentaire 2"></a>';
  21. img[2]='<a href="lien_3.html"><img src="small_P7011145.JPG" border=0 width=150 height=80 alt="Votre commentaire 3"></a>';
  22. <!-- attention, le nombre entre parenthese doit etre egal aux derniers entre crochet +1 exemple : ici 2+1=3 -->
  23. var n=rand_number(3);
  24. document.write(img[n]);
  25. }
  26. //-->
  27. </script>


 
dans BODY

Code :
  1. </script>
  7. <body bgcolor="#FFFFFF" topmargin="0" marginheight="0">
  8. <!-- ImageReady Slices (c parti.psd) -->
  9. <table id="Table_01" width="800" height="1063" border="0" cellpadding="0" cellspacing="0">
  10. <tr>
  11.  <td colspan="8">
  12.   <img src="images/c-parti_01.gif" width="800" height="246" alt=""></td>
  13. </tr>
  14. <tr>
  15.  <td colspan="8">
  16.   <img src="images/c-parti_02.gif" width="800" height="42" alt=""></td>
  17. </tr>
  18. <tr>
  19.  <td colspan="4">
  20.   <img src="images/c-parti_03.gif" width="187" height="14" alt=""></td>
  21.  <td rowspan="3">
  22.   <img src="images/c-parti_04.gif" width="65" height="129" alt=""></td>
  23.  <td>
  24.   <img src="images/c-parti_05.gif" width="513" height="14" alt=""></td>
  25.  <td colspan="2" rowspan="3">
  26.   <img src="images/c-parti_06.gif" width="35" height="129" alt=""></td>
  27. </tr>
  28. <tr>
  29.  <td>
  30.   <img src="images/c-parti_07.gif" width="4" height="99" alt=""></td>
  31.  <td colspan="2" rowspan="3">
  32.   <img src="images/c-parti_08.gif" width="27" height="135" alt=""></td>
  33.  <td width="156" height="99" bgcolor="#55BE47"><script type="text/javascript">banner();</script>


 
Merci d'avance

Reply

Marsh Posté le 02-02-2006 à 20:39:43    

[:atog]  [:atog]  [:atog]  [:alph-one]  
 
Bon alors je vais être gentil...Met le contenu de tes <script> dans un fichier .js
(sans les balises <script>  :sweat: )
 
que tu appeles ensuite dans le head <script src="fichier.js" type="text/JavaScript"></script>
 
pour ton css  
 
tu fais un fichier.css
 
tu colles dedans...
et tu appels dnas le head  
 
<link href="/fichier.css" rel="stylesheet" type="text/css" />
 
 
le reste est à foutre dnas le body...
 
Tiens des sites super, mais je pense que tu ten fou...
 
Pour toi:  
http://www.csszengarden.com/  
http://www.alsacreations.com  
http://openweb.eu.org/
 
++

Reply

Sujets relatifs:

Leave a Replay

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