[ForumDog]

Originally Posted by MPDev

The thing I don't like about stylevar is having to explain to everyone that they have to copy those images to all their style directories. This is much more simplistic.

True, it just makes it impossible for people with multiple themes to be consistent. Up to you if you want to do this since it adds a tiny amount of uncached js, but for everyone else wanting to use multiple themed buttons (or having no choice because of multiple style directories)...

In va_spy.js

REMOVE

function pauseSpy() {
	var playimg = document.getElementById("vaplay");
	var pauseimg = document.getElementById("vapause");

	playimg.src = "images/misc/play_up.gif";
	playimg.alt = "Click to Play";
	pauseimg.src = "images/misc/pause_down.gif";
	pauseimg.alt = "Paused...";

	pause();
}

function playSpy() {
	var playimg = document.getElementById("vaplay");
	var pauseimg = document.getElementById("vapause");

	playimg.src = "images/misc/play_down.gif";
	playimg.alt = "Playing...";
	pauseimg.src = "images/misc/pause_up.gif";
	pauseimg.alt = "Click to Pause";

	resume();
}

function pause() {
	play = 0;
}

function resume() {
	play = 1;
}

In vaispy.php

FIND:

<script language="javascript" type="text/javascript">
<!--
    spymax = 25;
// -->
</script>

Note: I added the js commenting for older browser compatbility and the javascript type for code validation, I'll just assume they'll be added in future versions. If you don't have it as above, replace it.



ADD BELOW:

<script language="javascript" type="text/javascript">
<!--
function pauseSpy() {
	var playimg = document.getElementById("vaplay");
	var pauseimg = document.getElementById("vapause");

	playimg.src = "$stylevar[imgdir_misc]/play_up.gif";
	playimg.alt = "Click to Play";
	pauseimg.src = "$stylevar[imgdir_misc]/pause_down.gif";
	pauseimg.alt = "Paused...";

	pause();
}

function playSpy() {
	var playimg = document.getElementById("vaplay");
	var pauseimg = document.getElementById("vapause");

	playimg.src = "$stylevar[imgdir_misc]/play_down.gif";
	playimg.alt = "Playing...";
	pauseimg.src = "$stylevar[imgdir_misc]/pause_up.gif";
	pauseimg.alt = "Click to Pause";

	resume();
}

function pause() {
	play = 0;
}

function resume() {
	play = 1;
}
// -->
</script>

FIND

<img id="vaplay" src="images/misc/play_up.gif" alt="Play" title="Play Comments" onclick="playSpy();" /> &nbsp;
<img id="vapause" src="images/misc/pause_up.gif" alt="Pause" title="Pause Comments" onclick="pauseSpy();" />

REPLACE WITH:

<img id="vaplay" src="$stylevar[imgdir_misc]/play_down.gif" style="cursor:pointer;" alt="Play" title="Play Comments" onclick="playSpy();" /> &nbsp;
<img id="vapause" src="$stylevar[imgdir_misc]/pause_up.gif" style="cursor:pointer;" alt="Pause" title="Pause Comments" onclick="pauseSpy();" />

Note: Added CSS to change the mouse to the hand icon when hovering over the buttons as well.

And make sure your Play/Pause buttons are uploaded to the misc directory of each individual theme.

Finis.