HTML Imagemap Iframe
Imagemap
Är en bild med hotspot områden. Det vill säga en klickbar bild. När man klickar på ett hotspot område så kan det jämföras med att klicka på en länk.
Se även w3schools om imagemaps.
Imagemap demo
Här kommer ett exempel .
Först måste vi tala om vilken vilka hotspotområden som bilden ska använda med
usemap="#gorilla"
och så måste vi givetvis beskriva hotspotområdena. Vi kan ange olika typer av 2 dimensionella områden, rektangel, cirkel eller det flexibla polygon området.
Ytterst taggen map och sedan områdena med taggen area. Varje område kopplas till en webbsida precis på samma sätt som en länk.
<img src="gorilla-med-unge.jpg" width="430" height="350" border="0"
usemap="#gorilla
">
<map name="gorilla">
<area shape="rect" coords="102,99,279,179" href="elev.htm" target="_blank">
<area shape="poly" coords="45,181, 277,184, 282,154, 333,159,
355,219, 334,271, 322,326, 319,341, 248,339, 195,310, 146,318,
109,336, 60,330, 37,256" href="larare.htm" target="_blank">
</map>
Hotspotområdena
Körbart demo
Om du använder Dreamweaver så finns här lite skapa "klickbar bild" instruktioner.
Iframe
Iframe är som ett eget litet väldigt förenklat fönster i vår webbsida. I HTML5 så har frameset och frame försvunnit men iframe finns kvar.
Vi kan till exempel ha 2 färdiga webbsidor.
sida 1
sida 2
<a href="sida1.htm" target="my_demo_iframe">sida 1</a> <br>
<a href="sida2.htm" target="my_demo_iframe">sida 2</a> <br>
<iframe src="" name="my_demo_iframe" width="400px" height="300px" scrolling="auto"></iframe>
Vi laddar inte in någon sida i vår iframe src="". Oftast kanske det är snyggast så då får man skapa en lämplig sida och ladda in den med src.