Tv playing video


I have an idea for an image of an old television set playing a video to promote a 60s tribute band.

The idea also being that the buttons when clicked open up modal popups with different details - about band, tour, music, photos etc.

How I do this and the best way however, is where I am stuck.
One idea would be to slice the image into sections, that would then cover a grid with the screen in the middle and each button in it’s own “spot” of the grid allowing a invisible button to be added over the button…(if that makes sense).

Does anyone have any other/better suggestions on how I could do this?


Can nobody help? - I see this has been read a lot but nobody willing to suggest a way to do this?

Pete, saw this some time ago, can you add pictures of what you want to see.
Off the top of my head I would use hide/show.
but1 would show image 1, hide image 2, hide image 3
but2 " image 2, hide image 1, hide image 3
and so on.

Hi - thanks for replying.

I am not sure I understand what you mean?

The TV Screen (where the programs are shown) is already “invisible” - so what I wanted to do is in that space add a video player (I’ve worked that out) - the buttons on the right side would then be a “nav bar” - where you click a button to open up modal pages showing other items.

Again I can probably work that much out - the Civilisation example from Sarkis has pretty much what I want to do and I can use that.

What I am not sure off is the best way to display the TV on the page.
Should I use Grid (as I suggested with each section sliced and then added to the Grid via Rows/Columns) - for example my grid would look roughly like


Where each part of the TV are different images - apart from the actual screen which will be the video player.

or is there a better way?

Hope that makes more sense.
Thanks anyway