[英]How can I make different images display when this element is toggled, rather than text
I'm working on a project that already has most of the work completed. 我正在做一个已经完成大部分工作的项目。 I would just like to change this element to display images instead of the text "Pause Audio" and "Continue Audio". 我只想更改此元素以显示图像,而不是文本“暂停音频”和“继续音频”。
Thanks in advance. 提前致谢。
var player = new MediaElementPlayer('audio', {
audioWidth: 0,
features: [],
success: function (mediaElement, domObject) {}
});
var audioOn = true;
var audioSrc = '';
function playSoundClip(path)
{
player.pause();
audioSrc = path;
player.setSrc(audioSrc);
if (audioOn)
{
player.play();
}
}
function audioToggle(toggleAnchor)
{
if (audioOn)
{
player.pause();
audioOn = false;
$(toggleAnchor).html('**Continue Audio**');
}
else
{
audioOn = true;
$(toggleAnchor).html('**Pause Audio'**);
if (audioSrc.length > 0)
{
player.play();
}
}
}
只需将<img>
html放入.html()函数中即可。
$(toggleAnchor).html('<img src="my/img/src.jpg">');
You should add the images into the HTML document first , so the user doesn't constantly request the same image from the host. 您应该添加图片到HTML文件首先 ,这样用户就不会不断地从主机请求相同的图像。 This helps reduce bandwidth usage, and also stops image flickering (when a new image is loaded). 这有助于减少带宽使用,还可以防止图像闪烁(加载新图像时)。 For example (contained in the element): 例如(包含在元素中):
<img src="img/blah" id="img1" style="display:none;">
<img src="img/blah" id="img2" style="display:inline;">
Then merely toggle their display attribute. 然后只需切换其显示属性。 This could also be done using Jquery's hide()
and show()
(if desired). 如果需要,也可以使用Jquery的hide()
和show()
来完成。 Below is an example toggle function: 下面是一个示例切换功能:
function toggle(){
if ($('img1').css('display') == 'none') {
$('img1').css('display') = 'inline';
$('img2').css('display') = 'none';
}
else {
$('img1').css('display') = 'none';
$('img2').css('display') = 'inline';
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.