是否可以用简单的CSS样式的按钮替换Uploadify按钮(包含向上/向上/向下状态的图形)?
我已经能够提出一个可行的解决方案。基本概要如下:
buttonImg: " "
wmode:"transparent"
button
a
Flash对象将屏蔽其下方的按钮,使其免受鼠标悬停等事件的影响;因此,要获得悬停效果,您需要采取一些其他步骤:
.hover()
放在一起:
HTML
<div class="UploadifyButtonWrapper"> <a>Upload Files</a> <div class="UploadifyObjectWrapper"> <input type="file" id="Uploadify" name="Uploadify" /> </div> </div>
CSS
div.UploadifyButtonWrapper{ position:relative; } /* fake button */ div.UploadifyButtonWrapper a { position:absolute; /* relative to UploadifyButtonWrapper */ top:0; left:0; z-index:0; display:block; float:left; border:1px solid gray; padding:10px; background:silver; color:black; } /* pass hover effects to button */ div.UploadifyButtonWrapper a.Hover { background:orange; color:white; } /* position flash button above css button */ div.UploadifyObjectWrapper { position:relative; z-index:10; }
Javascript:
$("input.Uploadify", self).uploadify({ ... buttonImg: " ", wmode: "transparent", ... }); var $buttonWrapper = $(".UploadifyButtonWrapper", self); var $objectWrapper = $(".UploadifyObjectWrapper", self); var $object = $("object", self); var $fakeButton = $("a", self); var width = $fakeButton.outerWidth(); var height = $fakeButton.outerHeight(); $object.attr("width", width).attr("height", height); $buttonWrapper.css("width", width + "px").css("height", height + "px") $objectWrapper.hover(function() { $("a", this).addClass("Hover"); }, function() { $("a", this).removeClass("Hover"); });