JQuery inactivation sur ma page web.
Résolu
bouska1
Messages postés
8
Date d'inscription
Statut
Membre
Dernière intervention
-
Utilisateur anonyme -
Utilisateur anonyme -
Bonjour à tous ! C'est mon premier post donc si je me suis trompé de forum, veuillez m'excusez d'avance.
Voici mon problème, j'ai repris un code que j 'ai trouvé sur le web. Quand je l'essaie sur http://jsfiddle.net/srg6g/637/ tout fonctionne à merveille.
Par contre quand je le mets sur Dreamweaver et que j'ouvre ma page web il m'affiche tout les text: "text 1" "text 2" et "text 3"... j'aimerais qu'ils soient caché et apparaissent comme sur JSFIDDLE.
Comment puise-je faire ?
Merci de votre aide avance.
html
<div id="maps">
<div class="map-box">><a href="#london"><img src="https://dummyimage.com/100x100/000/fff&text=London" /></a></div><br>
<div class="map-box"> <a href="#south-west"><img src="https://dummyimage.com/100x100/000/fff&text=South+West" /></a> </div> <br>
<div class="map-box"><a href="#south-central"><img src="https://dummyimage.com/100x100/000/fff&text=South+Central" /></a> </div>
<br /><br/>
<div id="areas">
<div id="london">
<p>Text 1</p>
</div>
<div id="south-west">
<p>Text 2</p>
</div>
<div id="south-central">
<p>Text 3</p>
</div>
</div>
scripte
$(".map-box a").click(function(e) {
$("#areas div").hide();
$(this.hash).show();
e.preventDefault();
});
$("#areas div:not(#london)").hide();
CSS
#maps { overflow: auto; }
.map-box { float: left; }
Bien le bonjour !
Voici mon problème, j'ai repris un code que j 'ai trouvé sur le web. Quand je l'essaie sur http://jsfiddle.net/srg6g/637/ tout fonctionne à merveille.
Par contre quand je le mets sur Dreamweaver et que j'ouvre ma page web il m'affiche tout les text: "text 1" "text 2" et "text 3"... j'aimerais qu'ils soient caché et apparaissent comme sur JSFIDDLE.
Comment puise-je faire ?
Merci de votre aide avance.
html
<div id="maps">
<div class="map-box">><a href="#london"><img src="https://dummyimage.com/100x100/000/fff&text=London" /></a></div><br>
<div class="map-box"> <a href="#south-west"><img src="https://dummyimage.com/100x100/000/fff&text=South+West" /></a> </div> <br>
<div class="map-box"><a href="#south-central"><img src="https://dummyimage.com/100x100/000/fff&text=South+Central" /></a> </div>
<br /><br/>
<div id="areas">
<div id="london">
<p>Text 1</p>
</div>
<div id="south-west">
<p>Text 2</p>
</div>
<div id="south-central">
<p>Text 3</p>
</div>
</div>
scripte
$(".map-box a").click(function(e) {
$("#areas div").hide();
$(this.hash).show();
e.preventDefault();
});
$("#areas div:not(#london)").hide();
CSS
#maps { overflow: auto; }
.map-box { float: left; }
Bien le bonjour !
A voir également:
- JQuery inactivation sur ma page web.
- Comment supprimer une page sur word - Guide
- Web office - Guide
- Comment traduire une page web - Guide
- Capture page web - Guide
- Création page web - Guide
11 réponses
Bonjour, je connais pas dreamweawer , mais je pense qu'il ne supporte pas ce style de langages.
j'ai regardé le site que tu as donné, et si c'est juste faire apparaître un texte au click sur une image (évenement click) je pense que tu passer par du javascript classique sans problème. Ensuite il faut voir ce que tu recherches vraiment.
linux est le noyaux et Windows les pépins
j'ai regardé le site que tu as donné, et si c'est juste faire apparaître un texte au click sur une image (évenement click) je pense que tu passer par du javascript classique sans problème. Ensuite il faut voir ce que tu recherches vraiment.
linux est le noyaux et Windows les pépins
Utilisateur anonyme
As tu mis le lien vers le fichier .js dans ton head ?
Bonjour et merci pour la réponse.
J'ai jamais fais du javascript..
J'aimerais faire apparaître un texte au click sur une image (évenement click), lorsqu'on click sur:
Click Image 1 --> text 1
Click Image 2 ( enleve text 1 ) --> text 2 apparait
Click Image 3....
Ou faut-il que j'inscrive mon Java ?
Merci d'avance
J'ai jamais fais du javascript..
J'aimerais faire apparaître un texte au click sur une image (évenement click), lorsqu'on click sur:
Click Image 1 --> text 1
Click Image 2 ( enleve text 1 ) --> text 2 apparait
Click Image 3....
Ou faut-il que j'inscrive mon Java ?
Merci d'avance
Oui voila http://trucpourccm.franceserv.com/
si c'est bien ca que tu veux, je l'ai fait avec du js classique. je trouve que c'est plus facilement compréhensible que jquery
si c'est bien ca que tu veux, je l'ai fait avec du js classique. je trouve que c'est plus facilement compréhensible que jquery
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
ha tu regarde dans le code source (click droit -> afficher code source ) pour bien voir.
En fait celui ci fonctionne pour trois images. on peut en rajouter mais il faut allonger le code.
pour chacune des image tu met un identifiant (id="img1"/id="img2"....)
tu met une zone de texte avec un identifiant (id="texte")
voici la partie html :
voila ensuite tu met le javascript en bas de page
voila bon si tu n'en a jamais fait, il y a peut être des choses que tu comprends pas. J'ai tout de même fait attention de mettre des noms de variables compréhensible.
si tu coince à un moment ou à un autre dis le moi, j'adapterai a ton site.
En fait celui ci fonctionne pour trois images. on peut en rajouter mais il faut allonger le code.
pour chacune des image tu met un identifiant (id="img1"/id="img2"....)
tu met une zone de texte avec un identifiant (id="texte")
voici la partie html :
<div id="content"> <div id="bloc_img"> <img src="img1.jpg" alt="" id="img1" /><img src="img2.jpg" alt="" id="img2" /> <img src="img3.jpg" alt="" id="img3" /> </div> <div id="bloc_text"> <p id="text"></p> </div> </div>
voila ensuite tu met le javascript en bas de page
var text = document.getElementById("text");
var img1 = document.getElementById("img1");
var img2 = document.getElementById("img2");
var img3 = document.getElementById("img3");
var text_img1 = "ceci est le texte de l'image 1";
var text_img2 = "ceci est le texte de l'image 2";
var text_img3 = "ceci est le texte de l'image 3";
img1.onclick = function() {
text.innerHTML = text_img1;
}
img2.onclick = function() {
text.innerHTML = text_img2;
}
img3.onclick = function() {
text.innerHTML = text_img3;
}
voila bon si tu n'en a jamais fait, il y a peut être des choses que tu comprends pas. J'ai tout de même fait attention de mettre des noms de variables compréhensible.
si tu coince à un moment ou à un autre dis le moi, j'adapterai a ton site.
J'aimerais mettre une image au lieu du texte
comment je fais pour insérer une image dans ce code : var text_img1 = "ceci est le texte de l'image 1";
J'aimerais rajouter une image ( logo ) qui apparaîtrait juste à l'ouverture du site et qui serais à la place ou apparaissent les autres images. Mais qui disparaît lorsqu'on click sur les images pour laisser place text ( image ) .
comment je fais pour insérer une image dans ce code : var text_img1 = "ceci est le texte de l'image 1";
J'aimerais rajouter une image ( logo ) qui apparaîtrait juste à l'ouverture du site et qui serais à la place ou apparaissent les autres images. Mais qui disparaît lorsqu'on click sur les images pour laisser place text ( image ) .
Bonjour, je suis de retour...
je comprends pas trop. En effet, si le logo apparaît à l'ouverture du site et à la place des autres images. Je comprends pas où vous voulez cliquez puisque les images cliquables sont remplaces pas le logo. Pouvez vous être plus explicite ?
je comprends pas trop. En effet, si le logo apparaît à l'ouverture du site et à la place des autres images. Je comprends pas où vous voulez cliquez puisque les images cliquables sont remplaces pas le logo. Pouvez vous être plus explicite ?
j'ai essayé de faire avec ce que je pense avoir compris. j'ai remplacé le cadre où il y avait le texte par une image. Et quand on clique sur les autres images l'image du texte disparaît pour laisser place au texte
tiens moi au courant
http://trucpourccm.franceserv.com/
linux est le noyaux et Windows les pépins
tiens moi au courant
http://trucpourccm.franceserv.com/
linux est le noyaux et Windows les pépins
Merci beaucoup c'est exactement ce que je cherchais ! Juste deux petits détails :
-var text_img1 = "ceci est le texte de l'image 1 je met d'autre truc";
comment j'insert une image au lieu de : "ceci est le texte de l'image 1 je met d'autre truc"
- Et j aimerais mettre le bloc text en dessous des images.
-var text_img1 = "ceci est le texte de l'image 1 je met d'autre truc";
comment j'insert une image au lieu de : "ceci est le texte de l'image 1 je met d'autre truc"
- Et j aimerais mettre le bloc text en dessous des images.
Voila j'ai fait les modifications, je pars jusqu a demain..pour le bloc texte à déplacer c'est css je vous invite à regarder le https://openclassrooms.com/fr/courses
linux est le noyaux et Windows les pépins
linux est le noyaux et Windows les pépins