Aller au contenu

Panorama en CSS/JavaScript

Anonymus

Par Anonymus
dans Les langages du Net

 Partager

Sujets conseillés

Anonymus

Anonymus

Posté
Posté

Je seche....

L'idée est de faire un panorama à 360°. Ca se fait en java, en flash, mais je pense que l'on peut le faire aussi en javascript et en css.

Pour le 360°, il suffit de faire une image dont chaque bord se recoupe.

A partir de là, on affiche une partie de l'image seulement. Sur une image de 1024 de large, on affiche 400px.

Ensuite, il reste à la faire défiler. On fait un lien dessus, ou un 'onclick', et on modifie la zone d'affichage.

Là, je seche...

J'en suis à peu près là :

<html>
<head>
<title>coucou</title>
<style type=text/css>
	.rogne img {
  position: relative;
  left: -400px;
  top: -20px;
  }
	.rogne p {
  position: relative;
  width: 400px;
  height: 300px;
  overflow: hidden;
  }

</style><script type=text/javascript LANGUAGE=JavaScript>
function foo(){

	}
</script>
</head>
<body >
<div class=rogne>
<p>
<a href="#"><img src=photo.jpg border=0 />
</a>
</p>

</div>
</body>
</html>

Si vous avez des idées, ce serait sympa d'avoir le premier 'panorama' en javascript/css, parce qu'apparemment, ca ne se fait pas ailleurs, alors que c'est demandé (et de plus en plus à la mode ;) )

Merci ;)

Lien vers le commentaire
Partager sur d’autres sites
LaurentDenis

LaurentDenis

Posté
Posté (modifié)

Pourquoi ne pas tout simplement s'en remettre au scroll horizontal géré par le navigateur, avec quelques règles CSS et sans javascript ?

Avec 5 images juxtaposées (inutile de créer une image unique) :

img {
border: 0;
margin: 0;
padding: 0;
}
div#solution1 {
width: 400px;
height: 330px;
overflow: auto;
white-space: nowrap;
}

<div id="solution1"><img src="image1.jpg" width="400" height="300" alt="image1"><img src="image2.jpg" width="400" height="300" alt="image2"><img src="image3.jpg" width="400" height="300" alt="image3"><img src="image4.jpg" width="400" height="300" alt="image4"><img src="image5.jpg" width="400" height="300" alt="image5"></div>

Ah... IE5.0 win ne comprend pas le white-space: no-wrap. Alors, une seule image :

div#solution2 {
width: 400px;
height: 330px;
overflow: auto;
}

<div id="solution2"><img src="image.jpg" width="1024" height="300" alt="grande image !"></div>

Modifié par LaurentDenis
Lien vers le commentaire
Partager sur d’autres sites
Anonymus

Anonymus

Posté
  • Auteur
Posté

Donc, une solution alternative pourrait donner ca (?) :

<html>
<head>
<title>coucou</title>
<style type=text/css>
img {
	background:url(photo.jpg) repeat;
	border: 0;
	margin: 0;
	padding: 0;
	height:420;
	}
div#solution1 {
	width: 500px;
	height: 300px;
	overflow: auto;
	white-space: nowrap;
	}
</style>
</head>
<body >
<center>
<div id="solution1">
<img width=100000></div>
</center>
</body>
</html>

Si quelqu'un pouvait tester sous IE5, merci ;)

Lien vers le commentaire
Partager sur d’autres sites
LaurentDenis

LaurentDenis

Posté
Posté

???

Que cherches-tu à faire, là ?

D'autre part :

- Ton image fait partie de ton contenu, elle n'est pas décorative. Donc elle ne doit pas passer par un background CSS;

- Le white-space: nowrap; est inutile si tu utilises une seule image (en ayant assemblé les images individuelles);

- Enfin ton élément <img width=100000> est invalide : l'attribut src est obligatoire.

Lien vers le commentaire
Partager sur d’autres sites
Anonymus

Anonymus

Posté
  • Auteur
Posté

Pour info, l'image fait : 1270 * 420.

L'idée, c'est de faire un panoramique, avec l'impression que l'image ne s'arrete pas.

Avec la méthode que tu proposes, je n'ai qu'une seule image qui apparait.

Si je mets plusieurs <img les uns à la suite des autres, elles apparaissent les unes au dessus des autres, et non cote à cote.

De plus, un simple glisser/deplacer vers un autre navigateur suffit pour que l'image s'affiche en grand.

Enfin, on se retrouve avec l'icone 'image' de IE, ce qui n'est pas 'glorieux'.

En mettant l'image en 'background', et en créant un espace de taille.. grande, on a bien l'image qui s'affiche au fond, on n'a pas l'icone 'image'

de IE, et le 'glisser/deplacer' est désactivé, ce qui est plus 'glorieux'.

Je joins une photo (sous copy), si tu veux faire des essais.

post-54-1092385273_thumb.jpg

Lien vers le commentaire
Partager sur d’autres sites
LaurentDenis

LaurentDenis

Posté
Posté

Je me demande si le scénario "plusieurs images" n'est pas finalement plus intéressant, notamment pour l'accessibilité/interopérabilité... Bref, je vais creuser ça... ça me titille, cette idée ;)

Merci pour l'image, je me sentais trop paresseux pour en faire une !

Et merci de m'avoir donné l'occasion au passage de revenir sur cette propriété "clip" en CSS... On en donnera des nouvelles bientôt, je pense.

Lien vers le commentaire
Partager sur d’autres sites
  • 6 months later...
Anonymus

Anonymus

Posté
  • Auteur
Posté

Bonjour,

j'ai essayé d'adapter ton javascript, mais il n'affiche pas les images des boutons, tout en bas. De plus, il met qu'il y a des erreurs :(

Lien vers le commentaire
Partager sur d’autres sites
olive457

olive457

Posté
Posté

Bonsoir,

Si ça fonctionne... :D

Il suffit de décommenter les lignes en haut....

Pour les images, prend les tiennes et modifie le chemin partout où tu vois

left_on.gif
et
right_on.gif
...

Je te donne le javascript modifié:

<html> <head> <title>Panorama</title>

<script type="text/javascript">

var quickness=200;

var dexPX=20;

var autoMov=false;

var dec=0;

function startMoveLeft() {

autoMov=true;

objBut=FindID('leftimg');

objBut.src="gif/fleche.gif";

moveLeft();

} function startMoveRight() {

autoMov=true;

objBut=FindID('rightimg');

objBut.src="gif/fleche1.gif";

moveRight();

} function stopMove() {

autoMov=false;

document.getElementById("leftimg").src="gif/fleche.gif";

document.getElementById("rightimg").src="gif/fleche1.gif";

} function moveLeft() {

dec+=dexPX;

var objImg=FindID('pic');

objImg.style.backgroundPosition=dec+'px 0px';

if(autoMov)

{

setTimeout("moveLeft()",quickness);

}

} function moveRight() {

dec-=dexPX;

var objImg=FindID('pic');

objImg.style.backgroundPosition=dec+'px 0px';

if(autoMov)

{

setTimeout("moveRight()",quickness);

}

} function FindID(id) { if(document.layers) return document.layersid; if(document.all && !document.getElementById) return document.allid; if(document.all && document.getElementById) return document.getElementById(id); if(!document.all && document.getElementById) return document.getElementById(id); } </script>

</head> <body>

<div style="background-color:#000000;width:420px;">

<div id="pic" style="position:relative;left:10px;top:10px;background-image: url(allee/allee1.jpg);background-repeat: repeat-x;background-position:0px 0px;height:280px;width:400px;margin-bottom:0px;">

</div>

<div id="nav" style="text-align:center;width:400px;margin-top:0px;">

<img src="gif/fleche.gif" onMouseOver="startMoveLeft()" onMouseOut="stopMove()" style="border:0px;" id="leftimg" alt="Left" />

<span style="width:20px"> </span>

<img src="gif/fleche1.gif" onMouseOver="startMoveRight()" onMouseOut="stopMove()" style="border:0px;" id="rightimg" alt="Right"  />

</div>

</div> </body> </html>

Tu peux modifier la variable

var dexPX=20;
pour aller plus vite

Olivier

Lien vers le commentaire
Partager sur d’autres sites
Anonymus

Anonymus

Posté
  • Auteur
Posté

J'ai bien ceci comme code, mes images sont stockées sur le meme répertoire, s'appellent right.gif et left.gif, et le panorama s'appelle pano3.jpg.

<html> <head> <title>Panorama</title>

<script type="text/javascript"> //Settings var quickness=200; //ms var dexPX=20; //numbers of pixels to move at each iteration // var 

autoMov=false; var dec=0; function startMoveLeft() {

 autoMov=true;
 objBut=FindID('leftimg');
 objBut.src="left.gif";
 moveLeft();} function startMoveRight() {

 autoMov=true;
 objBut=FindID('rightimg');
 objBut.src="righton.gif";
 moveRight();} function stopMove() {

 autoMov=false;
 document.getElementById("leftimg").src="left.gif";
 document.getElementById("rightimg").src="right.gif";} function moveLeft() {

 dec+=dexPX;
 var objImg=FindID('pic');
 objImg.style.backgroundPosition=dec+'px 0px';
 if(autoMov) 
 { 
   setTimeout("moveLeft()",quickness); 
 }} function moveRight() {

 dec-=dexPX;
 var objImg=FindID('pic');
 objImg.style.backgroundPosition=dec+'px 0px';
 if(autoMov) 
 { 
   setTimeout("moveRight()",quickness); 
 }} function FindID(id) { if(document.layers) return document.layersid; if(document.all && !document.getElementById) return document.allid; 

if(document.all && document.getElementById) return document.getElementById(id); if(!document.all && document.getElementById) return 

document.getElementById(id); } </script>

</head> <body>

<div style="background-color:#000000;width:420px;">

 <div id="pic" style="position:relative;left:10px;top:10px;background-image: url(pano3.jpg);background-repeat: repeat-x;background-position:0px 

0px;height:280px;width:400px;margin-bottom:0px;"> </div>
 <div id="nav" style="text-align:center;width:400px;margin-top:0px;">
   <img src="left.gif" onMouseOver="startMoveLeft()" onMouseOut="stopMove()" style="border:0px;" id="leftimg" alt="Left" />
   <span style="width:20px"> </span>
   <img src="right.gif" onMouseOver="startMoveRight()" onMouseOut="stopMove()" style="border:0px;" id="rightimg" alt="Right"  />
 </div></div> </body> </html>

et ca ne marche toujours pas.

je vais essayer avec mozilla, mais j'ai un doute.. :(

edit : c'est pire..

Lien vers le commentaire
Partager sur d’autres sites
NiGhMa

NiGhMa

Posté
Posté

Tu pourrais mettre un lien pour que l'on voit ce que cela donne ?

On pourrait faire des tests plus facilement sur IE/Moz/FF/... ;)

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
 Partager
Aller sur la liste des sujets
×
×
  • Créer...