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.
69 lines
2.0 KiB
HTML
69 lines
2.0 KiB
HTML
4 years ago
|
<!-- 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>
|
||
|
|
|
||
|
|
</head>
|
||
|
|
<style>
|
||
|
|
|
||
|
|
.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;
|
||
|
|
}
|
||
|
|
|
||
|
|
</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="https://hub.xpub.nl/sandbot/words-for-the-future/LIQUID/draft.html" coords="3570,2823,4279,2984" shape="rect">
|
||
|
|
<area target="_parent" alt="_WOR(L)DS" title="_HOME" href="https://hub.xpub.nl/sandbot/words-for-the-future/" coords="4691,166,5466,458" shape="rect">
|
||
|
|
<area target="_parent" alt="_MANIFESTO" title="_MANIFESTO" href="https://hub.xpub.nl/sandbot/words-for-the-future/LIQUID/MANIFESTO/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="https://hub.xpub.nl/sandbot/words-for-the-future/LIQUID/LIQUID%20-%20Beginning%20print.jpg" coords="1312,1143,3485,2003" shape="rect">
|
||
|
|
<area target="_parent" alt="_INTERPRETATION" title="_INTERPRETATION" href="https://hub.xpub.nl/sandbot/words-for-the-future/LIQUID/ascii.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>
|