How do I add a 'hotspot' area to my player in BEML? [ Edited ]

[funkyE]

Hi,

I have a BEML player with a chromeless video player component in it. Inside the player template, to the right of the video playback area, I have a Canvas area with a background image. I want to hotspot areas within the image so that when users mouse over certain areas of the background image, they can click and go to different urls.
I thought I could do this by having a Canvas area with background image set, and then place <image> components using x/y coordinates over top, specifying no source image file but just url attributes to get the right clickthrus set up. It doesn't seem to work.
Here's an example (can't give you my real BEML but the structure is what's below):

<Runtime>
  <Theme name="Flat" style="Light"/>
  <Layout id="application" width="630" height="222" boxType="vbox" padding="0" gutter="0">
    <HBox>
      <Canvas width="359">
        <ChromelessVideoPlayer id="videoPlayer"/>
      </Canvas>
      <Canvas width="271" backgroundImage="http;//someimage.com">
        <Image width="260" height="40" tooltip="can you see me?" url="http://someurl.com" x="15" y="120"/>
      </Canvas>
    </HBox>
  </Layout>
</Runtime>

 This BEML doesn't work, I mean the Image area and the clickthru tooltip and url don't appear in the player. Any suggestions? I tried using alpha, depth too, but nothing worked.

thanks for the help!

[BC-Mikey · Accepted solution]

Hello,

The only element you are missing is the 'source' attribute' of your <Image> tag. You are currently setting a URL to click-through to, however, there is still no actual image file populating the <Image> area for which the user to click. In the case of your template below where you want to create an Image Map, you will want the 'source' attribute of your Image tag to point to a transparent GIF or PNG file so it does not overlap the backgroundImage you are setting to the Canvas. I have made an example below:

http://link.brightcove.com/services/player/bcpid72101682001

Here is the BEML used to create the above template:

<Runtime>
  <Theme name="Flat" style="Light"/>
  <Layout id="application" width="630" height="222" boxType="vbox" padding="0" gutter="0">
    <HBox>
      <Canvas width="359">
        <ChromelessVideoPlayer id="videoPlayer"/>
      </Canvas>
      <Canvas width="271" backgroundImage="http://www.michaelcarreiro.com/uploaded_images/bestactor_bg.jpg">
        <Image width="73" height="73" tooltip="George Clooney" source="http://www.michaelcarreiro.com/uploaded_images/73pxbox.png" url="http://www.imdb.com/name/nm0000123/" x="15" y="29"/>
        <Image width="73" height="73" tooltip="Jeremy Renner" source="http://www.michaelcarreiro.com/uploaded_images/73pxbox.png" url="http://www.imdb.com/name/nm0719637/" x="101" y="29"/>
        <Image width="73" height="73" tooltip="Jeff Bridges" source="http://www.michaelcarreiro.com/uploaded_images/73pxbox.png" url="http://www.imdb.com/name/nm0000313/" x="187" y="29"/>
        <Image width="73" height="73" tooltip="Colin Firth" source="http://www.michaelcarreiro.com/uploaded_images/73pxbox.png" url="http://www.imdb.com/name/nm0000147/" x="51" y="124"/>
        <Image width="73" height="73" tooltip="Morgan Freeman" source="http://www.michaelcarreiro.com/uploaded_images/73pxbox.png" url="http://www.imdb.com/name/nm0000151/" x="149" y="124"/>
      </Canvas>
    </HBox>
  </Layout>
</Runtime> 

Thank You,

[funkyE]

hi Mikey,

Thanks for the response! you're the  best! how do you find time to answer all these questions?

I wish I didn't have to upload a 1x1 blank pixel and could just do hotspotting without the source specified. I didn't see source marked as required in the BEML docs so just assumed this would work.

thanks again,

funkyE

[BC-Mikey]

Hello again and thanks for the great feedback! :)

I can see why you would not think to include a transparent image to overlay as a hotspot. I will pass your feedback up to our Product Managers for a potential feature enhancement that would work more in line with how you would expect. That is, without a referencing a file inside of the tag.

Thanks again,