Champions League/European Cup interactive football map
Hovering on the green dot reveals the Champions League/European Cup winner, the year they won and the full match details. Clicking on the team badge will take you to that teams website.
- Nottingham Forest
- Liverpool
- Manchester United
- Aston Villa
- Manchester United
- Olympique Marseille
- Borussia Dortmund
- Hamburg SV
- Bayern Munich
- AC Milan
- Inter Milan
- Juventus
- AFC Ajax
- Feijenoord
- PSV
- FC Porto
- SL Benfica
- Steaua Bucharest
- Celtic
- Red Star Belgrade
- FC Barcelona
- Real Madrid
Champions League Cup finals by year
- Year
- 2016
- 2015
- 2014
- 2013
- 2012
- 2011
- 2010
- 2009
- 2008
- 2007
- 2006
- 2005
- 2004
- 2003
- 2002
- 2001
- 2000
- 1999
- 1998
- 1997
- 1996
- 1995
- 1994
- 1993
- Real Madrid *
- FC Barcelona
- Real Madrid *
- Bayern Munich
- Chelsea *
- FC Barcelona
- Inter Milan
- FC Barcelona
- Manchester United *
- AC Milan
- FC Barcelona
- Liverpool *
- FC Porto
- AC Milan *
- Real Madrid
- Bayern Munich *
- Real Madrid
- Manchester United
- Real Madrid
- Borussia Dortmund
- Juventus *
- AFC Ajax
- AC Milan
- Olympique Marseille
- Score
- 1-1
- 3-1
- 4-1
- 2-1
- 1-1
- 3-1
- 2-0
- 2-0
- 1-1
- 2-1
- 2-1
- 3-3
- 3-0
- 0-0
- 2-1
- 1-1
- 3-0
- 2-1
- 1-0
- 3-1
- 1-1
- 1-0
- 4-0
- 1-0
- Atlético Madrid
- Juventus
- Atlético Madrid
- Borussia Dortmund
- Bayern Munich
- Manchester United
- Bayern Munich
- Manchester United
- Chelsea
- Liverpool
- Arsenal
- AC Milan
- AS Monaco
- Juventus
- Bayer 04 Leverkusen
- Valencia CF
- Valencia CF
- Bayern Munich
- Juventus
- Juventus
- AFC Ajax
- AC Milan
- FC Barcelona
- AC Milan
- Pens
- 5-3
- 4-3
- 6-5
- 3-2
- 3-2
- 5-4
- 4-2
- Venue
- San Siro, Milan
- Olympiastadion, Berlin
- Estádio da Luz, Lisbon
- Wembley Stadium, London
- Allianz Arena, Munich
- Wembley Stadium, London
- Santiago Bernabéu, Madrid
- Stadio Olimpico, Rome
- Luzhniki Stadium, Moscow
- Olympic Stadium, Athens
- Stade de France, Paris
- Atatürk Olympic Stadium, Istanbul
- Arena AufSchalke, Gelsenkirchen
- Old Trafford, Manchester
- Hampden Park, Glasgow
- San Siro, Milan
- Stade de France, Paris
- Camp Nou, Barcelona
- Amsterdam ArenA, Amsterdam
- Olympiastadion, Munich
- Stadio Olimpico, Rome
- Ernst Happel Stadium, Vienna
- Olympic Stadium Spiros Louis, Athens
- Olympiastadion, Munich
* after extra time
European Cup finals by year
- Year
- 1992
- 1991
- 1990
- 1989
- 1988
- 1987
- 1986
- 1985
- 1984
- 1983
- 1982
- 1981
- 1980
- 1979
- 1978
- 1977
- 1976
- 1975
- 1974
- ‡
- 1973
- 1972
- 1971
- 1970
- 1969
- 1968
- 1967
- 1966
- 1965
- 1964
- 1963
- 1962
- 1961
- 1960
- 1959
- 1958
- 1957
- 1956
- FC Barcelona *
- Red Star Belgrade *
- AC Milan
- AC Milan
- PSV *
- FC Porto
- Steaua Bucharest *
- Juventus
- Liverpool *
- Hamburg SV
- Aston Villa
- Liverpool
- Nottingham Forest
- Nottingham Forest
- Liverpool
- Liverpool
- Bayern Munich
- Bayern Munich
- Bayern Munich *
- Bayern Munich
- AFC Ajax
- AFC Ajax
- AFC Ajax
- Feyenoord *
- AC Milan
- Manchester United *
- Celtic
- Real Madrid
- Inter Milan
- Inter Milan
- AC Milan
- SL Benfica
- SL Benfica
- Real Madrid
- Real Madrid
- Real Madrid *
- Real Madrid
- Real Madrid
- Score
- 1-0
- 0-0
- 1-0
- 4-0
- 0-0
- 2-0
- 0-0
- 1-0
- 1-1
- 1-0
- 1-0
- 1-0
- 1-0
- 1-0
- 1-0
- 3-1
- 1-0
- 2-0
- 1-1
- 4-0
- 1-0
- 2-0
- 2-0
- 2-1
- 4-1
- 4-1
- 2-1
- 2-1
- 1-0
- 3-1
- 2-1
- 5-3
- 3-2
- 7-3
- 2-0
- 3-2
- 2-0
- 4-3
- Sampdoria
- Olympique Marseille
- SL Benfica
- Steaua Bucharest
- SL Benfica
- Bayern Munich
- FC Barcelona
- Liverpool
- AS Roma
- Juventus
- Bayern Munich
- Real Madrid
- Hamburg SV
- Malmö FF
- Club Brugge KV
- Borussia Mönchengladbach
- Saint Étienne
- Leeds United
- Atlético Madrid
- Atlético Madrid
- Juventus
- Inter Milan
- Panathinaikos
- Celtic
- AFC Ajax
- SL Benfica
- Inter Milan
- FK Partizan
- SL Benfica
- Real Madrid
- SL Benfica
- Real Madrid
- FC Barcelona
- Eintracht Frankfurt
- Stade de Reims
- AC Milan
- ACF Fiorentina
- Stade de Reims
- Pens
- 5-3
- 6-5
- 2-0
- 5-4
- Venue
- Wembley Stadium, London
- Stadio San Nicola, Bari
- Prater Stadium, Vienna
- Camp Nou, Barcelona
- Neckarstadion, Stuttgart
- Prater Stadium, Vienna
- Sánchez Pizjuán, Sevilla
- Heysel Stadium, Brussels
- Stadio Olimpico, Rome
- Olympic Stadium Spiros Louis, Athens
- De Kuip, Rotterdam
- Parc des Princes, Paris
- Santiago Bernabéu, Madrid
- Olympiastadion, Munich
- Wembley Stadium, London
- Stadio Olimpico, Rome
- Hampden Park, Glasgow
- Parc des Princes, Paris
- Heysel Stadium, Brussels
- Heysel Stadium, Brussels
- Crvena Zvezda Stadium, Belgrade
- De Kuip, Rotterdam
- Wembley Stadium, London
- San Siro, Milan
- Santiago Bernabéu, Madrid
- Wembley Stadium, London
- Estádio Nacional, Lisbon
- Heysel Stadium, Brussels
- San Siro, Milan
- Prater Stadium, Vienna
- Wembley Stadium, London
- Olympisch Stadion, Amsterdam
- Wankdorf Stadium, Berne
- Hampden Park, Glasgow
- Neckarstadion, Stuttgart
- Heysel Stadium, Brussels
- Santiago Bernabéu, Madrid
- Parc des Princes, Paris
* after extra time
‡ replayed game
The image
The map and the insignia on hover is one image. The insignia are below the visible area of the image and are referenced in the css file.
The css
I found the image rollover map while browsing Tanfa CSS Design, a css related website, our map is a version of the CSS Image Rollover Map ~ Europe. I added opacity on the flags in development, because practically speaking, it helped to see through the flags when I was adjusting the css positioning.
The css for this map was developed from another tutorial on this site. There is a more detailed description of how this works at the rollover map page. It includes the image rollover, opacity and fading tooltip styling.
The javascript
I added the Sweet Titles fading tooltips from Dustin Diaz, with a few tweaks to stop the tooltips appearing everywhere on the page. Dustin Diaz has a great site for javascript, css and web standards. To quote his words 'Web Standards with Imagination'.