Effet image tournante avec WebAcappella Responsive
2 participants
Page 1 sur 1
Effet image tournante avec WebAcappella Responsive
Bonjour
Je bloque sur le dernier paragraphe du Tuto
En remplaçant par l'adresse de votre image. (SVP pouvez vous me donner plus de précisions)
Mettre l'adresse de l'image ? de ou à ou et partout ou il y a du turn-image-box ? http://www.bvx59.fr/monsite/images/Photo.jpg
Merci pour votre aide
BVX59
Je bloque sur le dernier paragraphe du Tuto
En remplaçant par l'adresse de votre image. (SVP pouvez vous me donner plus de précisions)
Mettre l'adresse de l'image ? de ou à ou et partout ou il y a du turn-image-box ? http://www.bvx59.fr/monsite/images/Photo.jpg
- Code:
<div class="turn-image-box-obj turn-image-box-centered turn-image-box-icon-effect-rotate turn-image-box-basic">
<div class="turn-image-box-icon-section turn-image-box-small-icon" style=" padding-left: 8px; padding-right: 8px; padding-top: 0px; padding-bottom: 8px;">
<div class="turn-image-box-icon-holder" style=" font-size: 120px;"><img src="mon image.png" alt="" /></div>
</div>
</div>
Merci pour votre aide
BVX59
Dernière édition par BVX59 le Jeu 23 Mar 2017 - 16:55, édité 2 fois
Re: Effet image tournante avec WebAcappella Responsive
Bonjour
le copier coller n'apparaissant pas dans le 1er message je recopie la 1ere ligne
Pouvez vous me mettre l'adresse de l'image ou il le faut
Merci
le copier coller n'apparaissant pas dans le 1er message je recopie la 1ere ligne
- Code:
<div class="turn-image-box-obj turn-image-box-centered turn-image-box-icon-effect-rotate turn-image-box-basic"
Pouvez vous me mettre l'adresse de l'image ou il le faut
Merci
Dernière édition par BVX59 le Jeu 23 Mar 2017 - 11:40, édité 1 fois
ADRESSE IMAGE TOURNANTE AVEC WEBACAPPELLA RESPONSIVE
Supprimé
Dernière édition par BVX59 le Jeu 23 Mar 2017 - 11:41, édité 1 fois
Re: Effet image tournante avec WebAcappella Responsive
Bonjour
Il faut que tu réédites chacun de tes messages en mettant les codes dans les balises codes car là tous tes codes sont interprétés par le navigateur et perturbent la page et les messages sont incompréhensibles.
voir sur ce lien comment utiliser les balises "code"
https://ellade.forumperso.com/t314-inserer-les-balises-code-dans-un-message
Il faut que tu réédites chacun de tes messages en mettant les codes dans les balises codes car là tous tes codes sont interprétés par le navigateur et perturbent la page et les messages sont incompréhensibles.
voir sur ce lien comment utiliser les balises "code"
https://ellade.forumperso.com/t314-inserer-les-balises-code-dans-un-message
Re: Effet image tournante avec WebAcappella Responsive
Merci pour l'info sur l'utilisation des balises pour insérer du code
Désolé je fait mes débuts
Reste plus que savoir mettre ou il le faut mettre l'adresse de l'image, j'ai fait plusieurs tests en vain juste apparition de l'image ne tournant pas
http://www.bvx59.fr/monsite/
Désolé je fait mes débuts
Reste plus que savoir mettre ou il le faut mettre l'adresse de l'image, j'ai fait plusieurs tests en vain juste apparition de l'image ne tournant pas
http://www.bvx59.fr/monsite/
- Code:
<div class="turn-image-box-obj turn-image-box-centered turn-image-box-icon-effect-rotate turn-image-box-basic">
<div class="turn-image-box-icon-section turn-image-box-small-icon" style=" padding-left: 8px; padding-right: 8px; padding-top: 0px; padding-bottom: 8px;">
<div class="turn-image-box-icon-holder" style=" font-size: 120px;"><img src="http://www.bvx59.fr/monsite/images/Photo.jpg" alt="" /></div>
</div>
</div>
Re: Effet image tournante avec WebAcappella Responsive
Pour ce dernier code c'est bon, tu as mis l'adresse de l'image où il fallait.
Mais c'est le css qui fait tourner l'image, as-tu bien créé le fichier turn-image.css en faisant un copié/collé du premier code du tuto (rien n'est à modifier dans ce code) et où as-tu placé ce fichier ?
Mais c'est le css qui fait tourner l'image, as-tu bien créé le fichier turn-image.css en faisant un copié/collé du premier code du tuto (rien n'est à modifier dans ce code) et où as-tu placé ce fichier ?
Re: Effet image tournante avec WebAcappella Responsive
Pour le fichier turn-image.css je l'ai bien créé dans Smultron et mis à la racine du Site
Je viens de le refaire et toujours pareil ? (j'ai même testé dans le répertoire images)
1) Je récapitule création du turn-image.css télévisé sur la racine du Site
2) Dans le head de la page mettre
Pour le turn-image.css peut être à mettre ailleurs ?
Je viens de le refaire et toujours pareil ? (j'ai même testé dans le répertoire images)
1) Je récapitule création du turn-image.css télévisé sur la racine du Site
2) Dans le head de la page mettre
- Code:
<link rel='stylesheet' href='http://www.bvx59.fr/monsite/images/Photo.jpg' type='text/css' media='all' />
Pour le turn-image.css peut être à mettre ailleurs ?
Re: Effet image tournante avec WebAcappella Responsive
Bon alors dans le head erreur de code le lien que tu as mis (en gras) n'est pas un appel du fichier css mais un appel de l'image ça ne peut pas marcherBVX59 a écrit:
<link rel='stylesheet' href='http://www.bvx59.fr/monsite/images/Photo.jpg' type='text/css' media='all' />
Ton css tu peux le mettre où tu veux, à la racine ou dans un répertoire l'important est d'indiquer la bonne adresse là où tu l'as placé, comme il est à la racine, le code à mettre dans head sera : (adresse relative du css en rouge, comme dans le tuto)
<link rel='stylesheet' href='turn-image.css' media='all' />
Essaye voir si ça marche
Re: Effet image tournante avec WebAcappella Responsive
J'ai remplacé comme précisé mais l'image ne tourne pas ?
Elle s'efface quand on passe la souris dessus ? http://www.bvx59.fr/monsite/
Désolé, j'ai pourtant suivi les opération pas à pas
Elle s'efface quand on passe la souris dessus ? http://www.bvx59.fr/monsite/
Désolé, j'ai pourtant suivi les opération pas à pas
Re: Effet image tournante avec WebAcappella Responsive
Ah chez moi ton image tourne, navigateur FireFox.
Tu as quoi comme navigateur ?
Tu as quoi comme navigateur ?
Re: Effet image tournante avec WebAcappella Responsive
Sur Firefox l'image tourne effectivement, pour répondre j'utilise Safari sur Mac
Je suis allé sur le test W3C et voici l'erreur:
Mon image en JPG et non pas PNG ?
Je suis allé sur le test W3C et voici l'erreur:
- Code:
Error: Bad value mon image.png for attribute src on element img: Illegal character in path segment: space is not allowed.
From line 268, column 75; to line 268, column 108
: 120px;"><img src="mon image.png" alt="" /></div>
Mon image en JPG et non pas PNG ?
Re: Effet image tournante avec WebAcappella Responsive
Cette erreur ne concerne pas l'image tournante mais une autre image que tu as utilisée dont le nom est "mon image.png" et l'erreur est que le nom de cette image a un espace la règle du web est qu'on ne met jamais un nom de fichier ou répertoire avec espace ou accent, ce n'est pas accepté par le w3c, les navigateurs ne reconnaissent pas et peuvent parfois ne pas retrouver l'adresse du fichier ou du répertoire.
Il faut toujours faire très attention au nom de fichier avant de les charger dans WARC.
ton image "mon image.png" aurait du être renommée avant de la mettre dans WA de cette façon "mon-image.png" (sans espace ni accent)
Pour notre image tournante, je viens de tester avec Safari pour windows, pas de chance ça marche sur tous les navigateurs courants sauf avec Safari.
Je vais le préciser dans le tuto.
Il faut toujours faire très attention au nom de fichier avant de les charger dans WARC.
ton image "mon image.png" aurait du être renommée avant de la mettre dans WA de cette façon "mon-image.png" (sans espace ni accent)
Pour notre image tournante, je viens de tester avec Safari pour windows, pas de chance ça marche sur tous les navigateurs courants sauf avec Safari.
Je vais le préciser dans le tuto.
Re: Effet image tournante avec WebAcappella Responsive
J'ai vérifié et je n'ai pas d'image (mon image.png) c'est apparemment Warc qui a mis ces codes venant du code à mettre dans Warc code HTML à mettre comme précisé dans le Tuto : img src="mon image.png"
La seule solution que j'ai trouvé a été de modifier l'index.html dans le Site et mettre le bon chemin de ma photo à l'endroit indiqué je n'ai plus de message d'erreur dans W3C ?
- Code:
<div class="turn-image-box-obj turn-image-box-centered turn-image-box-icon-effect-rotate turn-image-box-basic">
<div class="turn-image-box-icon-section turn-image-box-small-icon" style=" padding-left: 8px; padding-right: 8px; padding-top: 0px; padding-bottom: 8px;">
<div class="turn-image-box-icon-holder" style=" font-size: 120px;"><img src="mon image.png" alt="" /></div>
</div>
</div>
La seule solution que j'ai trouvé a été de modifier l'index.html dans le Site et mettre le bon chemin de ma photo à l'endroit indiqué je n'ai plus de message d'erreur dans W3C ?
Re: Effet image tournante avec WebAcappella Responsive
Ah oui je vois maintenant, tu avais mis une 2ème image tournante en bas de la page avec le code d'exemple que tu viens de corriger ok je la vois maintenant aussi en bas de page.
Sujets similaires
» Bouton "Retour en haut" avec effet "Smooth Scrolling" avec WebAcappella Responsive
» Exécuter du JS avec un bouton ou image WebAcappella Responsive
» Mettre une image de fond dans un menu WebAcappella Responsive
» Tag Carousel 3D en jQuery avec Warc WebAcappella Responsive
» Comment intégrer un fichier dans un code avec WebAcappella Responsive
» Exécuter du JS avec un bouton ou image WebAcappella Responsive
» Mettre une image de fond dans un menu WebAcappella Responsive
» Tag Carousel 3D en jQuery avec Warc WebAcappella Responsive
» Comment intégrer un fichier dans un code avec WebAcappella Responsive
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum