You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
87 lines
2.2 KiB
HTML
87 lines
2.2 KiB
HTML
<!-- 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> |