Thread: How to Script on Sigil
View Single Post
Old 12-01-2017, 05:17 PM   #4
Doitsu
Grand Sorcerer
Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.
 
Doitsu's Avatar
 
Posts: 5,739
Karma: 24031403
Join Date: Dec 2010
Device: Kindle PW2
Quote:
Originally Posted by Sdumau1 View Post
[...]But on my Sigil is not working.
That's because your script contains at least one typo: onmousemove should read onmouseover.

I created a small proof-of-concept epub that works with Sigil. It contains the following code:

Spoiler:
Code:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops">
<head>
  <title></title>
  <link href="../Styles/style.css" type="text/css" rel="stylesheet"/>
  <script>
		function Atv_Hover(img) {
            img.src = "../Images/ok-filled.png";
		}

		function Atv_Hover_Error(img) {
            img.src = "../Images/cancel-filled.png";
		}


		function Atv_Hover_Reset(img) {
            img.src = "../Images/help.png";
		}
</script>
</head>

<body>
  <h3>JavaScript Test</h3>

  <p class="C_Txt"><img class="Atv" id="A" src="../Images/help.png" onmouseover="Atv_Hover_Error(this)" onmouseout="Atv_Hover_Reset(this)"/> a) Option 1.</p>

  <p class="C_Txt"><img class="Atv" id="B" src="../Images/help.png" onmouseover="Atv_Hover(this)" onmouseout="Atv_Hover_Reset(this)"/> b) Option 2.</p>

  <p class="C_Txt"><img class="Atv" id="C" src="../Images/help.png" onmouseover="Atv_Hover_Error(this)" onmouseout="Atv_Hover_Reset(this)"/> c) Option 3.</p>

  <p class="C_Txt"><img class="Atv" id="D" src="../Images/help.png" onmouseover="Atv_Hover_Error(this)" onmouseout="Atv_Hover_Reset(this)"/> d) Option 4.</p>
</body>
</html>


(It shows a circled question mark (help.png) that changes into a checkmark (ok-filled.png) or a cross (cancel-filled.png) on mouseover.)

For more script examples, see the EPUBTEST 0102 - Scripting Tests test file.
Attached Files
File Type: epub quiz_script_epub3.epub (9.2 KB, 281 views)
Doitsu is offline   Reply With Quote