11548 sujets

JavaScript, DOM et API Web HTML5

Centrer l'image verticalemnt et h quelque soit la postion de la fenet

Bonjour à tous,
Voila j'ai reussi l'effet rollover de l'image par contre je n'arrive pas à centrer l'image horizontalemnt et verticalement quelque soit la postion de la fenetre et que l'image soit toujours visible ?

http://www.myfreesport.fr/sports/tennis/0/federer-davydenko-s-affronteront-demi-finale-24964.html

code css:


body {
}
img 
{
border:1px solid black;
}
.fullimageclass
{
}
.fullimageclass img
{
position:absolute;z-index:10;bottom:300px;
      border:1px solid black;


}




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
    <title>Untitled Page</title>
    <script language="javascript" type="text/javascript">
    
    function retrecirimage()
    {
    var div = document.getElementById("fullimage");
    
    if(div)
    {
  
      while(div.hasChildNodes())
      {
        div.removeChild(div.childNodes[0])
      }
    }
    
   // div.style.display = "none";
    }
    
    function fullimage(scrimg)
    {
    
    document.getElementById.appendChild
    var div = document.getElementById("fullimage");
    if ((div) && div.hasChildNodes() == false)
    {
      var liens = document.createElement("a");
      var img = document.createElement("img");
      
      img.setAttribute("src",scrimg);
      img.setAttribute("alt","fermer l'image");
      
      liens.href  = "javascript:retrecirimage()";
      liens.title = "";
      
     
      
      
      liens.appendChild(img);
      
      div.appendChild(liens);
     // div.style.display = "block";
      
    }
 /*   if (toogle)
      div .style.display = "block";
     else
      div.style.display = "none";*/
    }
    
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <div>
           <a href="javascript:fullimage('juventus-retour-serie-17.jpg')" title=""><img  width="260px" height="181px" src="juventus-retour-serie-17.jpg"  alt="cliquer pou grandir l'image" /></a>
         
        </div>
           <div id="fullimage" class="fullimageclass"></div>
        
    </form>    
</body>
</html>
Bonjour,

Il te faut :

scrollingHeight = window.innerHeight ||  document.documentElement.clientHeight,
			scrollingWidth = document.documentElement.clientWidth,
			madivWidth = 400,
			madivHeight = 300;
		
		var maDivTop = (scrollingHeight/2) - (madivHeight /2),
			maDivLeft = (scrollingWidth/2) - (madivWidth /2);
ben shinuza merci de ta repone jai essayaé d'appliquer ta technique je précise que je suis sur vista IE 7.0.6 mais bon ça pas l'air de fonctionner


<script language="javascript" type="text/javascript">
    
    function retrecirimage()
    {
    var div = document.getElementById("fullimage");
    
    if(div)
    {
  
      while(div.hasChildNodes())
      {
        div.removeChild(div.childNodes[0])
      }
    }
    
   // div.style.display = "none";
    }
    
    function fullimage(scrimg)
    {
    
    
    var div = document.getElementById("fullimage");
    if ((div) && div.hasChildNodes() == false)
    {
      var liens = document.createElement("a");
      var img = document.createElement("img");
      
      img.setAttribute("src",scrimg);
      img.setAttribute("alt","fermer l'image");
      
      liens.href  = "javascript:retrecirimage()";
      liens.title = "";
      
     
      
      
      liens.appendChild(img);
      
      div.appendChild(liens);
      
   [#indigo]   var madivWidth = img.getAttribute("width");
      var madivHeight =img.getAttribute("height");
      
      var scrollingHeight = window.innerHeight ||  document.documentElement.clientHeight;
      var scrollingWidth = document.documentElement.clientWidth;
      
      
      
      var maDivTop = (scrollingHeight/2) - (madivHeight /2);
      var maDivLeft = (scrollingWidth/2) - (madivWidth /2);
      
      div.style.top = maDivTop;
      div.style.left = maDivLeft;
           
       var chaine3 = "maDivTop: " +div.style.top + " maDivLeft :" +div.style.left;
      var chaine ="scrollingHeight: " +scrollingHeight +"scrollingWidth :" +scrollingWidth;
     
     var chaine2 = "madivWidth: " +madivWidth + " madivHeigh :" +madivHeight;
      alert(chaine+ "\n"+chaine2+"\n"+chaine3);
    [#green]
     // div.style.display = "block";
      
    }
 /*   if (toogle)
      div .style.display = "block";
     else
      div.style.display = "none";*/
    }
    
    </script>

Donc tu peux me dire si j'ai mal intégrer ton code ou et ce bien cela ?
en fait j'ai changé le code css ^^:
 .fullimageclass img
{
position:absolute;z-index:10;bottom:300px;
      border:1px solid black;


}


en 

.fullimageclass
{
position:absolute;z-index:10;
      border:1px solid black;


}


c'est vrai maintenat mon image est centré mais par contre si je scrolle mon contenu et que je clique a nouveau sur l'image ben l'image n'esst pas centré verticalement ? horizontalemnt oui elle y est. je te fais un screenshot tu auras une idée
upload/5511-image.jpg
Bonjour totof,
Chez moi, avec IE7 et Firefox/win, L'mage est bien centrée verticalement et horizontalement. Par contre ton code n'est pas accessible sans js :
totof a écrit :
       <a href="javascript:fullimage('juventus-retour-serie-17.jpg')" title=""><img  width="260px" height="181px" src="juventus-retour-serie-17.jpg"  alt="cliquer pou grandir l'image" /></a>

Il aurait fallu faire un lien normal avec un title et alt correctement renseignés et utiliser un js non obstructif (je suis curieux de savoir si ceci marche sur vista )
       <a href="grande image.jpg" title="cliquer pour agrandir l'image"><img  width="260px" height="181px" src="juventus-retour-serie-17.jpg"  alt="courte description de l'image" /></a>

Modifié par chmel (06 Jun 2007 - 23:09)
salut chmel ,regarde ce lien sur myfreesport http://www.myfreesport.fr/sports/football/equipe-de-france/0/bleus-font-boulot-25037.html tu veras quelque soit la position du clique sur la foto l'image est centré venrticalement et horizontalemnt mem en scrolant et en cliquant l'image sur l'image a nouveau elle est centré.
et avec la tecnique de Shinuza qui marche a 50% mais pas sur firefox jai testé l'imge est cetré verticalement et horizontalemnt IE 7 mai si je scrole et je clique sur le bas de l'image elle est plsu centré par rapport o scrolle effectué tu comprends ce que je veux dire ? regarde l'image ci dessous peut tu comprendras mieux . O fait ta tecnique chmel elle marche apperemnt je vais testé !! Smiley smile Smiley smile upload/5511-image2.jpg
Sujet clos
Aller à