0

I've been developing a web site with PHP, and I'd like to put a set of images which will be activated when it's clicked or hovered.

If you simply put an animated gif image by the <img> tag (like <img src ="images/samle.gif">), you'll see the image moving but you couldn't start it by yourself or stop it.

What I'm trying to do is to ensure that the image will move only it's clicked/hovered, as giphy.com is showing. (This site demonstrates exactly what I've been trying to do. Unfortunately it doesn't show how those images are activated.)

I have come up with an idea. That is to create an .avi file from .ppt file by using a converter, then embedding a video player onto an HTML or PHP file. However, even if this idea is feasible, the example of giphy.com would be simpler than that.

So, if you have any other idea as to having gif (or other types of images) files animated, I'd like to know it. Thanks in advance.

Hiroki
  • 3,893
  • 13
  • 51
  • 90
  • Changing a Webpage while its being displayed with PHP isnt possible. PHP can compose the Webpage out of several informations and display is but once its displayed it cannot be changed anymore. You need Javascript or css to do this. – Tom Doodler Sep 23 '15 at 13:30
  • http://stackoverflow.com/questions/5818003/stop-a-gif-animation-onload-on-mouseover-start-the-activation – Xavjer Sep 23 '15 at 13:32

1 Answers1

1

this is the code they have in one of their gif img: <img id="sEVReHucdvmOQ" class="gifs-gif unloaded" src="https://media2.giphy.com/media/sEVReHucdvmOQ/200_s.gif" data-still="https://media2.giphy.com/media/sEVReHucdvmOQ/200_s.gif" data-animated="https://media2.giphy.com/media/sEVReHucdvmOQ/200.gif" alt="Animated Gif Rabbit animated GIF" data-height="200" data-width="321" style="width: 267.983px; height: 167.586px;" nopin="nopin">

for what I see the have a link for the still: data-still="https://media2.giphy.com/media/sEVReHucdvmOQ/200_s.gif"

and another for the animated: data-animated="https://media2.giphy.com/media/sEVReHucdvmOQ/200.gif" I don't know for sure how they make the mouseover to trigger the data-animated but what I see is that the img class changes from "gifs-gif unloaded" to "gifs-gif unloaded hovering" and also change the src from the data-still to the data-animated, so i supose that's the trick, onmouseenter change the src for the path in data-animated and onmouseleave change it back to the data-still path.

Pizzy
  • 50
  • 9