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

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

Bonjour
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

Supprimé

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

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/

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>

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 ?

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

Code:

<link rel='stylesheet'  href='http://www.bvx59.fr/monsite/images/Photo.jpg' type='text/css' media='all' />

3) bon vu au message ci-dessus

Pour le turn-image.css peut être à mettre ailleurs ?

BVX59 a écrit:
<link rel='stylesheet'  href='http://www.bvx59.fr/monsite/images/Photo.jpg' type='text/css' media='all' />

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 marcher

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

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

Ah chez moi ton image tourne, navigateur FireFox.
Tu as quoi comme navigateur ?

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:

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 ?

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.

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"

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 ?

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.