Differences

This shows you the differences between two versions of the page.

Link to this comparison view

onv:zandbox [2015/10/02 18:27]
comsr [HTML]
onv:zandbox [2016/10/04 14:00]
Line 1: Line 1:
-====== HTML ====== 
---> Show/hide pictures# 
-<​html>​ 
-<​style>​ 
-/​*------------------------------------*\ 
-  csswizardry ANNOTATIONS 
-\*------------------------------------*/​ 
-/* 
-Apply a class of annotated to any figure you would like, well, annotated! 
-*/ 
-.annotated{ 
-  position:​relative;​ 
-  /​*display:​inline-block;​ If you do not need to support IE7 and below uncomment this line and remove the inline width and height styles on the <​figure>​ in your markup. */ 
-} 
-} 
-.annotated img{ /* Set this to stop white-space appearing under the image. */ 
-display:​block;​ 
-} 
-.annotated b{  Hide the figcaption’s title. */ 
-position:​absolute;​ 
-left:​-99999px;​ 
-} 
-.annotated ul{ /* Set up the canvas for the annotations to sit on. */ 
-  list-style:​none;​ 
-  position:​absolute; ​ 
-  top:0; 
-  right:0; 
-  bottom:0; 
-  left:0; 
-} 
-.annotated li{ 
-  display:​block;​ 
-  padding:0 2px; 
-  /* Give them a width and a line-height suitable for your kind of images. I chose 50px. */ 
-  width:35px; /* 40px + 5px padding-right ​ + 5px padding-left = 50px */ 
-  line-height:​33px;​ 
-  position:​absolute;​ 
-  text-indent:​-99999px;​ /* Hide the text off-screen. */ 
-  white-space:​nowrap;​ /* Stop the annotations breaking onto several lines. */ 
-  cursor:​default;​ 
-} 
-.annotated li{ /*:hover Show us where the annotations are. When we hover the figure */ 
-border:1px solid #FFFF00; 
-} 
-.annotated li:hover { /* Show the text on hover. */ 
-font-weight:​ 600; 
-  background:#​FFFFCC;​ 
-  background:​rgba(255,​255,​205,​0.80);​ 
-  z-index:2; /* Bring current annotation above others. */ 
-  /* Remove the width and text-indent to show us our text! */ 
-  width:auto; 
-  text-indent:​0;​ 
-  ​ 
-  /* A bit o’ progressive enhancement */ 
-  -webkit-box-shadow:​0 0 5px rgba(0,​0,​0,​0.25);​ 
-     ​-moz-box-shadow:​0 0 5px rgba(0,​0,​0,​0.25);​ 
-         ​box-shadow:​0 0 5px rgba(0,​0,​0,​0.25);​ 
-} 
-</​style>​ 
  
-<figure class="​annotated">​ 
-<img src="​http://​wiki.animeigo.com/​ONVOE/​Panoramas-1200/​godzilla.png"​ alt="​Cosplaying people at Otakuland"​ title="​Cosplaying at Otakuland">​ 
-<​figcaption>​ 
-<ul> 
-<!-- Positions of the list-items. These need defining inline. --> 
-<li style="​top:​225px;​ left:​5px;"><​a href="​https://​en.wikipedia.org/​wiki/​Mobile_Suit_Gundam_F91#​Voice_actors">​Iron Mask</​a></​li>​ 
-<li style="​top:​150px;​ left:​50px;"><​a href="​https://​en.wikipedia.org/​wiki/​Destroy_All_Monsters">​Moonlight SY-3</​a></​li>​ 
-<li style="​top:​100px;​ left:​320px;"><​a href="​https://​en.wikipedia.org/​wiki/​Royal_Space_Force:​_The_Wings_of_Honn%C3%AAamise">​Soyuz</​a></​li>​ 
-<li style="​top:​280px;​ left:​75px;"><​a href="​https://​en.wikipedia.org/​wiki/​List_of_Nadia:​_The_Secret_of_Blue_Water_characters#​Nadia">​Nadia La Arwall</​a></​li>​ 
-<li style="​top:​250px;​ left:​140px;"><​a href="​https://​en.wikipedia.org/​wiki/​List_of_Nadia:​_The_Secret_of_Blue_Water_characters#​Jean">​Jean Rocque Raltique</​a></​li>​ 
-<li style="​top:​310px;​ left:​160px;"><​a href="​https://​en.wikipedia.org/​wiki/​Lum_Invader">​Lum Invader</​a></​li>​ 
-<li style="​top:​270px;​ left:​200px;"><​a href="​https://​en.wikipedia.org/​wiki/​Captain_Harlock">​Captain Harlock</​a></​li>​ 
-<li style="​top:​30px;​ left:​210px;"><​a href="​https://​en.wikipedia.org/​wiki/​Godzilla">​Godzilla</​a></​li>​ 
-<li style="​top:​80px;​ left:​270px;"><​a href="​https://​en.wikipedia.org/​wiki/​Mechagodzilla">​Mechagodzilla</​a></​li>​ 
-<li style="​top:​330px;​ left:​255px;"><​a href="​https://​en.wikipedia.org/​wiki/​The_Return_of_Ultraman">​Monster Attack Team</​a></​li>​ 
-<li style="​top:​275px;​ left:​300px;"><​a href="​https://​en.wikipedia.org/​wiki/​Royal_Space_Force:​_The_Wings_of_Honn%C3%AAamise#​Cast">​Shitotsugh Lhadatt</​a></​li>​ 
-<li style="​top:​125px;​ left:​210px;"><​a href="​https://​en.wikipedia.org/​wiki/​Godzilla_vs._Gigan">​Godzilla Tower</​a></​li>​ 
-<li style="​top:​370px;​ left:​370px;"><​a href="​https://​en.wikipedia.org/​wiki/​Genesis_Climber_MOSPEADA">​MOSPEADA Ride Armor</​a></​li>​ 
-<li style="​top:​285px;​ left:​420px;"><​a href="​https://​en.wikipedia.org/​wiki/​Legend_of_Heavenly_Sphere_Shurato#​Characters">​King Shura</​a></​li>​ 
-<li style="​top:​330px;​ left:​430px;"><​a href="​https://​en.wikipedia.org/​wiki/​Silent_M%C3%B6bius">​Chéng Lum</​a></​li>​ 
-<li style="​top:​110px;​ left:​405px;"><​a href="​https://​en.wikipedia.org/​wiki/​Giant_Robo">​Giant Robo</​a></​li>​ 
-<li style="​top:​290px;​ left:​590px;"><​a href="​https://​en.wikipedia.org/​wiki/​Cyborg_009">​Cyborg 009</​a></​li>​ 
-<li style="​top:​40px;​ left:​415px;"><​a href="​https://​en.wikipedia.org/​wiki/​Thunderbirds_machines#​Thunderbird_5">​Thunderbird 5</​a></​li>​ 
-<li style="​top:​260px;​ left:​780px;"><​a href="​https://​en.wikipedia.org/​wiki/​Crusher_Joe#​Characters">​Alfin</​a></​li>​ 
-<li style="​top:​290px;​ left:​900px;"><​a href="​https://​en.wikipedia.org/​wiki/​Galaxy_Express_999#​Characters">​Conductor</​a></​li>​ 
-<li style="​top:​20px;​ left:​890px;"><​a href="​https://​en.wikipedia.org/​wiki/​VF-1_Valkyrie">​VF-1 Valkyrie</​a></​li>​ 
-<li style="​top:​310px;​ left:​955px;"><​a href="​https://​en.wikipedia.org/​wiki/​Nausica%C3%A4_%28character%29">​Nausicaä</​a></​li>​ 
-<li style="​top:​175px;​ left:​1000px;"><​a href="​https://​en.wikipedia.org/​wiki/​List_of_Nausica%C3%A4_of_the_Valley_of_the_Wind_characters#​Ohmu">​Ohmu</​a></​li>​ 
-<li style="​top:​75px;​ left:​1000px;"><​a href="​https://​en.wikipedia.org/​wiki/​Nausica%C3%A4_of_the_Valley_of_the_Wind_%28film%29#​Gliders">​Möwe</​a></​li>​ 
-<li style="​top:​330px;​ left:​1010px;"><​a href="​https://​en.wikipedia.org/​wiki/​Ultraman#​Science_Patrol">​SSSP</​a></​li>​ 
-<li style="​top:​275px;​ left:​1055px;"><​a href="​https://​en.wikipedia.org/​wiki/​Casshan">​Casshan</​a></​li>​ 
-<li style="​top:​310px;​ left:​1085px;"><​a href="​https://​en.wikipedia.org/​wiki/​Science_Ninja_Team_Gatchaman#​Characters">​Ken the Eagle</​a></​li>​ 
-<li style="​top:​300px;​ left:​1120px;"><​a href="​https://​en.wikipedia.org/​wiki/​Kamen_Rider">​Kamen Rider</​a></​li>​ 
-<li style="​top:​125px;​ left:​1130px;"><​a href="​https://​en.wikipedia.org/​wiki/​Getter_Robo">​Saotome Institute</​a></​li>​ 
-</ul> 
-<​i>​Hover over rectangle to show captions.</​i>​ 
-</​figcaption>​ 
-</​figure>​ 
- 
-<figure class="​annotated">​ 
-<img src="​http://​wiki.animeigo.com/​ONVOE/​Panoramas-1200/​sfkit.png"​ alt="​Plastic model kits at apartment"​ title="​Plastic model kits">​ 
-<​figcaption>​ 
-<ul> 
-<!-- Positions of the list-items. These need defining inline. --> 
-<li style="​top:​105px;​ left:​150px;"><​a href="​https://​en.wikipedia.org/​wiki/​Thunderbirds_machines#​Thunderbird_1">​Thunderbird 1</​a></​li>​ 
-<li style="​top:​160px;​ left:​150px;"><​a href="​https://​en.wikipedia.org/​wiki/​Thunderbirds_machines">​Thunderbirds 1, 3 ,4, 5, Mole</​a></​li>​ 
-<li style="​top:​220px;​ left:​150px;"><​a href="​https://​en.wikipedia.org/​wiki/​VF-1_Valkyrie">​VF-1 Valkyrie Fighter</​a></​li>​ 
-<li style="​top:​270px;​ left:​150px;"><​a href="​https://​en.wikipedia.org/​wiki/​VF-1_Valkyrie">​VF-1 Valkyrie Hikaru Special</​a></​li>​ 
-<li style="​top:​335px;​ left:​125px;"><​a href="​https://​en.wikipedia.org/​wiki/​VF-1_Valkyrie">​VF-1A Super Valkyrie Hikaru Special</​a></​li>​ 
-<li style="​top:​400px;​ left:​115px;"><​a href="​https://​en.wikipedia.org/​wiki/​VF-1_Valkyrie">​VF-1A Valkyrie Variable Type</​a></​li>​ 
-<li style="​top:​465px;​ left:​125px;"><​a href="​https://​en.wikipedia.org/​wiki/​Gundam_%28mobile_suit%29">​RX-78-2 Gundam</​a></​li>​ 
-<li style="​top:​510px;​ left:​115px;"><​a href="​https://​en.wikipedia.org/​wiki/​UFO_%28TV_series%29">​Skydiver</​a></​li>​ 
-<li style="​top:​450px;​ left:​265px;"><​a href="​https://​en.wikipedia.org/​wiki/​Zero-X">​Zero-X</​li>​ 
-<li style="​top:​125px;​ left:​450px;"><​a href="​https://​en.wikipedia.org/​wiki/​Genma_Taisen">​Vega</​a></​li>​ 
-<li style="​top:​215px;​ left:​375px;"><​a href="​https://​en.wikipedia.org/​wiki/​Magical_Princess_Minky_Momo">​Magical Princess Minky Momo</​a></​li>​ 
-<li style="​top:​260px;​ left:​375px;"><​a href="​https://​en.wikipedia.org/​wiki/​Invincible_Super_Man_Zambot_3">​Invincible Super Man Zambot 3</​a></​li>​ 
-<li style="​top:​310px;​ left:​375px;"><​a href="​https://​en.wikipedia.org/​wiki/​Invincible_Robo_Trider_G7">​Invincible Robo Trider G7</​a></​li>​ 
-<li style="​top:​355px;​ left:​375px;"><​a href="​https://​en.wikipedia.org/​wiki/​Space_Warrior_Baldios">​Space Warrior Baldios</​a></​li>​ 
-<li style="​top:​400px;​ left:​375px;"><​a href="​https://​en.wikipedia.org/​wiki/​Beast_King_GoLion">​Beast King GoLion</​a></​li>​ 
-<li style="​top:​450px;​ left:​375px;"><​a href="​https://​en.wikipedia.org/​wiki/​Armored_Fleet_Dairugger_XV">​Armored Fleet Dairugger XV</​a></​li>​ 
-<li style="​top:​500px;​ left:​400px;"><​a href="​https://​en.wikipedia.org/​wiki/​Genesis_Climber_MOSPEADA">​AFC-01 Legioss</​a></​li>​ 
-<li style="​top:​165px;​ left:​575px;"><​a href="​https://​en.wikipedia.org/​wiki/​%C5%8Cgon_Bat">​Golden Bat</​a></​li>​ 
-<li style="​top:​225px;​ left:​575px;"><​a href="​https://​en.wikipedia.org/​wiki/​Tetsujin_28-go">​Tetsujin 28-gō</​a></​li>​ 
-<li style="​top:​285px;​ left:​575px;"><​a href="​https://​en.wikipedia.org/​wiki/​Space_Battleship_Yamato">​Space Battleship Yamato</​a></​li>​ 
-<li style="​top:​340px;​ left:​575px;"><​a href="​https://​en.wikipedia.org/​wiki/​Space_Battleship_Yamato">​Cosmo Zero</​a></​li>​ 
-<li style="​top:​390px;​ left:​575px;"><​a href="​https://​en.wikipedia.org/​wiki/​Space_Battleship_Yamato">​Black Tiger</​a></​li>​ 
-<li style="​top:​445px;​ left:​575px;"><​a href="​https://​en.wikipedia.org/​wiki/​Space_Battleship_Yamato">​Cosmo Tiger II</​a></​li>​ 
-<li style="​top:​150px;​ left:​815px;"><​a href="​https://​en.wikipedia.org/​wiki/​Japanese_school_uniform#​Sailor_fuku">​Sailor fuku</​a></​li>​ 
-</ul> 
-<​i>​Hover over rectangle to show captions.</​i>​ 
-</​figcaption>​ 
-</​figure>​ 
- 
- 
- 
-<figure class="​annotated">​ 
-<img src="​http://​wiki.animeigo.com/​ONVOE/​Panoramas-1200/​harlock.png"​ alt="​People cosplaying at school"​ title="​School cosplay">​ 
-<​figcaption>​ 
-<ul> 
-<!-- Positions of the list-items. These need defining inline. csswizardry --> 
-<li style="​top:​100px;​ left:​20px;"><​a href="​https://​en.wikipedia.org/​wiki/​Daisuke_Jigen">​Jigen Daisuke</​a></​li>​ 
-<li style="​top:​200px;​ left:​80px;"><​a href="​https://​en.wikipedia.org/​wiki/​Goemon_Ishikawa_XIII">​Ishikawa Goemon XIII</​a></​li>​ 
-<li style="​top:​100px;​ left:​165px;"><​a href="​https://​en.wikipedia.org/​wiki/​Ars%C3%A8ne_Lupin_III">​Arsène Lupin III</​a></​li>​ 
-<li style="​top:​200px;​ left:​283px;"><​a href="​https://​en.wikipedia.org/​wiki/​The_Castle_of_Cagliostro">​Clarisse d'​Cagliostro</​a></​li>​ 
-<li style="​top:​25px;​ left:​475px;"><​a href="​https://​en.wikipedia.org/​wiki/​Captain_Harlock">​Captain Harlock</​a></​li>​ 
-<li style="​top:​190px;​ left:​375px;"><​a href="​https://​en.wikipedia.org/​wiki/​Space_Pirate_Captain_Harlock#​Crew_of_the_Arcadia">​Miime</​a></​li>​ 
-<li style="​top:​130px;​ left:​620px;"><​a href="​https://​en.wikipedia.org/​wiki/​Galaxy_Express_999#​Characters">​Maetel</​a></​li>​ 
-<li style="​top:​220px;​ left:​695px;"><​a href="​https://​en.wikipedia.org/​wiki/​Arale_Norimaki">​Norimaki Arale</​a></​li>​ 
-<li style="​top:​130px;​ left:​755px;"><​a href="​https://​en.wikipedia.org/​wiki/​List_of_Mobile_Suit_Gundam_characters#​Lalah_Sune">​Lalah Sune</​a></​li>​ 
-<li style="​top:​50px;​ left:​735px;"><​a href="​https://​en.wikipedia.org/​wiki/​Haro_%28character%29">​Haro</​a></​li>​ 
-<li style="​top:​125px;​ left:​840px;"><​a href="​https://​en.wikipedia.org/​wiki/​List_of_Mobile_Suit_Gundam_characters#​Bright_Noa">​Bright Noa</​a></​li>​ 
-<li style="​top:​100px;​ left:​950px;"><​a href="​https://​en.wikipedia.org/​wiki/​Cyborg_009">​Cyborg 009</​a></​li>​ 
-<li style="​top:​30px;​ left:​1060px;"><​a href="​https://​en.wikipedia.org/​wiki/​List_of_Space_Battleship_Yamato_characters#​Yamato_Crew">​Kodai Susumu</​a></​li>​ 
-</ul> 
-<​i>​Hover over rectangle to show captions.</​i>​ 
-</​figcaption>​ 
-</​figure>​ 
- 
- 
- 
-<figure class="​annotated">​ 
-<img src="​http://​wiki.animeigo.com/​ONVOE/​Panoramas-1200/​arcade.png"​ alt="​Otakuland in Kubo's imagination"​ title="​Imaginary Otakuland">​ 
-<​figcaption>​ 
-<ul> 
-<!-- Positions of the list-items. These need defining inline. --> 
-<li style="​top:​60px;​ left:​280px;"><​a href="​https://​en.wikipedia.org/​wiki/​Mazinger#​Jet_Scrander_.2F_Jet_Scrambler">​Mazinger Z Jet Scrander</​a></​li>​ 
-<li style="​top:​200px;​ left:​55px;"><​a href="​https://​en.wikipedia.org/​wiki/​Cyborg_009">​Cyborg 009</​a></​li>​ 
-<li style="​top:​155px;​ left:​615px;"><​a href="​https://​en.wikipedia.org/​wiki/​Robby_the_Robot">​Robby the Robot</​a></​li>​ 
-<li style="​top:​85px;​ left:​510px;"><​a href="​https://​en.wikipedia.org/​wiki/​Ambassador_Magma">​Ambassador Magma</​a></​li>​ 
-<li style="​top:​80px;​ left:​30px;"><​a href="​https://​en.wikipedia.org/​wiki/​Colonel_Sanders">​Colonel Sanders</​a></​li>​ 
-<li style="​top:​265px;​ left:​1px;"><​a href="​https://​en.wikipedia.org/​wiki/​This_Island_Earth">​Metaluna Mutant</​a></​li>​ 
-<li style="​top:​260px;​ left:​45px;"><​a href="​https://​en.wikipedia.org/​wiki/​Little_Pollon">​Pollon</​a></​li>​ 
-<li style="​top:​145px;​ left:​95px;"><​a href="​https://​en.wikipedia.org/​wiki/​Hime-chan'​s_Ribbon">​Hime-chan</​a></​li>​ 
-<li style="​top:​175px;​ left:​75px;"><​a href="​https://​en.wikipedia.org/​wiki/​Space_Pirate_Captain_Harlock#​Supporting_characters">​Ōyama Tochirō</​a></​li>​ 
-<li style="​top:​150px;​ left:​105px;"><​a href="​https://​en.wikipedia.org/​wiki/​Homer_Simpson">​Homer Simpson</​a></​li>​ 
-<li style="​top:​135px;​ left:​125px;"><​a href="​https://​en.wikipedia.org/​wiki/​Galaxy_Express_999#​Characters">​Maetel</​a></​li>​ 
-<li style="​top:​95px;​ left:​142px;"><​a href="​https://​en.wikipedia.org/​wiki/​Wile_E._Coyote_and_The_Road_Runner">​Wile E. Coyote</​a></​li>​ 
-<li style="​top:​85px;​ left:​345px;"><​a href="​https://​en.wikipedia.org/​wiki/​Gigan">​Gigan</​a></​li>​ 
-<li style="​top:​75px;​ left:​440px;"><​a href="​https://​en.wikipedia.org/​wiki/​Godzilla">​Godzilla</​a></​li>​ 
-<li style="​top:​5px;​ left:​440px;"><​a href="​https://​en.wikipedia.org/​wiki/​Galaxy_Express_999">​Galaxy Express 999</​a></​li>​ 
-<li style="​top:​100px;​ left:​650px;"><​a href="​https://​en.wikipedia.org/​wiki/​Space_Battleship_Yamato">​Space Battleship Yamato</​a></​li>​ 
-<li style="​top:​25px;​ left:​915px;"><​a href="​https://​en.wikipedia.org/​wiki/​SDF-1_Macross">​SDF-1 Macross</​a></​li>​ 
-<li style="​top:​45px;​ left:​1080px;"><​a href="​https://​en.wikipedia.org/​wiki/​Daicon_III_and_IV_Opening_Animations">​DAICON IV Girl</​a></​li>​ 
-</ul> 
-<​i>​Hover over rectangle to show captions.</​i>​ 
-</​figcaption>​ 
-</​figure>​ 
- 
-<figure class="​annotated">​ 
-<img src="​http://​wiki.animeigo.com/​ONVOE/​Panoramas-1200/​figure.png"​ alt="​Figures at apartment"​ title="​Figures">​ 
-<​figcaption>​ 
-<ul> 
-<!-- Positions of the list-items. These need defining inline. --> 
-<li style="​top:​370px;​ left:​700px;"><​a href="​https://​en.wikipedia.org/​wiki/​Tamiya_Corporation">​Tamiya</​a></​li>​ 
-<li style="​top:​255px;​ left:​965px;"><​a href="​https://​en.wikipedia.org/​wiki/​UFO_%28TV_series%29">​UFO</​a></​li>​ 
-<li style="​top:​150px;​ left:​825px;"><​a href="​https://​en.wikipedia.org/​wiki/​Godzilla">​Godzilla</​a></​li>​ 
-<li style="​top:​175px;​ left:​1000px;"><​a href="​https://​en.wikipedia.org/​wiki/​Ultraman">​Space VTOL 117</​a></​li>​ 
-<li style="​top:​30px;​ left:​218px;"><​a href="​https://​en.wikipedia.org/​wiki/​Mazinger_Z">​Mazinger Z</​a></​li>​ 
-<li style="​top:​30px;​ left:​375px;"><​a href="​https://​en.wikipedia.org/​wiki/​Getter_Robo">​Getter Robo</​a>​ Getter 1</​li>​ 
-</ul> 
-<​i>​Hover over rectangle to show captions.</​i>​ 
-</​figcaption>​ 
-</​figure>​ 
- 
-</​html>​ 
-<-- 
-====== Video ====== 
- 
---> Show online content# 
-{{vimeo>​129055518?​large}} 
-{{vimeo>​129219326?​large}} 
-{{vimeo>​134266210?​large}} 
- 
-<-- 
-