Using Images for each button

I am trying to create a spry menu that has 5 buttons and each button will have 3 different images for each state (something like this http://jjcstudios.com/woof_wallet/ ) I was going to use the insert > navigation bar but I read that this method creates a lot of extra javascript and they recommended using Spry instead. Can anyone point me in a direction to create a clean method of doing java rollovers or modifying the spry menu so it will work as a rollover. thanks john

John,
To place the javascript in an external file, grab the code that is producedon the page
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
function MM_nbGroup(event, grpName) { //v6.0
var i,img,nbArr,args=MM_nbGroup.arguments;
if (event == "init" && args.length > 2) {
    if ((img = MM_findObj(args[2])) != null && !img.MM_init) {
      img.MM_init = true; img.MM_up = args[3]; img.MM_dn = img.src;
      if ((nbArr = document[grpName]) == null) nbArr = document[grpName] = new Array();
      nbArr[nbArr.length] = img;
      for (i=4; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
        if (!img.MM_up) img.MM_up = img.src;
        img.src = img.MM_dn = args[i+1];
        nbArr[nbArr.length] = img;
} else if (event == "over") {
    document.MM_nbOver = nbArr = new Array();
    for (i=1; i < args.length-1; i+=3) if ((img = MM_findObj(args[i])) != null) {
      if (!img.MM_up) img.MM_up = img.src;
      img.src = (img.MM_dn && args[i+2]) ? args[i+2] : ((args[i+1])? args[i+1] : img.MM_up);
      nbArr[nbArr.length] = img;
} else if (event == "out" ) {
    for (i=0; i < document.MM_nbOver.length; i++) {
      img = document.MM_nbOver[i]; img.src = (img.MM_dn) ? img.MM_dn : img.MM_up; }
} else if (event == "down") {
    nbArr = document[grpName];
    if (nbArr)
      for (i=0; i < nbArr.length; i++) { img=nbArr[i]; img.src = img.MM_up; img.MM_dn = 0; }
    document[grpName] = nbArr = new Array();
    for (i=2; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
      if (!img.MM_up) img.MM_up = img.src;
      img.src = img.MM_dn = (args[i+1])? args[i+1] : img.MM_up;
      nbArr[nbArr.length] = img;
and place it in a file called menu.js or similar.
In your page place the following in between the <head></head> tags
<script src="menu.js" type="text/javascript"></script>
to link the Javascript.
If you want to put menu.js in a different folder, make sure you adjust the link accordingly, like "js/menu.js"
Ben

Similar Messages

Spry menus - using images for buttons

A search of the forums shows two approaches, to use an image
for a button in a Spry menu.
One of them uses HTML to put an <img> into the
<li>. Here is the example I found cited [contributed by
arandlett - though said there not to work in IE7].
<ul class="MenuBarVertical" id="MenuBar1">
<li><img src="images/bullet.png" align="left"
/><a class="MenuBarItemSubmenu"
href="index.htm">home</a></li>
<li><img src="images/bullet.png" align="left"
/><a href="#">About</a> </li>
</ul>
The other advises "find "background-color" and change it to
"background-image: url(link/to/image)" " [contributed by The only
RaM].
Underlying of course, is the question, how does the HTML
interplay (or not!) with the Spry javascript?
By this time, there must be pretty wide experience. After
all, putting interesting buttons in the popups/dropdowns is in many
ways what this is about.
We would be quite appreciative to learn what experience
indicates, now, is best practice. Or, does it depend, on ... ?
Thanks in advance for your help, David Allen

Let me add a note to my own post.
We would still be delighted to hear others' experience, with
images in Spry menus. One thing does emerge with a little further
look: The Spry menu is suited to using the _same_ image for each
button. If the desire is to vary that image (such as to use an
unusual font, so that the text changes on each image), then
Fireworks clearly is the tool of choice.
Again, we would be pleased to hear other experiences, David
Allen

Adding A Separate Background Image For Each Menu Item

I asked this in the Spry forum, and not sure I understand the answer. Plus, I should have been more specific in asking how to do it, as I'm still pretty new to this stuff. Nothing I'd found indicated it could be done, or how.
Org question -
I know you can apply a background image to the menu bar items, but is it possible to add a background image for each individual item? What I'm basically trying to keep are the effects (bevel/emboss, etc.,) that I attached to the text, when I created it in PS CS4.
Answer -
Yes you can. The widget is just normal plain html markup so you can just add other classNames or id attributes to the elements. And style the elements through those classes/ids.
Does this mean I'd have to write a new rule for each menu item? What?
Thank you.

Did an Adobe Tutorial for creating/entering a Spry Menu Bar. This is the HTML, after I took out the submenus.
<ul id="MenuBar1" class="MenuBarHorizontal">
      <li><a href="news.html">Features</a></li>
      <li><a href="news.html">News</a></li>
      <li><a href="news.html">Fashion</a></li>
      <li><a href="news.html">Lifestyle</a></li>
      <li><a href="news.html">Calendar</a></li>
    </ul>
This is from the SpryMenuBarHorizontal.css (It seems like I need to make changes in the Design Info section of this code. But nothing I've tried has worked):
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: auto;
text-transform: uppercase;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
z-index: 1000;
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: 7em;
float: left;
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 8.2em;
position: absolute;
left: -1000em;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
left: auto;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
width: 8.2em;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
position: absolute;
margin: -5% 0 0 95%;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
left: auto;
top: 0;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
border: 1px solid #CCC;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
background-color: #EEE;
color: #333;
text-decoration: none;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
background-color: #33C;
color: #FFF;
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
background-color: #33C;
color: #FFF;
SUBMENU INDICATION: styles if there is a submenu under a given menu item
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
background-image: url(SpryMenuBarDown.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
background-image: url(SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
background-image: url(SpryMenuBarDownHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
background-image: url(SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
BROWSER HACKS: the hacks below should not be changed unless you are an expert
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
position: absolute;
z-index: 1010;
filter:alpha(opacity:0.1);
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
ul.MenuBarHorizontal li.MenuBarItemIE
display: inline;
f\loat: left;
background: #FFF;

RAW JPEG PROBLEM I'm new to Aperture and neglected to mark RAW JPEG pairs when I imported (from iPhoto). Now I have two images for each photo. Help!! How can I change this?

I’m new to Aperture and neglected to mark RAW+JPEG pairs when I imported (from iPhoto). Now I have two images for each photo. Help!! How can I change this?

How did you import from iPhoto? If you saw the Import panel with raw -jpeg pairs, then you probably did not import your iPhoto library as library, but as files, and then you will see plenty of duplicates - previews, thumbnails, originls, edited versions. If that should be the case, it would be better to delete the import from iPhoto and to import your iPhoto library again, but this time using "File > Import > Library".
Only that would require compatible versions of iPhoto and Aperture. What are your Aperture and iPhoto version numbers?

Using Images for Tabbed Panels

I'm trying to use button images that I created in photopshop as the background for the tabs of my tabbed panel widget in dreamweaver. I tried this by inserting the folling code into the css (note bold line):
.TabbedPanelsTab {
position: relative;
top: 1px;
float: left;
padding: 4px 10px;
margin: 0px 1px 0px 0px;
font: bold 0.9em sans-serif;
background-image:url(images/tabs.gif);
list-style: none;
-moz-user-select: none;
-khtml-user-select: none;
cursor: pointer;
color: #FFF;
I also tried using background:url(images/tabs.gif) in place of background-image:url(images/tabs.gif) but it still won't work. What do I need to know about using images for my tabs?

Have a look here
http://www.adobe.com/devnet/dreamweaver/articles/spry_widgets_design.html

How to assign each BitNum for each button?

Actually, I am doing a interface to control variable gain amplifier through a DAQ namely PMD-1208FS(Measurement Computing Product). But, the interface is not really desired. This is because before I want to click a button, I need to set it's BitNum and then it can send 5V signal to the hardware. Ideally, I want click a button and straight forward send a signal. Do you have idea of this?T
I have attached my interface and labeled each BitNum for each button The BitNum that I want to use is from 0-12. Hope your all guy can help me or guide me to solve this problem. Appreciate your reply and thank you very much.
Cheers,
Furman
Attachments:
My Interface 2vi.vi ‏62 KB

After being blinded by the colors on your diagram (It is very difficult to see a blue wire on a blue background and a green wire on a cyan background! ), I think what you want to do is call the DBitOut with certain parameters whenever one of the booleans has been changed. The attached modification sketch shows one possibility (LabVIEW 7.1), but the details would need to be worked out once it becomes more clear what you actually want to do. (You probably would also need to initialize the shift register with the proper values).
Personally, I would stay away from the stacked sequence. It is completely unecessary because there is data dependency. Also bright colors have no use on the diagram, focus on the code first!
LabVIEW Champion . Do more with less code and in less time .
Attachments:
MyInterface2vi.vi ‏61 KB

Providing image for Standard Buttons on Application Forms

I've seen some postings on changing the standard buttons used in forms. Does anyone know if this has changed at all in Release 2? I want to put my own image for a button instead of the standard gray button and before doing the workarounds recommended, I want to know if this has been addressed in the new release.
Thanks.

I am afraid, the new release does not include changes where you can replace buttons with images.

Open several PDFs in the same Reader window using tabs for each document

How do I open several PDFs in the same Reader window using tabs for each document? I'm using Reader 11.0.03 and Windows 7.

That would be a nice feature! Suggest it at https://www.adobe.com/cfusion/mmform/index.cfm?name=wishform - hopefully it will make it into Reader XII.

How to change background image for each individual page in a template?

I've been working for hours to try to figure out how to change the background image for each individual page in a template. I have tried making a div in the body and adding a CSS and setting a background picture. Unfortunately even after I made it editable all templated webpages changed. I tried looking at different forum results which didn't really help me out. http://forums.adobe.com/message/2670005#2670005#2670005. I've also tried embeding a CSS style on the webpage instead of the external CSS which again didn't work. I'm not sure where to go from here. Is there a good video that explains this clearly. Please help. Thanks.

Adjust inline styles to suit your needs.
<li><a tabindex="-1" href="giving/index.html" class="MenuBarItemSubmenu" style="background:none; color:#FFF; background: #000;">GIVING</a>
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Is there any way to use a For Each Loop for each property of an User Defined Type?

Is there any way to use a For Each Loop for each property of an User Defined Type? That would be very handy!
Jorge Barbi Martins ([email protected])

Alas, no, not in VBA.
Regards, Hans Vogelaar (http://www.eileenslounge.com)

Associating a certain "useful life" for each "Asset Class" ?

Hi All
Could anyone tell me how to associate a certain "useful life" for each "Asset Class" ?
Which's customizing navigation?
Thanks
Gandalf

Hi Try this..
If you go to IMG (Transaction SPRO) :-
-> Financial Accounting
-> Asset Accounting
-> Master Data
-> Screen Layout
-> Define Screen Layout for Asset Depreciation Areas
-> ScrnLayout XXXX
-> Field group rules
Here, you will find whether column 'Class' is activated -> it should be activated
Hope it helps
Zub

How to parse RSS Feed - Different URL for each button

I'm making an app with AS3 and I want to be able to load a different RSS Feed when the user clicks on each button. This is the code I have so far, has anyone any idea how I can modify my code to do this?
here's my code so far:
//IMPORT CLASSES
import fl.controls.List;
import flash.net.URLLoader;
import flash.events.Event;
import flash.net.URLRequest;
cGOSSIP.addEventListener(MouseEvent.CLICK, doClick);
function doClick (e:MouseEvent):void
cGOSSIP.gotoAndStop ("GOSSIP");
wNEWS.addEventListener(MouseEvent.CLICK, doClick2);
function doClick2 (e: MouseEvent):void
          wNEWS.gotoAndStop ("WORLD NEWS");
eNEWS.addEventListener(MouseEvent.CLICK, doClick3);
function doClick3 (e: MouseEvent):void
          eNEWS.gotoAndStop ("ENT NEWS");
fbNEWS.addEventListener(MouseEvent.CLICK, doClick4);
function doClick4 (e: MouseEvent):void
          fbNEWS.gotoAndStop ("FB NEWS");
//NEWSLIST FORMATTING
var newsListTf:TextFormat = new TextFormat();
newsListTf.font = "Verdana";
newsListTf.color = 0xFFFFFF;
newsListTf.size = 18;
newsListTf.align = "left";
newsList.setRendererStyle("textFormat", newsListTf);
newsList.rowHeight = 100;
newsList.allowMultipleSelection = false;
//newsList.wordWrap = true;
//NEWSDISPLAY TEXT AREA FORMATTING
var rssStoryTf:TextFormat = new TextFormat();
rssStoryTf.font = "Verdana";
rssStoryTf.color = 0x6699CC;
rssStoryTf.size = 22;
rssStoryTf.align = "left";
rssStory.setStyle("textFormat", rssStoryTf);
//READMORE BUTTON FORMATTING
var buttonTf:TextFormat = new TextFormat();
buttonTf.font = "Verdana";
buttonTf.color = 0xFFFFFF;
buttonTf.size = 22;
btn_ReadMore.setStyle("textFormat", buttonTf);
//RSS FEED
var rssLoader:URLLoader = new URLLoader();
var rssURL:URLRequest = new URLRequest
("http://rssfeeds.tv.adobe.com/adobe-higher-education-solutions.xml");
rssLoader.addEventListener(Event.COMPLETE, rssLoaded);
newsList.addEventListener(Event.CHANGE, selectRssStory);
btn_ReadMore.addEventListener(MouseEvent.CLICK, goToURL);
rssLoader.load(rssURL);
var newsXML:XML = new XML();
var currentStoryURL:URLRequest = new URLRequest();
newsXML.ignoreWhitespace = true;
function rssLoaded(evt:Event):void
newsXML = new XML(rssLoader.data);
//trace(newsXML);
for(var item:String in newsXML.channel.item) {
//newsList.addItem({label: newsXML.channel.item[item].pubDate.substr(0, 16)
//+": " + newsXML.channel.item[item].title } );
newsList.addItem({label: newsXML.channel.item[item].title.substr(0, 40)
+" ..." } );
newsList.selectedIndex = 0;
//FIRST LOAD
currentStoryURL = new URLRequest(newsXML.channel.item[0].link);
rssStory.htmlText = newsXML.channel.item[0].description;
function selectRssStory(evt:Event):void
rssStory.htmlText = newsXML.channel.item[evt.target.selectedIndex ].description;
currentStoryURL = new URLRequest(newsXML.channel.item[evt.target.selectedIndex
].link);
function goToURL(event:MouseEvent):void
navigateToURL(currentStoryURL);

I copied the wrong code, it works and loads the feed but I have a number of buttons in the main menu and I want to be able to load a different rss feed for each button?
Here's the code.
btn_Home.addEventListener(MouseEvent.CLICK, clickHome);
function clickHome(e:MouseEvent):void
          gotoAndStop ("START");
//NEWSLIST FORMATTING
var newsListTf:TextFormat = new TextFormat();
newsListTf.font = "Verdana";
newsListTf.color = 339999;
newsListTf.size = 18;
newsListTf.align = "left";
newsList.setRendererStyle("textFormat", newsListTf);
newsList.rowHeight = 100;
newsList.allowMultipleSelection = false;
//newsList.wordWrap = true;
//NEWSDISPLAY TEXT AREA FORMATTING
var rssStoryTf:TextFormat = new TextFormat();
rssStoryTf.font = "Verdana";
rssStoryTf.color = 0x6699CC;
rssStoryTf.size = 22;
rssStoryTf.align = "left";
rssStory.setStyle("textFormat", rssStoryTf);
//READMORE BUTTON FORMATTING
var buttonTf:TextFormat = new TextFormat();
buttonTf.font = "Verdana";
buttonTf.color = 0xFFFFFF;
buttonTf.size = 22
btn_ReadMore.setStyle("textFormat", buttonTf);
//RSS FEED
var rssLoader:URLLoader = new URLLoader();
var rssURL:URLRequest = new URLRequest
("http://www.tmz.com/rss.xml");
rssLoader.addEventListener(Event.COMPLETE, rssLoaded);
newsList.addEventListener(Event.CHANGE, selectRssStory);
btn_ReadMore.addEventListener(MouseEvent.CLICK, goToURL);
rssLoader.load(rssURL);
var newsXML:XML = new XML();
var currentStoryURL:URLRequest = new URLRequest();
newsXML.ignoreWhitespace = true;
function rssLoaded(evt:Event):void
newsXML = new XML(rssLoader.data);
//trace(newsXML);
for(var item:String in newsXML.channel.item) {
//newsList.addItem({label: newsXML.channel.item[item].pubDate.substr(0, 16)
//+": " + newsXML.channel.item[item].title } );
newsList.addItem({label: newsXML.channel.item[item].title.substr(0, 40)
+" ..." } );
newsList.selectedIndex = 0;
//FIRST LOAD
currentStoryURL = new URLRequest(newsXML.channel.item[0].link);
rssStory.htmlText = newsXML.channel.item[0].description;
function selectRssStory(evt:Event):void
rssStory.htmlText = newsXML.channel.item[evt.target.selectedIndex ].description;
currentStoryURL = new URLRequest(newsXML.channel.item[evt.target.selectedIndex
].link);
function goToURL(event:MouseEvent):void
navigateToURL(currentStoryURL);

Using a background image for the buttons in spry menu

Hi All,
Going nuts here.
I'm using the vertical spry menu widget w DW CS3 and trying
to alter the css style sheet, so that I can use a li class for each
of the 14 links on this page, with an upstate and a hover state
only. (the focus, and hover while down will be the same as the
others, to keep it simple and not too distracting)
The page is here that I will be replacing the entire
background image in sidebar1 and sidebar2 with a custom spry menu
with the 14 li classes for 2 seperate menus:
http://audibleimagesav.com/blank_doc.html
Has anyone used a background image in place of just using
bkgrd colors and borders for the spry menu ?
I am aware of the attributes that the help docs suggest that
need to be altered as listed here :
http://livedocs.adobe.com/en_US/Spry/1.4/help.html?content=WS0BB04E11-1BE3-4a67-BC94-BE7DA 93A0159.html
I have been working on just an experimental page, that is now
hacked up, however if you want to see that it is here with only the
first list item coded:
http://audibleimagesav.com/site%20theme%20ideas/sprymenu_exp.html
The spry css menu widget for that page is here:
http://audibleimagesav.com/SpryAssets/SpryMenuBarVertical.css
So in short, has anyone done a bkgrd image for the main menu
(not submenu) in a spry widget?
Thanks in advance.
Art
Art Hansen
Web Design & Marketing
http://www.innova-techsolutions.com
321.750.3852 - Cocoa Beach, Florida, USA

http://meyerweb.com/eric/css/edge/popups/demo2.html
Maybe

How to create a background image for each item in a List object

Hello.
I am trying to create a background image that displays whenever a user posts something to a list. For example when a user posts text it would appear in a list. The new item in the list would contain a specific background image with the users text appearing on top of the background image. I do not want a background image for the entire list, rather each item within the list.
I am not sure how clear this is so I added an image below. When a user enters text in and clicks the "post-it" button their text would appear below with the sticky note background.
I am not sure which list type would be best for this problem or how to create insert the image, so I am open to suggestions.
Thank you for your help. Any advice or guidance will be greatly appreciated!

Hi
the easiest way would be with itemRenderer.
You have to do two things:
1. In your list declaration use a item renderer: <mx:List itemRenderer="myRenderer"/>
2. create a flex component myRenderer that will be the single item. This can be a canvas with a background image and a text field on it.
When you add a new item to the list, a new myRenderer item will be created and the data property will be passed to it. So you have to put "data" in your textField.
If you need more help try looking at Tour de Flex samples, they're pretty easy.
Andrei

Default poster image for each exported video

Anyone know of a way to change the default "poster image" of each video that is exported to the MobileMe web gallery? The default icons that show up for each movie in my gallery aren't very good and I'd like to change to a different frame if possible. I know you can do this easily for photo albums by setting the key photo but cant find a similar way for videos. Maybe there is a setting in iMovie that I'm missing?

So I wasn't going mad after all - Brightcove's player default is with greyed out image
"the overlay button is standard for all our HTML5 Players and this cannot be changed through the publishing code or the player settings. the main reason for this being there is to indicate the user that it is a clickable image that loads the video. If you wish to replace that image, you would have to implement some custom code that would display the image of your choice above The Brightcove player and add some action to replace the image with the video when it is being clicked. An example of this you can find here:
http://distractedtype.com/test/replaceImage.html
It uses some javascript to make one div with the BC publishing code visible, when the image has been clicked."

Using Images for each button

Similar Messages

Maybe you are looking for