[prb javascript] ajouter un bandeau "vendu" au dessus d'un article.

[libel]

bonjour,

 

j'essaye de bidouiller un truc en javascript de façon à pouvoir afficher par dessus l'image d'un produit un bandeau signalant s'il a été vendu ou pas.

 

donc pour y arriver, j'ai placée l'image du produit en "background-image" du div "bigpic" et dans ce même div, je charge ou non mon bandeau "vendu".

 

pour conserver le clique sur l'image et l'avoir en zoom j'ai gardée l'action OnClik et pour éviter d'avoir une zone de clique qui me bouffe toute la largeur de la page, je fait en sorte de le redimensionner via le javascript, comme ceci :

{if $have_image}  
  <div id="bigpic" class="product_img_big" style="background-image:url({$img_prod_dir}{$cover.id_image}-large.jpg);"
     onclick="window.open('zoom.php?id_image='+getE('bigpic').id_image, '', 'width=auto, height=auto, resizable=yes');"
  	   onmouseover="style.cursor='pointer';">                    
          
    {if !($product->quantity)}
      <img id="picto_vendu" src="{$img_dir}{$lang_iso}/vendu.gif" alt="vendu" style="margin-top:179px; margin-left:;" />                         
    {/if}
                      
  </div>
  
  <!-- Place le bandeau correctement dans le coin inférieur de droit de l'image --->
  <script language="javascript">
    product_img_big = new Image();
    product_img_big.src = '{$img_prod_dir}{$cover.id_image}-large.jpg' ;												
    var LargeurImg = product_img_big.width;							
    var marge = (LargeurImg-71);
    {if !($product->quantity)}							
      document.getElementById("picto_vendu").style.marginLeft = marge+"px";
    {/if}
    <!-- Indique la bonne largeur pour le div "bigpic" -->
    document.getElementById("bigpic").style.width = LargeurImg+"px";
    document.write(LargeurImg);
  </script>
        
  {if $cover.id_image_only}      
    <script type="text/javascript">
      if (getE('bigpic')) getE('bigpic').id_image = {$cover.id_image_only};
    </script>
  {/if}        
{/if}

 

ça marche presque mais....

parfois le div "bigpic" ne se redimensione pas et je dois rafraichir la page pour y arriver...

comment éviter ça ?... (voir les images ci-dessous)

[libel]

heu... help... personne ?  :- 

[Julien Breux]

Je réfléchi à la question  ???

 

Je vous tiens au courant

[shagshag]

Bonsoir,

 

Je pense qu'il y a une solution plus simple :

- laisser l'image bigpic comme elle était

- afficher l'image "vendu" en dessous et dans ce cas alignée à droite

- appliquer à l'image une marge haute négative de la hauteur de l'image. du coup elle se retrouve au dessus de bigpic

 

margin-top : -2Opx; // si l'image "vendu" fait 20px de haut

 

J'ai pas testé mais ça devrait fonctionner d'une manière plus propre que du javascript.

[libel]

ha oui en effet  ;D mais je risque de rencontrer le même problème pour la positionner correctement.

merci pour cette piste, je vais essayer dans ce sens là ^^