Bonjour,
J'ai beau chercher sur le net, je ne trouve pas ce que je veux.
Je dispose de plusieurs images en JPG
http://mon_site/images/image_0.jpg
http://mon_site/images/image_1.jpg
http://mon_site/images/image_2.jpg
http://mon_site/images/image_3.jpg
etc...
1. Ce que j'arrive à réaliser :
Lorsque je survole ma souris sur l'image_0, l'image_1 s'affiche à la place. Lorsque ma souris quitte l'image, l'image_0 s'affiche comme au début.
2. Ce que je souhaite réaliser :
Qu'à la place de l'image_1 seul s'affichent successivement à la suite, l'image_2 puis l'image_3 etc...
Bref faire une sorte d'animation GIF ou Flash mais avec du JPEG. Je sais que c'est possible (enfin j'espère). Mais comment ?
Je suis allé voir le code source par exemple de Dailymotion et je me suis rendu compte qu'ils le faisaient avec une seule image Jpg contenant déjà l'ensemble des images les unes en dessous des autres. Ce n'est pas ce que je souhaite, car je suis obligé de le réaliser en utilisant plusieurs images jpg différentes et pas l'ensemble contenu dans un seul jpg.
Une difficulté supplémentaire s'impose à moi. Je ne peux pas précharger les images en en-tête avant.
Enfin une autre difficulté (mais bon déjà si j'arrivais à le réaliser sans ces 2 difficultés en plus ça serait bien), mes liens images sont sous formes php comme cela :
Au lieu de :
src="http://mon_site/images/image_0.jpg"
src"http://mon_site/images/image_1.jpg"
etc...
j'ai :
src="<?php echo $v['thumbs'][0]; ?>"
src="<?php echo $v['thumbs'][1]; ?>"
etc...
Pour le 1. "ce que j'arrive à faire" voici mon code (sans PHP et code superflu) :
Et en complet avec PHP
PS : j'ai cherché une fonction jquery, mais je ne trouve pas la bonne. J'ai aussi essayé d'intégrer cette fonction javascript : http://florent.ourth.fr/lib/library-javascript-jpg-animation/ mais j'arrive pas à l'inclure dans le onmouseover
Modifié par Damien49 (13 Apr 2012 - 16:38)
J'ai beau chercher sur le net, je ne trouve pas ce que je veux.
Je dispose de plusieurs images en JPG
http://mon_site/images/image_0.jpg
http://mon_site/images/image_1.jpg
http://mon_site/images/image_2.jpg
http://mon_site/images/image_3.jpg
etc...
1. Ce que j'arrive à réaliser :
Lorsque je survole ma souris sur l'image_0, l'image_1 s'affiche à la place. Lorsque ma souris quitte l'image, l'image_0 s'affiche comme au début.
2. Ce que je souhaite réaliser :
Qu'à la place de l'image_1 seul s'affichent successivement à la suite, l'image_2 puis l'image_3 etc...
Bref faire une sorte d'animation GIF ou Flash mais avec du JPEG. Je sais que c'est possible (enfin j'espère). Mais comment ?
Je suis allé voir le code source par exemple de Dailymotion et je me suis rendu compte qu'ils le faisaient avec une seule image Jpg contenant déjà l'ensemble des images les unes en dessous des autres. Ce n'est pas ce que je souhaite, car je suis obligé de le réaliser en utilisant plusieurs images jpg différentes et pas l'ensemble contenu dans un seul jpg.
Une difficulté supplémentaire s'impose à moi. Je ne peux pas précharger les images en en-tête avant.
Enfin une autre difficulté (mais bon déjà si j'arrivais à le réaliser sans ces 2 difficultés en plus ça serait bien), mes liens images sont sous formes php comme cela :
Au lieu de :
src="http://mon_site/images/image_0.jpg"
src"http://mon_site/images/image_1.jpg"
etc...
j'ai :
src="<?php echo $v['thumbs'][0]; ?>"
src="<?php echo $v['thumbs'][1]; ?>"
etc...
Pour le 1. "ce que j'arrive à faire" voici mon code (sans PHP et code superflu) :
<a onmouseover="change_0('thumb','http://mon_site/images/image_1.jpg');" onmouseout="change_0('thumb','http://mon_site/images/image_0.jpg');" href="" title="" >
<img src="http://mon_site/images/image_0.jpg" alt="" name="thumb" /></a>
<script language="Javascript">
function change_0(nom,fichier) {
if (document.images) document.images[nom].src=fichier
}
</script>
Et en complet avec PHP
<a onmouseover="change_0('thumb<?php echo $v['id']; ?>','<?php echo $v['thumbs'][1]; ?>');" onmouseout="change_0('thumb<?php echo $v['id']; ?>','<?php echo $v['thumbs'][0]; ?>');" class="dhtml_link img_live2" href="<?php echo $config['display']['home']; ?>" title="<?php echo str_replace('"', ' ', $v['title']); ?>" onclick="document.getElementById('dhtml_img').src='<?php echo $v['thumbs'][0]; ?>';return false;">
<img class="img_live2" src="<?php echo $v['thumbs'][0]; ?>" alt="<?php echo str_replace('"', ' ', $v['title']); ?>" name="thumb<?php echo $v['id']; ?>" /></a>
<script language="Javascript">
function change_0(nom,fichier) {
if (document.images) document.images[nom].src=fichier
}
</script>
PS : j'ai cherché une fonction jquery, mais je ne trouve pas la bonne. J'ai aussi essayé d'intégrer cette fonction javascript : http://florent.ourth.fr/lib/library-javascript-jpg-animation/ mais j'arrive pas à l'inclure dans le onmouseover
Modifié par Damien49 (13 Apr 2012 - 16:38)