Actualité informatique
Test comparatif matériel informatique
Jeux vidéo
Astuces informatique
Vidéo
Télécharger
Services en ligne
Forum informatique
01Business

|-  LOGICIELS


|||-  

[Résolu] Chevauchement vidéo image

 

2 utilisateurs anonymes
Ajouter une réponse
 

 
Page photos
 
     
Vider la liste des messages à citer
 
 Page :
1
Auteur
 Sujet :

[Résolu] Chevauchement vidéo image

Prévenir les modérateurs en cas d'abus 
squall049
squall049
Bébé forumeur (De 10 à 49 messages postés)
  1. Posté le 01/12/2011 à 16:13:21  
  1. answer
  1. Prévenir les modérateurs en cas d'abus
 
Bonjour à tous

 Sa fait 2 jours que je suis sur un souci html et je n'arrive pas a trouver la solution.

 Je vous explique: voila j'ai creer une page avec un lecteur flv en haut à droite. Juste en dessous j'ai une image avec agrandisement en rel="lightbox". Après mes tests, la vidéo fonctionne sans souci ainsi que l'agrandisement de l'image.

 Le souci viend de l'image une fois qu'elle s'agrandi, le cote haut à droite passe sous le lecteur vidéo donc on vois bien l'image agrandi mais pas a 100% le paramètre à changer pour corriger se souci est coté lecteur vidéo ou image ?

 merci à ceux qui pourai me donner un coup de main.

  1. homepage
ddtddt
Présent de temps en temps (De 50 à 99 messages postés)
  1. Posté le 04/12/2011 à 09:18:43  
  1. answer
  1. Prévenir les modérateurs en cas d'abus
 
dans les propriétés css il te faut ajouter un z-index pour régler l’empilement
 ->

  z-index:99;
  z-index:0;  

 .....

(Publicité)
squall049
Bébé forumeur (De 10 à 49 messages postés)
  1. Posté le 09/12/2011 à 13:19:38  
  1. answer
  1. Prévenir les modérateurs en cas d'abus
 
Merci ddtddt de m'avoir répondu

 Pour ce qui est de "z-index:99; z-index:0;" je doit l'incorporé au niveau du lecteur vidéo ? car pour l'agrandisement de l'image avec le rel="lightbox" je fonctionne qu'en javascript je n'est aucun css d'utilisé.

 j'ai tester de le mettre dans la page style.css de ma page au noveau du body {z-index:99; z-index:0;} mais sa na eu aucun effet

 Merci d'avance

 Pour info : le script de l'agrandisement est

 <script type="text/JavaScript">
 var loadingImage = 'loading.gif';  
 var closeButton = 'close.gif';  

 function getPageScroll(){

  var yScroll;

  if (self.pageYOffset) {
   yScroll = self.pageYOffset;
  } else if (document.documentElement && document.documentElement.scrol​lTop){  
   yScroll = document.documentElement.scrol​lTop;
  } else if (document.body) {
   yScroll = document.body.scrollTop;
  }

  arrayPageScroll = new Array('',yScroll)
  return arrayPageScroll;
 }

 function getPageSize(){
   
  var xScroll, yScroll;
   
  if (window.innerHeight && window.scrollMaxY) {  
   xScroll = document.body.scrollWidth;
   yScroll = window.innerHeight + window.scrollMaxY;
  } else if (document.body.scrollHeight > document.body.offsetHeight){
   xScroll = document.body.scrollWidth;
   yScroll = document.body.scrollHeight;
  } else {
   xScroll = document.body.offsetWidth;
   yScroll = document.body.offsetHeight;
  }
   
  var windowWidth, windowHeight;
  if (self.innerHeight) {  
   windowWidth = self.innerWidth;
   windowHeight = self.innerHeight;
  } else if (document.documentElement && document.documentElement.clien​tHeight) {
   windowWidth = document.documentElement.clien​tWidth;
   windowHeight = document.documentElement.clien​tHeight;
  } else if (document.body) {
   windowWidth = document.body.clientWidth;
   windowHeight = document.body.clientHeight;
  }  
   
  if(yScroll < windowHeight){
   pageHeight = windowHeight;
  } else {
   pageHeight = yScroll;
  }

  if(xScroll < windowWidth){  
   pageWidth = windowWidth;
  } else {
   pageWidth = xScroll;
  }

  arrayPageSize = new Array(pageWidth,pageHeight,win​dowWidth,windowHeight)
  return arrayPageSize;
 }

 function pause(numberMillis) {
  var now = new Date();
  var exitTime = now.getTime() + numberMillis;
  while (true) {
   now = new Date();
   if (now.getTime() > exitTime)
    return;
  }
 }

 function getKey(e){
  if (e == null) {
   keycode = event.keyCode;
  } else {
   keycode = e.which;
  }
  key = String.fromCharCode(keycode).t​oLowerCase();
   
  if(key == ''){ hideLightbox(); }
 }

 function listenKey () { document.onkeypress = getKey; }

 function showLightbox(objLink)
 {
  var objOverlay = document.getElementById('overl​ay');
  var objLightbox = document.getElementById('light​box');
  var objCaption = document.getElementById('light​boxCaption');
  var objImage = document.getElementById('light​boxImage');
  var objLoadingImage = document.getElementById('loadi​ngImage');
  var objLightboxDetails = document.getElementById('light​boxDetails');
  var arrayPageSize = getPageSize();
  var arrayPageScroll = getPageScroll();

  if (objLoadingImage) {
   objLoadingImage.style.top = (arrayPageScroll[1] + ((arrayPageSize[3] - 35 - objLoadingImage.height) / 2) + 'px');
   objLoadingImage.style.left = (((arrayPageSize[0] - 20 - objLoadingImage.width) / 2) + 'px');
   objLoadingImage.style.display = 'block';
  }

  objOverlay.style.height = (arrayPageSize[1] + 'px');
  objOverlay.style.display = 'block';

  imgPreload = new Image();
  imgPreload.onload=function(){
   objImage.src = objLink.href;

  var lightboxTop = arrayPageScroll[1] + ((arrayPageSize[3] - 35 - imgPreload.height) / 2);
   var lightboxLeft = ((arrayPageSize[0] - 20 - imgPreload.width) / 2);
   
   objLightbox.style.top = (lightboxTop < 0) ? "0px" : lightboxTop + "px";
   objLightbox.style.left = (lightboxLeft < 0) ? "0px" : lightboxLeft + "px";
   objLightboxDetails.style.width = imgPreload.width + 'px';
   
   if(objLink.getAttribute('title​')){
    objCaption.style.display = 'block';
    objCaption.innerHTML = objLink.getAttribute('title');
   } else {
    objCaption.style.display = 'none';
   }
   
   if (navigator.appVersion.indexOf(​"MSIE" )!=-1){
    pause(250);
   }

   if (objLoadingImage) { objLoadingImage.style.display = 'none'; }

   selects = document.getElementsByTagName(​"select" );

for (i = 0; i != selects.length; i++) {

selects.style.visibility = "IMAGE";

}

   objLightbox.style.display = 'block';

   listenKey();

   return false;
  }

  imgPreload.src = objLink.href;
   
 }

 function hideLightbox()
 {
  objOverlay = document.getElementById('overl​ay');
  objLightbox = document.getElementById('light​box');

  objOverlay.style.display = 'none';
  objLightbox.style.display = 'none';

  selects = document.getElementsByTagName(​"select" );

for (i = 0; i != selects.length; i++) {
   selects.style.visibility = "visible";
  }

  document.onkeypress = '';
 }

 function initLightbox()
 {
   
  if (!document.getElementsByTagNam​e){ return; }
  var anchors = document.getElementsByTagName(​"a" );

  for (var i=0; i<anchors.length; i++){
   var anchor = anchors;

   if (anchor.getAttribute("href" ) && (anchor.getAttribute("rel" ) == "lightbox" )){
    anchor.onclick = function () {showLightbox(this); return false;}
   }
  }

  var objBody = document.getElementsByTagName(​"body" ).item(0);
   
  var objOverlay = document.createElement("div" );
  objOverlay.setAttribute('id','​overlay');
  objOverlay.onclick = function () {hideLightbox(); return false;}
  objOverlay.style.display = 'none';
  objOverlay.style.position = 'absolute';
  objOverlay.style.top = '0';
  objOverlay.style.left = '0';
  objOverlay.style.zIndex = '90';
  objOverlay.style.width = '100%';
  objBody.insertBefore(objOverla​y, objBody.firstChild);
   
  var arrayPageSize = getPageSize();
  var arrayPageScroll = getPageScroll();

  var imgPreloader = new Image();
   
  imgPreloader.onload=function()​{

   var objLoadingImageLink = document.createElement("a" );
   objLoadingImageLink.setAttribu​te('href','#');
   objLoadingImageLink.onclick = function () {hideLightbox(); return false;}
   objOverlay.appendChild(objLoad​ingImageLink);
   
   var objLoadingImage = document.createElement("img" );
   objLoadingImage.src = loadingImage;
   objLoadingImage.setAttribute('​id','loadingImage');
   objLoadingImage.style.position = 'absolute';
   objLoadingImage.style.zIndex = '150';
   objLoadingImageLink.appendChil​d(objLoadingImage);

   imgPreloader.onload=function()​{};

   return false;
  }

  imgPreloader.src = loadingImage;

  var objLightbox = document.createElement("div" );
  objLightbox.setAttribute('id',​'lightbox');
  objLightbox.style.display = 'none';
  objLightbox.style.position = 'absolute';
  objLightbox.style.zIndex = '100';  
  objBody.insertBefore(objLightb​ox, objOverlay.nextSibling);
   
  var objLink = document.createElement("a" );
  objLink.setAttribute('href','#​');
  objLink.setAttribute('title','​Cliquer pour fermer');
  objLink.onclick = function () {hideLightbox(); return false;}
  objLightbox.appendChild(objLin​k);

  var imgPreloadCloseButton = new Image();

  var objImage = document.createElement("img" );
  objImage.setAttribute('id','li​ghtboxImage');
  objLink.appendChild(objImage);
   
  var objLightboxDetails = document.createElement("div" );
  objLightboxDetails.setAttribut​e('id','lightboxDetails');
  objLightbox.appendChild(objLig​htboxDetails);

  var objCaption = document.createElement("div" );
  objCaption.setAttribute('id','​lightboxCaption');
  objCaption.style.display = 'none';
  objLightboxDetails.appendChild​(objCaption);

  var objKeyboardMsg = document.createElement("div" );
  objKeyboardMsg.setAttribute('i​d','keyboardMsg');
  objKeyboardMsg.innerHTML = '<a href="#" onclick="hideLightbox(); return false;"></a>';
  objLightboxDetails.appendChild​(objKeyboardMsg);
 }

 function addLoadEvent(func)
 {  
  var oldonload = window.onload;
  if (typeof window.onload != 'function'){

 window.onload = func;
  } else {
   window.onload = function(){
   oldonload();
   func();
   }
  }

 }
 addLoadEvent(initLightbox);  
 <script>

squall049
Bébé forumeur (De 10 à 49 messages postés)
  1. Posté le 18/12/2011 à 01:57:48  
  1. answer
  1. Prévenir les modérateurs en cas d'abus
 
Bonsoir à tous

 Voilà j'ai résolu mon problème.

 Pour info dans le code du lecteur vidéo il fallait rajouté:

 <param name="wmode" value="transparent" />

 Merci a ceux qui on aider.

 Page :
1

Aller à :
 

Sujets relatifs
comment extraire une image d'un message dans WLM? (Résolu) Image sur le Forum
Mettre une image sur le Forum micro Hebdo impossible de créer une image système (Résolu)
Quel log. utiliser pour imprimer 2 photos par page A4 RESOLU Problème pour coller une image dans WORD 2010
Réception du courrier Hotmail RESOLU telecharger une video sur TF1 replay ??
impossible de lire une video ts Deezer ne marche plus ( RESOLU )
Plus de sujets relatifs à : [Résolu] Chevauchement vidéo image

Les 5 sujets de discussion précédents Nombre de réponses Dernier message
Code source urgent! 1
cURL et progressbar ! 0
Créer dossier avec un batch 3
[Version test] My!Note Math 1
Vignette et copyright 0