Que pensez vous d’une entête comme ça ?

[Gael-Nbe]

Bonsoir à tous

Cela fait un moment que je laisse trainer la réalisation de ma boutique, mais la je me relance
et donc je viens de faire une esquisse d'entête avec le superbe module de SotEW.

Donc c'est une page html avec un menu boutons image simple et une iframe vers un autre html avec une animation d'images en java, qui fait pivoté le disque en fonctions des mouvements de la souris (uniquement dans l'iframe).

http://test.vizuelle.fr/

Qu'en pensez vous vous point de vue compatibilité navigateur?

J'ai déjà test sous FireFox 3, IE 7, et Opera 9.6 et sa à l'air de fonctionner correctement.

Si quelqu'un peut me dire pour safari et IE 8 ça serais super.

Merci pour vos avis

P.s. Les boutons accueil et contacte fonctionne, mais les 3 autres non, comme j'ai pas encore entrée les pages du cms dans la boutique de test.

[SotEW]

ça a l'air sympa, seulement le CD semble ne pas se retourner à fond du coté gauche, mais je suppose que ce n'est qu'un détail...

Dans tous les cas, je suis heureux de constater que mon module trouve son utilité même pour des usages "non conventionnel".

[nico46]

Très sympathique tout ça, j'aime bien le CD qui tourne avec la souris , le menu est bien foutu également.
Bonne continuation.

[Maury Girard]

Je dirais de même que mes confrères SotEW & Nico46
Pour l'instant c'est vraiment bien "foutue" cette " Banniere" avec le Cdrom qui tourne
Après faut voir le reste

[Peha]

Bonjour, il y a un pb de couleurs avec Safari sur OSX

sinon l'animation marche, je n'ai pas vraiment compris l'intérêt de l'iframe dans ce cas. (qui est une méthode déconseillé pour l'accessibilité il me semble)

[Gael-Nbe]

Bonjour,
l'iframe c'est surtout car je suis une brelle en javascript et que je n'arrive à rien avec le réglage des position absolu du script donc l'iframe me débarrasse du problème

Sinon pour le problème de couleur sous safari c'est étrange c'est peut être du au fait que le fond est en png et l'animation baser sur du jpg
la j'ai tout mis en jpg pour voir si le problème vient bien de la?

Peha si tu peut me le confirmé sa serais super


Je met le code du script si sa intéresse quelque un

[removed]

// The file names
var imagenames = new Array(

// -------------------------------------------------------------------------------------
// This could be modified...
// -------------------------------------------------------------------------------------
 "ddd-25.jpg",
"ddd-24.jpg",
"ddd-23.jpg",
"ddd-22.jpg",
"ddd-21.jpg",
"ddd-20.jpg",
"ddd-19.jpg",
"ddd-18.jpg",
"ddd-17.jpg",
"ddd-16.jpg",
"ddd-15.jpg",
"ddd-14.jpg",
"ddd-13.jpg",
"ddd-12.jpg",
"ddd-11.jpg",
"ddd-10.jpg",
"ddd-9.jpg",
"ddd-8.jpg",
"ddd-7.jpg",
"ddd-6.jpg",
"ddd-5.jpg",
"ddd-4.jpg",
"ddd-3.jpg",
"ddd-2.jpg",
"ddd-1.jpg"


 );

// -------------------------------------------------------------------------------------
// Do not modify the following lines of code!
// -------------------------------------------------------------------------------------

// Image objects
var images = new Array();

// Progress
var balken;
var gesamt = imagenames.length;
var geladen = 0;

// DIV
var ausgabe;
var fortschritt;
var bildbreite;
var bildhoehe;
var balkenbreite;


// The current picture
var bild;
var pos = 0;

// Users mouse pos
var mousePos = null;



// Start this when loading this web site
function init() {
  balken = document.getElementById("balkengif");
  ausgabe = document.getElementById("ausgabe");
  bild = document.getElementById("bild");
  fortschritt = document.getElementById("balken");

  bildbreite = bild.width;
  bildhoehe = bild.height;

  balkenbreite = bildbreite * 0.75;

  // Fit the sizes of the DIVs
  ausgabe.style.width = bildbreite + "px";
  ausgabe.style.height = bildhoehe + "px";
  ausgabe.style.left = "0px";
  ausgabe.style.top = "0px";
  ausgabe.style.visibility = "visible";

  // Show progress bar
  fortschritt.style.width = balkenbreite + "px";
  fortschritt.style.top = (bildhoehe / 2) + "px";
  fortschritt.style.left = ((bildbreite - balkenbreite) / 2) + "px";
  fortschritt.style.height = bildhoehe / 3 + "px";
  fortschritt.style.visibility = "visible";

  // Preload the images
  loadimages();
}


function loadimages() {
  for(n = 0; n < imagenames.length; n++){
      images[n] = new Image();
      images[n].src = "frames/" + imagenames[n];
      setTimeout("ladepruefung(" + n + ")" , n * 50);
  }
}

// Check the loading progress
function ladepruefung(index){
  (images[index].complete) ? fortschrittsanzeige() : setTimeout("ladepruefung(" + index + ")", 50);
}

function fortschrittsanzeige(){
  balken.style.width = (geladen * balkenbreite / gesamt) + "px";
  geladen++;
  if (geladen >= imagenames.length) setTimeout("losgehts()", 50);
  bild.src = images[geladen-1].src;
}

// Now the images are loaded
function losgehts(){
  // Close the progress info
  fortschritt.style.visibility = "hidden";
  bild.style.visibility = "visible";
  // Show the cover
  show(Math.round(gesamt / 2));
}

// Here we go
function show(bildindex) {
  bild.src = images[bildindex].src;
  if (pos == imagenames.length) pos = 0;
}

// Get mouse positione
function mouseCoords(ev)
{
   if(ev.pageX || ev.pageY){
       return {x:ev.pageX, y:ev.pageY};
   }
   return {
       x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
       y:ev.clientY + document.body.scrollTop  - document.body.clientTop
   };
}

function mouseMove(ev)
{
   ev = ev || window.event;
   mousePos = mouseCoords(ev);

}

function rotate()
{
 bildpos = Math.round(mousePos.x * (gesamt-1) / bildbreite);
 if (bildpos > (gesamt-1)) bildpos = gesamt - 1;
 if (bildpos < 0) bildpos = 0;
 show(bildpos);
}


// The start of the web site
window<body style="margin-left: 0px; margin-top: 0px; padding: 0px 0px 0px 0px;">








               Please wait...
 


               loading 70 KB
 






                [ViZuelle.fr]








</body>

[Peha]

la couleur est ok,
par contre ton code est bizarre, il y a plusieurs balises body

peux tu essayer avec ça ?... pour la beauté du geste ( remplacer la partie après "// The start of the web site" par ce qui suit )

// The start of the web site








               Please wait...



               loading 70 KB







                [ViZuelle.fr]

aucune garantie que ça fonctionne, mais bon normalement...

pa.

[Peha]

attention le forum a tendance à modifier certains trucs quand on copie colle du code, je suis parti du code que tu as posté, à adapter au cas ou il se serait montré facétieux une fois de plus...

[Buzby]

Pas mal du tout