I found the fix.
I just needed to do this
\HCode{
<img id="#4" src=#3 rel:animated_src=#1 rel:auto_play="0" width=#2 />\Hnewline
instead of
\HCode{
<img id=#4 src=#3 rel:animated_src=#1 rel:auto_play="0" width=#2 />\Hnewline
as I had it. I must have changed this myself without knowing. Now with this
change the HTML
does indeeded has the id there:
<img id='codeperiodicanim' rel:animated_src='anim.gif' rel:auto_play='0'
src='anim_COVER.png' width='750' />
THis is little strange that I had to do <img id="#4" and not <img id=#4
Because in HTML id=codeperiodicanim works (without the '') and also
id='codeperiodicanim' works.
OK. From now on will make sure to use id="#4" from now on.
Case closed.
Thanks,
--Nasser
On 1/30/2024 8:57 PM, Nasser M. Abbasi wrote:
I had this code working for many years.
Now for some reason when I compiled the page again using tex4ht
in TL 2023 animations on the page no longer run in HTML.
After much debugging, I found that <IMG id=...> losses the id=....
part when HTML is generated.
The code I use must use specific id name which is passed to it
for the image in order for the HTML animations to work.
I use external javascript library (libgif), which uses this image id
to add a stop/start/pause for the animation. (not shown in this example)
Below I show MWE and the resulting HTML. We see the id=... is missing
from the <IMG > tag.
--------------- A.tex-----
\documentclass[12pt]{book}
\ifdefined\HCode
\newcommand{\addGIFX}[4]
{
\HCode{
<img id=#4 src=#3 rel:animated_src=#1 rel:auto_play="0" width=#2 />\Hnewline
<br>
<script type="text/javascript">\Hnewline
var #4 = new SuperGif({ gif: document.getElementById('#4') } );\Hnewline
#4.load();\Hnewline
</script>\Hnewline
<a href="javascript:;" onmousedown="#4.pause(); return
false;">Pause</a>\Hnewline
<a href="javascript:;" onmousedown="#4.play(); return
false;">Play</a>\Hnewline
<a href="javascript:;" onmousedown="#4.move_to(0); return
false;">Restart</a>\Hnewline
<a href="javascript:;" onmousedown="#4.move_relative(1); return false;">Step
forward</a>\Hnewline
<a href="javascript:;" onmousedown="#4.move_relative(-1); return false;">Step
back</a>\Hnewline
}
}
\fi
\begin{document}
\ifdefined\HCode
\addGIFX{"anim.gif"}{"750"}{"anim_COVER.png"}{codeperiodicanim}
\fi
\end{document}
---------------------------
Now when I compile the above using
make4ht -ulm default -a debug A.tex "mathjax,htm,fn-in,notoc*,p-width,nostyle"
This is the HTML
--------------------
<!DOCTYPE html>
<html lang='en-US' xml:lang='en-US'>
<head><title></title>
<meta charset='utf-8' />
<meta content='TeX4ht (https://tug.org/tex4ht/)' name='generator' />
<meta content='width=device-width,initial-scale=1' name='viewport' />
<link href='A.css' rel='stylesheet' type='text/css' />
<meta content='A.tex' name='src' />
<script>window.MathJax = { tex: { tags: "ams", }, }; </script>
<script async='async' id='MathJax-script'
src='https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml-full.js'
type='text/javascript'></script>
</head><body>
<!-- l. 25 --><p class='noindent'> <img rel:animated_src='anim.gif'
rel:auto_play='0' src='anim_COVER.png' width='750' />
<br /> <script type='text/javascript'>
var codeperiodicanim = new SuperGif({ gif:
document.getElementById('codeperiodicanim') } );
codeperiodicanim.load();
</script>
<a href='javascript:;' onmousedown='codeperiodicanim.pause(); return
false;'>Pause</a>
<a href='javascript:;' onmousedown='codeperiodicanim.play(); return
false;'>Play</a>
<a href='javascript:;' onmousedown='codeperiodicanim.move_to(0); return
false;'>Restart</a>
<a href='javascript:;' onmousedown='codeperiodicanim.move_relative(1); return
false;'>Step forward</a>
<a href='javascript:;' onmousedown='codeperiodicanim.move_relative(-1); return
false;'>Step back</a>
</p>
</body>
</html>
-------------------------------------
The important part of all the above is this one line
<img rel:animated_src='anim.gif' rel:auto_play='0' src='anim_COVER.png'
width='750' />
You see, the id is missing. When I change the above manually and add
the id=... so it becomes
<img id=codeperiodicanim rel:animated_src='anim.gif' rel:auto_play='0'
src='anim_COVER.png' width='750' />
Now animation works (after loading external libgif on my end)
For some reason in current tex4ht the call
\addGIFX{"anim.gif"}{"750"}{"anim_COVER.png"}{codeperiodicanim}
Is not passing the 4th argument #4 which is the id to the javascript
code as it should using \newcommand given above.
Is there something I need to correct in the above newcommand
to make text4ht adds id= to the HTML <IMG> it generates using the 4th
argument as shown above?
TL 2023
which tex4ht
/usr/local/texlive/2023/bin/x86_64-linux/tex4ht
make4ht --version
make4ht version v0.3m
Thanks
--Nasser
