您的位置:首页 > Web前端 > CSS

css设置图片某个区域为文字区域(让两个div重合)

2015-05-20 00:00 525 查看
为了播放音乐。音乐的按钮有一个区域,放提示语,用程序动态设置。
效果图如:



字的内容由成都设计公司提供的程序来处理:

[html]

view plain
copy

<EMBED id=ZeroClipboardMovie_1 height=18 name=ZeroClipboardMovie_1 type=application/x-shockwave-flash align=middle pluginspage=http://www.macromedia.com/go/getflashplayer width=18 src=http://static.blog.csdn.net/scripts/ZeroClipboard/ZeroClipboard.swf wmode="transparent" flashvars="id=1&width=18&height=18" allowfullscreen="false" allowscriptaccess="always" bgcolor="#ffffff" quality="best" menu="false" loop="false">

<div style="position:relative">

<!-- 图片的DIV -->

<div style="position:absolute; float:left; top:0px; left:0px;">

<img style="width:320px" src="${ctx}/images/guide/player_start.png" name="playAudio" id="playAudio">

</div>

<!-- 提示语的DIV-->

<div id="tips" style="position:absolute; float:left;top:17px;left:70px;height:18px;width:200px;color:white;">可点击按钮播放音频介绍</div>

</div>

附对应的图片:





[javascript]

view plain
copy

<EMBED id=ZeroClipboardMovie_2 height=18 name=ZeroClipboardMovie_2 type=application/x-shockwave-flash align=middle pluginspage=http://www.macromedia.com/go/getflashplayer width=18 src=http://static.blog.csdn.net/scripts/ZeroClipboard/ZeroClipboard.swf wmode="transparent" flashvars="id=2&width=18&height=18" allowfullscreen="false" allowscriptaccess="always" bgcolor="#ffffff" quality="best" menu="false" loop="false">

$("#playAudio").click(function(){

var isPause=$("#isPause").val();

//alert("isPause:"+isPause);

var srcUrl= $("#playAudio").attr("src");

if(srcUrl.indexOf("player_start")>0){

if(isPause==""){

// alert("player_start");

window.meeting.setMusicUrl('${meetingContent.reserve2}');

$("#isPause").val("pause");

}

window.meeting.startPlay();

$("#tips").html("正在播放中......");

$("#playAudio").attr("src","${ctx}/images/guide/player_pause.png");

}else if(srcUrl.indexOf("player_pause")>0){

// alert("player_pause111111");

window.meeting.pausePlay();

$("#tips").html("已暂停,点击继续");

$("#playAudio").attr("src","${ctx}/images/guide/player_start.png");

}

// window.meeting.startPlay('${meetingContent.reserve2}');

// $("#playAudio").attr("src","${ctx}/images/guide/player_pause.png");

});
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: