Skip to content

Instantly share code, notes, and snippets.

@mrdoob

mrdoob/responsive_imagemap.js

Last active February 14, 2024 05:02
Show Gist options
  • Save mrdoob/e69fd7009736f2ba99a8968c682a8653 to your computer and use it in GitHub Desktop.
Save mrdoob/e69fd7009736f2ba99a8968c682a8653 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. mrdoob renamed this gist Oct 1, 2020. 1 changed file with 0 additions and 0 deletions.
    0 script.js → responsive_imagemap.js
    View file
    File renamed without changes.
  2. mrdoob created this gist Oct 1, 2020.
    26 changes: 26 additions & 0 deletions script.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,26 @@
    // @mrdoob: Can't believe image maps aren't responsive

    window.onload = function () {

    var image = document.getElementById( 'image' );
    var delta = image.clientWidth / 1024;

    var map = document.getElementById( 'map' );
    var areas = map.getElementsByTagName( 'area' );

    for ( var i = 0; i < areas.length; i ++ ) {

    var area = areas[ i ];
    var coords = area.coords.split( ',' );

    for ( var j = 0; j < coords.length; j ++ ) {

    coords[ j ] *= delta;

    }

    area.coords = coords.join( ',' );

    }

    }