<!-- Image Map Generated by http://www.image - map.net/ -->
< html > < head >
< script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" > < / script >
< script src = "jquery.rwdImageMaps.min.js" > < / script >
< title > LIQUID < / title >
< link rel = "icon" href = "liquidwit-01.png" type = "image/png" / >
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
< / head >
< style >
body{
margin: 0
}
.container {
margin: 20px auto 0;
position: relative;
width: 90%;
}
.pyramid {
margin: 0 auto;
width: 90%;
}
img[usemap] {
border: none;
height: auto;
max-width: 100%;
width: auto;
}
@media screen and (max-width: 600px){
img[usemap]{
transform: rotate(90deg);
max-width: 200%;
max-height: 130%;
margin: 20% 0;
}
}
< / style >
< div class = "container" >
< div class = "pyramid" >
< img src = "landing-01.png" usemap = "#image-map" >
< map name = "image-map" >
< area target = "_blank" alt = "_ORIGINAL TEXT" title = "_ORIGINAL TEXT" href = "original.html" coords = "3570,2823,4279,2984" shape = "rect" >
< area target = "_parent" alt = "_WOR(L)DS" title = "_HOME" href = "../" coords = "4691,166,5466,458" shape = "rect" >
< area target = "_parent" alt = "_MANIFESTO" title = "_MANIFESTO" href = "manifesto.html" coords = "1307,267,3469,1036" shape = "rect" >
< area target = "_blank" alt = "_ARTISTIC RESPONSE by Andrea Bozic and Julia Willms (TILT)" title = "_ARTISTIC RESPONSE by Andrea Bozic and Julia Willms (TILT)" href = "LIQUID%20-%20Beginning%20print.jpg" coords = "1312,1143,3485,2003" shape = "rect" >
< area target = "_parent" alt = "_INTERPRETATION" title = "_INTERPRETATION" href = "textasimage.html" coords = "1318,2093,3485,2803" shape = "rect" >
< / map >
< / div >
< / div >
< script >
// * img coords generated with
// http://imagemap-generator.dariodomi.de/
// * made responsive with
// https://github.com/stowball/jQuery-rwdImageMaps
$(document).ready(function(e) {
$('img[usemap]').rwdImageMaps();
$('area').on('focus', function(e) {
e.preventDefault();
$('.selection p').html($(this).attr('class'));
});
});
< / script >
< / body > < / html >
