Visite virtuelle html/css
Résolu
Utilisateur anonyme
-
Utilisateur anonyme -
Utilisateur anonyme -
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
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
A voir également:
- Visite virtuelle html/css
- Machine virtuelle windows - Guide
- Notification visite profil facebook - Guide
- Regle virtuelle - Guide
- Qui visite mon profil instagram - Guide
- Editeur html - Télécharger - HTML
5 réponses
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 !
a+
Mettez en résolu quand c'est résolu -.- ...
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 -.- ...
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 :)
Merci comme même de ta réponse :)
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question