Jump to content

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


Recommended Posts

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.

Share this post


Link to post
Share on other sites

ç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".

Share this post


Link to post
Share on other sites

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)

7101_EroqjmK8dNZKFm2otnyD_t

Share this post


Link to post
Share on other sites

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>

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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...

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More