クイズに画像を使う場合は、画像読み込み・表示に時間が掛るため画像先読みをお勧めします。
用意する画像は横や縦に連結して１枚の画像にしてください。問題が多い場合は複数に分けても良いです。
これはサンプルです。縦横とも150pxの画像９枚を横に連結しています。（横1350px・縦150pxです。）
まずはオープニング部分でこれを先読みします。オープニングメッセージ最後に追加してください。
注意点はシングルクオーテーションを使用します。
<img src='http://sawa-s.com/.../flower.jpg' width='1' height='1'>
問題文にはこれの一部分をスタイルシートで表示します。
問題１ <img src='http://sawa-s.com/.../flower.jpg' style='width:150px;height:150px;float:left;margin-right:10px;object-fit:none;object-position:0px 0px;'> 問題２ <img src='http://sawa-s.com/.../flower.jpg' style='width:150px;height:150px;float:left;margin-right:10px;object-fit:none;object-position:-150px 0px;'>
解説です。
width:150px;height:150px; 画像サイズの指定です。
float:left;margin-right:10px; 画像左寄せ・文章回り込み、画像右マージンです。
object-fit:none;object-position:-150px 0px;
ここで画像の表示方法・表示位置の指定をしています。
３問目は object-position:-300px 0px;とｘの値が150pxずつ減っていきます。
９問目は object-position:-1200px 0px; となります。
ここでもスタイル指定はシングルクオーテーションを使用してください。
実行サンプルです。問題はランダムではありません。画像が順に表示されます。
参考にじてみてください。
コメント