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 = "";
  7. if (!comments_mode)
  8.  comments_mode = 0;
  9. var sWidth = screen.availWidth;
  10. var sHeight = screen.availHeight;
  11. if (!sWidth)
  12.  sWidth = screen.width;
  13. if (!sHeight)
  14.  sHeight = screen.height;
  15. IsFullScreen = 0;
  16. additionnal_margin_for_comment = 0;
  17. if (comments_mode == 3)
  18.  additionnal_margin_for_comment = 20;
  19. if (popup_width > 0)
  20. {
  21.  if (popup_width < 100) popup_width = 100;
  22.  if (popup_height < 100) popup_height = 100;
  23.  if (popup_width > (sWidth - 30)) popup_width = sWidth - 30;
  24.  if (popup_height > (sHeight - 30)) popup_height = sHeight - 30;
  25. }
  26. if (popup_width == -1)
  27. {
  28.  if ((image_width > (sWidth - 30)) || (image_height > (sHeight - 30 - additionnal_margin_for_comment)))
  29.  {
  30.   if (!adapt_image)
  31.   {
  32.    lwidth = image_width; lheight = image_height;
  33.    do { lwidth = lwidth * 0.9; } while (lwidth > (sWidth - 30));
  34.    do { lheight = lheight * 0.9; } while (lheight > (sHeight - 30 - additionnal_margin_for_comment));
  35.   }
  36.   else
  37.   {
  38.    lwidth = image_width; lheight = image_height;
  39.    do { lwidth = lwidth * 0.9; lheight = lheight * 0.9; } while ((lwidth > (sWidth - 30)) || (lheight > (sHeight - 30 - additionnal_margin_for_comment)));
  40.   }
  41.   popup_width = lwidth; popup_height = lheight + additionnal_margin_for_comment;
  42.   if (adapt_image && allow_full_size) popup_width = popup_width + 13;
  43.  }
  44.  else
  45.  { popup_width = image_width; popup_height = image_height + additionnal_margin_for_comment; }
  46. }
  47. if (popup_width >= 0)
  48. {
  49.  if (popup_width < 100) popup_width = 100;
  50.  if (popup_height < 100) popup_height = 100;
  51. }
  52. if (popup_width < 0)
  53. {
  54.  IsFullScreen = 1;
  55.  if (navigator.appName.substring(0,9) == 'Microsoft')
  56.  {
  57.   sWidth = screen.width;
  58.   sHeight = screen.height;
  59.  }
  60.  else
  61.  {
  62.   sHeight = sHeight - 25; // for browsers other than IE : title bar space
  63.  }
  64.  popup_width = sWidth-16; // fullscreen has always toolbars ?...
  65.  popup_height = sHeight - 20 - additionnal_margin_for_comment; // leave place for close link and comment...
  66.  if ((popup_width < image_width) || (popup_height < image_height))
  67.   image_reduced = true;
  68.  else image_reduced = false;
  69.  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" );
  70. }
  71. else
  72. {
  73.  if ((popup_width < image_width) || ((popup_height - additionnal_margin_for_comment) < image_height))
  74.   image_reduced = true;
  75.  else image_reduced = false;
  76.  var top = (sHeight - popup_height - 25) / 2;
  77.  var left = (sWidth - popup_width - 4) / 2;
  78.  if ((!image_reduced) || (image_reduced && adapt_image && !allow_full_size))
  79.   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" );
  80.  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" );
  81. }
  82. pop.window.document.write("<HTML><HEAD><TITLE>Zoom de l'image</TITLE></HEAD><BODY bgcolor='"+bgcolor+"', style=\"margin: 0px; padding: 0px;" );
  83. if (IsFullScreen &&  ((adapt_image && !allow_full_size) || !image_reduced))
  84.  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+";" );
  85. pop.window.document.write("\">" );
  86. if (comments_mode == 2)
  87. {
  88.  pop.window.document.write("<style type=\"text/css\">\n<!-" );
  89.  pop.window.document.write("- \n.popperlink {position:absolute;visibility:hidden}\n-" );
  90.  pop.window.document.write("-" );
  91.  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; }" );
  92.  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\"; } } } " );
  93.  pop.window.document.write("function killlink() { if (domok) { document.getElementById(\"topdecklink\" ).innerHTML = '';   skn.visibility = \"hidden\"; } } " );
  94.  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>" );
  95. }
  96. pop.window.document.write("<TABLE border=0, cellspacing=0, cellpadding=0, width=\"100%\", height=\"100%\"><TR><TD valign=center><CENTER>" );
  97. pop.window.document.write("<img src=\""+file+"\"" );
  98. if (comments_mode == 1)
  99. {
  100.  pop.window.document.write(" alt=\""+comments+"\"" );
  101.  pop.window.document.write(" title=\""+comments+"\"" );
  102. }
  103. else if (comments_mode == 2)
  104.  pop.window.document.write(" onMouseOver=\"poplink('"+comments+"');\" onMouseOut=\"killlink();\"" );
  105. if (!image_reduced || !adapt_image)
  106.  pop.window.document.write(" width="+image_width+" height="+image_height);
  107. else
  108. {
  109.  // find best dimension for image...
  110.  var ratioX;
  111.  var ratioY;
  112.  if (allow_full_size) ratioX = (popup_width - 16) / image_width;
  113.  else ratioX = popup_width / image_width;
  114.  if (allow_full_size) ratioY = (popup_height - additionnal_margin_for_comment-5) / image_height;
  115.  else ratioY = (popup_height - additionnal_margin_for_comment) / image_height;
  116.  if (ratioY < ratioX) ratioX = ratioY;
  117.  var temp_width = ratioX * image_width;
  118.  var temp_height = ratioX * image_height;
  119.  pop.window.document.write(" width="+temp_width+" height="+temp_height);
  120.  if (allow_full_size)
  121.  {
  122.   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;}\">" );
  123.   pop.window.document.write("<script language=\"javascript\">var IsReduced=1;</script" );
  124.  }
  125. }
  126. pop.window.document.write(">" );
  127. 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>" );
  128. 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>" );
  129. pop.window.document.write("</CENTER></TD></TR></TABLE></BODY></HTML>" );
  130. }
  131. -->
  132. </script>
  133. <style type="text/css">
  134. <!--
  135. a { cursor:pointer; cursor:hand; }
  136. -->
  137. </style>
  138. <CENTER>
  139. <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>
  3. <script type="text/javascript">
  4. function rand_number(n)
  5. {
  6. var x;
  7. x=Math.round(Math.random()*100);
  8. x%=n;
  9. return x;
  10. }
  11. function banner()
  12. {
  13. var img = new Array();
  14. <!-- vous pouvez rajouter ou supprimez des images -->
  15. img[0]='<a href="lien_1.html"><img src="south park.JPG" border=0 width=150 height=80 alt="Votre commentaire 1"></a>';
  16. img[1]='<a href="lien_2.html"><img src="small_P7011139.JPG" border=0 width=150 height=80 alt="Votre commentaire 2"></a>';
  17. img[2]='<a href="lien_3.html"><img src="small_P7011145.JPG" border=0 width=150 height=80 alt="Votre commentaire 3"></a>';
  18. <!-- attention, le nombre entre parenthese doit etre egal aux derniers entre crochet +1 exemple : ici 2+1=3 -->
  19. var n=rand_number(3);
  20. document.write(img[n]);
  21. }
  22. //-->
  23. </script>


 
dans BODY

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