Visite virtuelle html/css Résolu

Question

Bonjour, 

J'aimerais créer une visite virtuelle interactive en html.
J'avais pensé créer des calques en css avec une opacité presque transparent et quand l'utilisateur passe dessus faire un hover et un lien, chose basique quoi..
Mais le problème c'est que j'aimerais savoir comment faire pour que l'image précédente ou suivant, change dynamiquement comme un effet slide, sans changer de page.
Donc il faudra cacher des Div surement mais ça je ne c'est pas comment faire, à part un display:none, mais faut t'il encore savoir comment, donc j'aimerais avoir une aide sur comment je pourrais y arriver svp.

Merci d'avance



Configuration: Windows 7 / Safari 535.7

Templier Nocturne · Answer

sinon, tu peux passer par du AJAX, et recharger juste la div :)

Utilisateur anonyme · Answer

Oui mais je connait pas le javascript et je n'ai pas trop envie de m'y lancer maintenant vue que je finit d'apprendre le PHP. 
Merci comme même de ta réponse :)

Utilisateur anonyme · Answer

En faite, google maps c'est fait comment ?

JooS · Answer

Salut ...
Pour interagir dynamiquement avec l'utilisateur sur le poste client, tu doit utiliser AJAX, dans ton cas, Javasript suffirait !

C'est très facile au fait !

comme tu l'as dis, tu peut modifier l'opacité des div pour en afficher un, et cacher les autres ..., ou bien avec l'attribut display, en tout cas, c'est javascript qui va te permettre de la faire ...

Si tu veut le faire avec une animation, alors t'aura besoin d'un framework, genre Jquery !

Voici un exemple extra-basique !

Javascript :  
function avancer() {  
  var elem = parseInt(document.getElementById('elem_en_cours').innerHTML,10);
  var newElem = elem+1;   

  if(document.getElementById('text'+newElem)) {
    document.getElementById('text'+elem).style.display = 'none';
    document.getElementById('text'+newElem).style.display = 'block';
    document.getElementById('elem_en_cours').innerHTML = newElem;
  }  
}  

function reculer() {  
  var elem = parseInt(document.getElementById('elem_en_cours').innerHTML,10);
  var newElem = elem-1;

  if(document.getElementById('text'+newElem)) {
    document.getElementById('text'+elem).style.display = 'none';
    document.getElementById('text'+newElem).style.display = 'block';
    document.getElementById('elem_en_cours').innerHTML = newElem;
  }
}
 
HTML :
<!DOCTYPE html>
<html>
<head>   
<meta charset=utf-8 />
<title>JS Bin</title>   
<style>   
p {   
  display:none;   
}   
</style>   
</head>   

<body>   
  <p id="text1" style="display:block;">Texte 1</p>
  <p id="text2">Texte 2</p> 
  <p id="text3">Texte 3</p> 
  <p id="text4">Texte 4</p> 

  <a href="#" id="suiv" onclick="avancer();">Suivant</a>
  <a href="#" id="preced" onclick="reculer();">Précédent</a>
  <span style="display:none" id="elem_en_cours">1</span>
</body>   
</html>

a+
Mettez en résolu quand c'est résolu -.- ...

Texte 1

Texte 2

Texte 3

Texte 4

Suivant Précédent a+ Mettez en résolu quand c'est résolu -.- ...

Utilisateur anonyme · Answer

Merci ça ma bien servie :)

Visite virtuelle html/css

5 réponses

Discussions similaires

Newsletters