Splendid headphones!X
Fantastic peripherals: the keyboard and the mouse.X
Indispensable tools: a notepad and a pen.X
revision:
Find the areas in the pictures by using the mouse (i.e. pointer turns to hand and title shows up when in an area.)
<div>
<p>Find the areas in the pictures by using the mouse (i.e. pointer turns to hand and title shows up when in an area.)</p>
<div class="flex_container">
<img src="../images/3.jpg" width="500" height="500" alt="holiday" usemap="#holidaymap">
<map name="holidaymap">
<area shape="rect" coords="34, 44, 104, 150" alt="rect1" title="first" href="https://lwitters.com">
<area shape="rect" coords="190, 172, 333, 250" alt="rect2" title="second" href="http://lwitters-1.com">
<area shape="circle" coords="350, 400, 44" alt="circle" title="third" href="http://peer.be">
</map>
<img src="../images/5.jpg" alt="" usemap="#man-beach-map" />
<map name="man-beach-map" id="man-beach-map">
<area alt="man-beach" title="man-beach" href="https://lwitters.com" target="_blank" shape="circle" coords="237,500,80" />
<area alt="sky" title="sky" href="https://lwitters-1.com" target="_blank" shape="circle" coords="100,100,80" />
</map>
</div>
</div>
<style>
.flex_container{display: flex; flex-direction: row; padding: 0 1vw; justify-content:space-evenly; width: 90vw; height: 40vw; border: 1vw solid seagreen;}
</style>
<div class="flex-container">
<form name = "myform">
<input type = "text" name = "stage" size = "10" />
</form>
<img src = "../images/usemap.gif" alt = "HTML Map" usemap = "#tutor"/>
<map name = "tutor">
<area shape="poly" coords = "74,0,113,29,98,72,52,72,38,27" href = "https://www.perl.org" alt = "Perl tutor" target = "_self" onMouseOver = "showTutor('perl')"
onMouseOut = "showTutor('')"/>
<area shape = "rect" coords = "22,83,126,125" href = "https://html.com" alt = "HTML tutor" target = "_self" onMouseOver = "showTutor('html')"
onMouseOut = "showTutor('')"/>
<area shape = "circle" coords = "73,168,32" href = "https://www.php.net" alt = "PHP tut" target = "_self" onMouseOver = "showTutor('php')"
onMouseOut = "showTutor('')"/>
</map>
</div>
<style>
.flex_container_a{display: flex; flex-direction: row; padding: 1vw; justify-content:space-evenly; border: 1vw solid seagreen;}
.flex_container_a img, .flex_container_a input{border: 0.5vw double brown;}
.flex_container_a input{color: red;font-size: 2vw}
</style>
<script type = "text/javascript">
function showTutor(name) {
document.myform.stage.value = name
}
</script>
<div class="flex-container">
<img src="../images/seven_wonders.jpg" usemap="#imagemap" alt="Seven Wonders of the World" width="400"; height="auto"/>
<map name="imagemap">
<area href="https://www.chichenitza.com" shape="rect" coords="0,0,205,150" alt="chichen Itza" target="_blank"/>
<area href="https://www.britannica.com/topic/Christ-the-Redeemer" shape="rect" coords="210,1,410,150" alt="Christ on Corcovado Mountain" target="_blank"/>
<area href="https://www.britannica.com/topic/Great-Wall-of-China" shape="rect" coords="0,150,210,288" alt="great wall of china" target="_blank"/>
<area href="https://www.britannica.com/place/Machu-Picchu" shape="rect" coords="210,150,410,288" alt="machu picchu" target="_blank"/>
<area href="http://www.alluringworld.com/al-khazneh/" shape="rect" coords="0,290,210,440" alt="al kanzneh" target="_blank"/>
<area href="https://www.britannica.com/topic/Taj-Mahal" shape="rect" coords="210,290,405,435" alt="taj mahal"target="_blank"/>
<area href="https://www.nationalgeographic.org/encyclopedia/colosseum/" shape="rect" coords="0,440,405,650" alt="colosseum Rome"target="_blank"/>
<p>The seven wonders of the world </p>
</map>
<img src="../images/Solvay_Conference.jpg" alt="Solvay_Conference" width="600" height="400" usemap="#biography" />
<map name="biography">
<area shape="rect" coords="350,130,310,190" href="https://www.biography.com/scientist/albert-einstein" alt="Einstein" title="Einstein">
<area shape="rect" coords="320,50,360,100" href="https://www.biography.com/scientist/erwin-schrdinger" alt="Schrödinger" title="Schrödinger">
<area shape="rect" coords="420,50,450,100" href="https://www.nobelprize.org/prizes/physics/1945/pauli/biographical/" alt="Pauli" title="Pauli">
<area shape="rect" coords="160,120,200,190" href="https://www.biography.com/scientist/marie-curie" alt="Curie" title="Curie">
<area shape="rect" coords="40,120,80,190" href="https://www.nobelprize.org/prizes/physics/1918/planck/biographical/" alt="Planck" title="Planck">
<p>Solvay Conference </p>
</map>
</div>
<style>
.flex_container_b{display: flex; flex-direction: row wrap; padding: 1vw; justify-content:space-evenly; border: 1vw solid seagreen;}
.flex_container_b img, .flex_container_b input{border: 0.5vw double brown;}
.flex_container_b input{color: red;font-size: 2vw}
</style>
<main>
<img src="../images/desk.jpeg" usemap="#desk-items" />
<map name="desk-items">
<area alt="headphones" title="headphones" href="#headhphones" coords="120,364,116" shape="circle"/>
<area alt="peripherals" title="peripherals" href="#peripherals" coords="260,314,737,478" shape="rect"/>
<area alt="stationery" title="stationery" href="#stationery" coords="526,296,735,296,729,16,563,16,563,108,524,108" shape="poly"/>
</map>
<div class="popup" id="headhphones"> Splendid headphones!<a class="close" href="#">X</a></div>
<div class="popup" id="peripherals"> Fantastic peripherals: the keyboard and the mouse.<a class="close"href="#">X</a></div>
<div class="popup" id="stationery"> Indispensable tools: a notepad and a pen.<a class="close" href="#">X</a></div>
</main>
<style>
:root {--blue: #74bcdd; --dark-blue: #2d3e51; --red: #f74442; --yellow: #fbca32; --green: #5be95b;--grey: #ebeced;}
main { display: flex; align-items: center; justify-content: center;}
area { outline: 0.5vw solid var(--red);}
.popup {padding: 2vw; background-color: lightgreen; color: darkblue; font-weight: 100;font-size: 1.15vw; position: absolute;
opacity: 0; transform: scale(0); transition: opacity 300ms, transform 300ms;}
.popup:target { opacity: 1; transform: scale(1); }
.popup > .close { position: absolute; right: -1vw; top: -1vw; background-color: black; padding: 0.4vw 1vw;}
</style>