...
| HTML |
|---|
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width" />
<title>CoffeeCup Image Mapper map file</title>
<meta name="generator" content="CoffeeCup Image Mapper">
<style>
img {width: 100%; height: auto;}
</style>
</head>
<body>
<table>
<tr><td style="width:50%">
<center>
<img src="https://wiki.geant.org/download/attachments/212303883/title-image-small.png?api=v2">
</center>
</td>
<td style="width:30%">This Training Portal is offering courses focused on the research and education community, with external references that can be useful for us and examples that can be closer to our use cases. It is training by the community for the community. The portal will have new classes available for you to explore every couple of weeks; all classes are online courses that you can follow and complete at your own pace.
</td>
<td style="width:20%">
<center>
<table>
<tr><td>
<div style="border: 1px solid black">
<table class="wysiwyg-macro" data-macro-name="info" data-macro-id="fce5fba8-055e-4414-b214-75e5983cd73c" data-macro-parameters="title=Infoshares ++ Events" data-macro-schema-version="1" data-macro-body-type="RICH_TEXT" style="background-image: url(https://wiki.geant.org/plugins/servlet/confluence/placeholder/macro-heading?definition=e2luZm86dGl0bGU9SW5mb3NoYXJlcyArKyBFdmVudHN9&locale=en_US&version=2); background-repeat: no-repeat" data-mce-selected="1"><tbody><tr><td class="wysiwyg-macro-body"><br><ul><li><strong><a href="https://wiki.geant.org/display/gn43wp6/WP6+Events">all upcoming and past events</a></strong></li></ul></td></tr></tbody></table>
</div>
</td></tr></table></center>
</td>
</tr>
</table>
<!-- Beginning of Courses -->
<h1><b>Courses in Network Automation eAcademy</b></h1>
(approximated commitment to follow each learning unit between brackets)
<br>
<p>
<table>
<tr>
<td valign="top">
<table><tr><td>
<h2>Introduction</h2>
<blockquote>
<li><b><a href="https://e-academy.geant.org/moodle/course/view.php?id=50">OAV - Introduction</a></b> (30') </li>
<li><b><a href="https://e-academy.geant.org/moodle/course/view.php?id=55">OAV Architecture Requirements for NRENS</a></b> (10') </li>
<li><b><a href="https://e-academy.geant.org/moodle/course/view.php?id=57">The OAV Architecture Blueprint</a></b> (30') </li>
</blockquote>
<h2>DevOps</h2>
<b>
<blockquote>
<li><a href="https://e-academy.geant.org/moodle/course/view.php?id=59">Introduction to CI/CD</a> (15') </li>
<li><a href="https://e-academy.geant.org/moodle/course/view.php?id=141">CI/CD: GitlabCI</a> (40') </li>
</b>
</blockquote>
<td></tr></table>
</td>
<td valign="top">
<table><tr><td>
<h2>TM Forum Open Digital Architecture</h2>
<b>
<blockquote>
<li>Decoupling & Integration</li>
<ul>
<li><a href="https://e-academy.geant.org/moodle/course/view.php?id=61">Introduction to Data Modelling, Data Formats, and Protocols</a> (30') </li>
<li><a href="https://e-academy.geant.org/moodle/course/view.php?id=63">Data Modelling: YANG</a> (10') </li>
<li><a href="https://e-academy.geant.org/moodle/course/view.php?id=129">Formats: YAML</a> (30') </li>
<li><a href="https://e-academy.geant.org/moodle/course/view.php?id=66">Formats: JSON</a> (45') </li>
<li><a href="https://e-academy.geant.org/moodle/course/view.php?id=67">Introduction to API</a> (45') </li>
</ul>
<li>Engagement Management</li>
<ul>
<li><a href="https://e-academy.geant.org/moodle/course/view.php?id=69">Introduction to Engagement Management</a> (15') </li>
</ul>
<li>Party Management</li>
<ul>
<li><a href="https://e-academy.geant.org/moodle/course/view.php?id=111">Introduction to Party Management</a> (15') </li>
</ul>
<li>Core Commerce Management</li>
<ul>
<li><a href="https://e-academy.geant.org/moodle/course/view.php?id=71">Introduction to Core Commerce Management </a> (15') </li>
</ul>
<li>Production</li>
<ul>
<li><a href="https://e-academy.geant.org/moodle/course/view.php?id=147">Introduction to Production</a> (30') </li>
<li><a href="https://e-academy.geant.org/moodle/course/view.php?id=75">Introduction to Automation</a> (30') </li>
<li><a href="https://e-academy.geant.org/moodle/course/view.php?id=120">Automation Tools: Ansible</a> (60'+lab time) </li>
<li><a href="https://e-academy.geant.org/moodle/course/view.php?id=79">Introduction to Configuration Management</a> (20') </li>
<li><a href="https://e-academy.geant.org/moodle/course/view.php?id=114">Orchestration: NSO</a> (6h - including lab) </li> </ul> </ul>
<li>Intelligence Management</li>
<ul>
<li><a href="https://e-academy.geant.org/moodle/course/view.php?id=108">Introduction to Intelligence Management</a> (15') </li>
</blockquote>
</b>
</td></tr></table>
</td>
<td valign="top">
<table><tr><td>
<h2><i>ADDITIONAL READING</i></h2>
<h2>NREN Architecture Mappings</h2>
<b>
<blockquote>
<li><a href="https://www.geant.org/Resources/Documents/GN4-3_White-Paper_OAV-Architectures%20(002).pdf">Standards & Common Architectures</a></li>
<li><a href="https://www.geant.org/Resources/Documents/GN4-3_White-Paper_CARnet-OAV-Architecture-Analysis.pdf">CARNET</a></li>
<li><a href="https://www.geant.org/Resources/Documents/GN4-3_White-Paper_CYNET_OAV_Architecture_Analysis.pdf">CYNET</a></li>
<li>GRNET (coming soon)</a></li>
<li><a href="https://www.geant.org/Resources/Documents/GN4-3_White-Paper_HEAnet-OAV-Architecture-Analysis.pdf">HEAnet</a></li>
<li><a href="https://www.geant.org/Resources/Documents/GN4-3_White-Paper_SURFnet-OAV-Architecture-Analysis.pdf">SURFNET</a></li>
</b>
</blockquote>
<p>
<h2>Architectures</h2>
<b>
<blockquote>
<li><a href="https://www.geant.org/Resources/Documents/GN4-3_White-Paper_OAV-Architectures%20(002).pdf">Standards & Common Architectures</a></li>
<li><a href="https://www.tmforum.org/resources/standard/ig1167-oda-functional-architecture-exploratory-report-v6-0-0/">TM Forum ODA</a></li>
<li><a href="https://wiki.geant.org/display/NETDEV/SPA">SPA</a></li>
<li><a href="https://www.mef.net/wp-content/uploads/2016/03/MEF-55.pdf">MEF</a></li>
<li><a href="https://osm.etsi.org/">ETSI-OSM</a></li>
<li><a href="https://www.etsi.org/deliver/etsi_gs/ZSM/001_099/002/01.01.01_60/gs_ZSM002v010101p.pdf">ETSI-ZSM</a></li>
<li><a href="https://www.onap.org/">ONAP</a></li>
<li><a href="https://5g-ppp.eu/wp-content/uploads/2020/02/5G-PPP-5G-Architecture-White-Paper_final.pdf">5G 3GPP</a></li>
<li><a href="https://sc20.supercomputing.org/app/uploads/2020/12/04_sc20_xnet_sobieski_bridgesproject.pdf">GVM</a></li>
<li><a href="https://meetings.internet2.edu/media/medialibrary/2019/03/07/20190308-lehman-netservices-sense-v5.pdf">SENSE</a></li>
<li><a href="https://ieeexplore.ieee.org/abstract/document/8840562/">TALENT</a></li>
<li><a href="https://eosc-portal.eu/">EOSC</a></li>
<li><a href="http://openbaton.github.io/documentation/">OpenBaton</a></li> </b>
</blockquote>
</td></tr></table>
</td>
<td style="width:20%">
<center><a href="https://wiki.geant.org/display/NETDEV/Training+Packages"><img src="https://wiki.geant.org/download/attachments/212303883/training-holidays_small.png?api=v2" Alt="Enjoy our training packages over the holidays, Photo by freestocks on Unsplash" width="300" height="200"></a></center>
<div style="border: 0px solid black; background-color:#CCCCD4">
<table>
<tr><td><center><img src="https://wiki.geant.org/download/attachments/212303883/trainers.jpg?api=v2" width="200" height="133"></center></td></tr>
<br>
<tr><td div style="padding-left:15px; padding-top:15px; padding-right:15px; padding-bottom:15px"><center><b>Meet us on the first Tuesday of every month<br>
One hour for questions & answers<br>
Just drop us an email at <a href="mailto:oav@lists.geant.org">oav@lists.geant.org</a> and we will send you the link.<br>
</b></center></div></td></tr>
</table>
</td>
</tr>
</table>
<table style="border-spacing:30px">
<tr><td div style="border:2px solid black; padding-left:15px; padding-top:15px; padding-right:15px; padding-bottom:15px">
<center><h1><b>
Follow the training map</b></h1>
(click on areas of interest to select courses)
<p>
<br> <!-- Beginning of CoffeeCup Image Map -->
<img src="https://wiki.geant.org/download/attachments/212303883/OAV%20Training-20211210_METRO%20MAP_G%C3%89ANT_Palette.drawio_1100.png?api=v2" usemap="#oav" border=0 height="828" width="1100">
<map name="oav">
<area name="Introduction to OAV" shape="rect" coords="327,103,415,147" href="https://e-academy.geant.org/moodle/course/view.php?id=50" alt="Introduction to OAV" title="Introduction to OAV" OnMouseOver="window.status='Introduction to OAV'; return true" OnMouseOut="window.status=''; return true">
<area name="OAV Architecture Requirements for NRENs" shape="rect" coords="370,202,498,245" href="https://e-academy.geant.org/moodle/course/view.php?id=55" alt="OAV Architecture Requirements for NRENs" title="OAV Architecture Requirements for NRENs" OnMouseOver="window.status='OAV Architecture Requirements for NRENs'; return true" OnMouseOut="window.status=''; return true">
<area name="Introduction to Data Modelling, Data Formats and Protocols" shape="rect" coords="505,219,648,254" href="https://e-academy.geant.org/moodle/course/view.php?id=61" alt="Introduction to Data Modelling, Data Formats and Protocols" title="Introduction to Data Modelling, Data Formats and Protocols" OnMouseOver="window.status='Introduction to Data Modelling, Data Formats and Protocols'; return true" OnMouseOut="window.status=''; return true">
<area name="OAV Architecture Blueprint" shape="rect" coords="600,177,691,218" href="https://e-academy.geant.org/moodle/course/view.php?id=57" alt="OAV Architecture Blueprint" title="OAV Architecture Blueprint" OnMouseOver="window.status='OAV Architecture Blueprint'; return true" OnMouseOut="window.status=''; return true">
<area name="Introduction to CI/CD" shape="rect" coords="664,234,724,279" href="https://e-academy.geant.org/moodle/course/view.php?id=59" alt="Introduction to CI/CD" title="Introduction to CI/CD" OnMouseOver="window.status='Introduction to CI/CD'; return true" OnMouseOut="window.status=''; return true">
<area name="Introduction to API" shape="poly" coords="466,309,503,309,505,330,522,329,520,278,458,278,459,309,473,309,473,309" href="https://e-academy.geant.org/moodle/course/view.php?id=67" alt="Introduction to API" title="Introduction to API" OnMouseOver="window.status='Introduction to API'; return true" OnMouseOut="window.status=''; return true">
<area name="Formats: JSON" shape="rect" coords="586,305,608,356" href="https://e-academy.geant.org/moodle/course/view.php?id=66" alt="Formats: JSON" title="Formats: JSON" OnMouseOver="window.status='Formats: JSON'; return true" OnMouseOut="window.status=''; return true">
<area name="Formats: YAML" shape="rect" coords="614,306,629,354" href="https://e-academy.geant.org/moodle/course/view.php?id=129" alt="Formats: YAML" title="Formats: YAML" OnMouseOver="window.status='Formats: YAML'; return true" OnMouseOut="window.status=''; return true">
<area name="Data Modelling: YANG" shape="rect" coords="599,259,653,276" href="https://e-academy.geant.org/moodle/course/view.php?id=63" alt="Data Modelling: YANG" title="Data Modelling: YANG" OnMouseOver="window.status='Data Modelling: YANG'; return true" OnMouseOut="window.status=''; return true">
<area name="CI/CD - GitlabCI" shape="rect" coords="836,298,860,357" href="https://e-academy.geant.org/moodle/course/view.php?id=141" alt="CI/CD - GitlabCI" title="CI/CD - GitlabCI" OnMouseOver="window.status='CI/CD - GitlabCI'; return true" OnMouseOut="window.status=''; return true">
<area name="Introduction to Engagement Management" shape="rect" coords="222,296,343,333" href="https://e-academy.geant.org/moodle/course/view.php?id=69" alt="Introduction to Engagement Management" title="Introduction to Engagement Management" OnMouseOver="window.status='Introduction to Engagement Management'; return true" OnMouseOut="window.status=''; return true">
<area name="Introduction to Party Management" shape="rect" coords="194,399,339,427" href="https://e-academy.geant.org/moodle/course/view.php?id=111" alt="Introduction to Party Management" title="Introduction to Party Management" OnMouseOver="window.status='Introduction to Party Management'; return true" OnMouseOut="window.status=''; return true">
<area name="Introduction to Core Commerce Management" shape="poly" coords="311,530,312,556,398,555,401,472,383,472,383,508,311,508,311,508" href="https://e-academy.geant.org/moodle/course/view.php?id=71" alt="Introduction to Core Commerce Management" title="Introduction to Core Commerce Management" OnMouseOver="window.status='Introduction to Core Commerce Management'; return true" OnMouseOut="window.status=''; return true">
<area name="Introduction to Production" shape="rect" coords="524,518,681,553" href="https://e-academy.geant.org/moodle/course/view.php?id=147" alt="Introduction to Production" title="Introduction to Production" OnMouseOver="window.status='Introduction to Production'; return true" OnMouseOut="window.status=''; return true">
<area name="Introduction to Automation" shape="rect" coords="552,717,579,816" href="https://e-academy.geant.org/moodle/course/view.php?id=75" alt="Introduction to Automation" title="Introduction to Automation" OnMouseOver="window.status='Introduction to Automation'; return true" OnMouseOut="window.status=''; return true">
<area name="Introduction to Intelligence Management" shape="rect" coords="964,473,1044,526" href="https://e-academy.geant.org/moodle/course/view.php?id=108" alt="Introduction to Intelligence Management" title="Introduction to Intelligence Management" OnMouseOver="window.status='Introduction to Intelligence Management'; return true" OnMouseOut="window.status=''; return true">
<area name="SURFnet OAV Architecture Analysis" shape="rect" coords="641,48,704,68" href="https://www.geant.org/Resources/Documents/GN4-3_White-Paper_SURFnet-OAV-Architecture-Analysis.pdf" alt="SURFnet OAV Architecture Analysis" title="SURFnet OAV Architecture Analysis" OnMouseOver="window.status='SURFnet OAV Architecture Analysis'; return true" OnMouseOut="window.status=''; return true">
<area name="CYNET OAV Architecture Analysis" shape="rect" coords="590,17,606,70" href="https://www.geant.org/Resources/Documents/GN4-3_White-Paper_CYNET_OAV_Architecture_Analysis.pdf" alt="CYNET OAV Architecture Analysis" title="CYNET OAV Architecture Analysis" OnMouseOver="window.status='CYNET OAV Architecture Analysis'; return true" OnMouseOut="window.status=''; return true">
<area name="CARNET OAV Architecture Analysis" shape="rect" coords="613,14,633,75" href="https://www.geant.org/Resources/Documents/GN4-3_White-Paper_CARnet-OAV-Architecture-Analysis.pdf" alt="CARNET OAV Architecture Analysis" title="CARNET OAV Architecture Analysis" OnMouseOver="window.status='CARNET OAV Architecture Analysis'; return true" OnMouseOut="window.status=''; return true">
<area name="HEAnet OAV Architecture Analysis" shape="rect" coords="532,12,555,69" href="https://www.geant.org/Resources/Documents/GN4-3_White-Paper_HEAnet-OAV-Architecture-Analysis.pdf" alt="HEAnet OAV Architecture Analysis" title="HEAnet OAV Architecture Analysis" OnMouseOver="window.status='HEAnet OAV Architecture Analysis'; return true" OnMouseOut="window.status=''; return true">
<area name="Standards & Common Architectures" shape="rect" coords="731,196,762,277" href="https://www.geant.org/Resources/Documents/GN4-3_White-Paper_OAV-Architectures%20(002).pdf" alt="Standards & Common Architectures" title="Standards & Common Architectures" OnMouseOver="window.status='Standards & Common Architectures'; return true" OnMouseOut="window.status=''; return true">
<area name="TM Forum ODA" shape="rect" coords="773,194,785,246" href="https://www.tmforum.org/resources/standard/ig1167-oda-functional-architecture-exploratory-report-v6-0-0/" alt="TM Forum ODA" title="TM Forum ODA" OnMouseOver="window.status='TM Forum ODA'; return true" OnMouseOut="window.status=''; return true">
<area name="MEF" shape="rect" coords="789,194,806,254" href="https://www.mef.net/wp-content/uploads/2016/03/MEF-55.pdf" alt="MEF" title="MEF" OnMouseOver="window.status='MEF'; return true" OnMouseOut="window.status=''; return true">
<area name="ETSI-OSM" shape="rect" coords="810,196,822,264" href="https://osm.etsi.org/" alt="ETSI-OSM" title="ETSI-OSM" OnMouseOver="window.status='ETSI-OSM'; return true" OnMouseOut="window.status=''; return true">
<area name="ETSI-ZSM" shape="rect" coords="826,194,839,262" href="https://www.etsi.org/deliver/etsi_gs/ZSM/001_099/002/01.01.01_60/gs_ZSM002v010101p.pdf" alt="ETSI-ZSM" title="ETSI-ZSM" OnMouseOver="window.status='ETSI-ZSM'; return true" OnMouseOut="window.status=''; return true">
<area name="ONAP" shape="rect" coords="847,195,861,251" href="https://www.onap.org/" alt="ONAP" title="ONAP" OnMouseOver="window.status='ONAP'; return true" OnMouseOut="window.status=''; return true">
<area name="5G 3GPP" shape="rect" coords="871,194,886,263" href="https://5g-ppp.eu/wp-content/uploads/2020/02/5G-PPP-5G-Architecture-White-Paper_final.pdf" alt="5G 3GPP" title="5G 3GPP" OnMouseOver="window.status='5G 3GPP'; return true" OnMouseOut="window.status=''; return true">
<area name="SPA" shape="rect" coords="893,195,906,245" href="https://wiki.geant.org/display/NETDEV/SPA" alt="SPA" title="SPA" OnMouseOver="window.status='SPA'; return true" OnMouseOut="window.status=''; return true">
<area name="GVM: Generalized Virtualization Model" shape="rect" coords="912,192,928,248" href="https://sc20.supercomputing.org/app/uploads/2020/12/04_sc20_xnet_sobieski_bridgesproject.pdf" alt="GVM: Generalized Virtualization Model" title="GVM: Generalized Virtualization Model" OnMouseOver="window.status='GVM: Generalized Virtualization Model'; return true" OnMouseOut="window.status=''; return true">
<area name="SENSE: Working Toward a Smart Network and Smart Application Ecosystem" shape="rect" coords="934,192,947,256" href="https://meetings.internet2.edu/media/medialibrary/2019/03/07/20190308-lehman-netservices-sense-v5.pdf" alt="SENSE: Working Toward a Smart Network and Smart Application Ecosystem" title="SENSE: Working Toward a Smart Network and Smart Application Ecosystem" OnMouseOver="window.status='SENSE: Working Toward a Smart Network and Smart Application Ecosystem'; return true" OnMouseOut="window.status=''; return true">
<area name="TALENT" shape="rect" coords="956,200,969,258" href="https://ieeexplore.ieee.org/abstract/document/8840562/" alt="TALENT" title="TALENT" OnMouseOver="window.status='TALENT'; return true" OnMouseOut="window.status=''; return true">
<area name="EOSC" shape="rect" coords="954,182,1004,195" href="https://eosc-portal.eu/" alt="EOSC" title="EOSC" OnMouseOver="window.status='EOSC'; return true" OnMouseOut="window.status=''; return true">
<area name="OpenBaton" shape="rect" coords="955,157,1023,175" href="http://openbaton.github.io/documentation/" alt="OpenBaton" title="OpenBaton" OnMouseOver="window.status='OpenBaton'; return true" OnMouseOut="window.status=''; return true">
<area name="Introduction to Configuration Management" shape="rect" coords="732,722,757,806" href="https://e-academy.geant.org/moodle/course/view.php?id=79" alt="Introduction to Configuration Management" title="Introduction to Configuration Management" OnMouseOver="window.status='Introduction to Configuration Management'; return true" OnMouseOut="window.status=''; return true">
<area name="Ansible" shape="rect" coords="584,718,598,778" href="https://e-academy.geant.org/moodle/course/view.php?id=120" alt="Ansible" title="Ansible" OnMouseOver="window.status='Ansible'; return true" OnMouseOut="window.status=''; return true">
<area name="NSO" shape="rect" coords="899,620,965,643" href="https://e-academy.geant.org/moodle/course/view.php?id=114" alt="NSO" title="NSO" OnMouseOver="window.status='NSO'; return true" OnMouseOut="window.status=''; return true">
</map>
<!-- End of CoffeeCup Image Map -->
</center> <p>
<p>Orchestration, Automation and Virtualisation (OAV) are broad topics with many tools, platforms, programming languages and concepts involved, and it is easy to get lost.<br>
The interactive metro map is a visual way to help you follow your self-paced training, depending on your interests. These are some tips to follow the map:
<ul>
<li>A circle in a station means this is a Moodle course in the eAcademy.</li>
<li>A square means this is a document or an external website where you can get more information on a topic.</li>
<li>A station with the font highlighted is available.</li>
<li>A station with the font grayed out means it’s not published yet.</li>
<li>Some stations can belong to more than one line.</li>
<li>When you arrive to a big station after completing a line, you have gained the knowledge about the topic and mastered the area.</li>
<li>The green line gives a basic overview of OAV topics and the functional blocks in the TM Forum Open Digital Architecture (ODA) in short learning units (between 5 minutes and 1 hour).</li>
<li>We recommend that you take at least the first three introductory courses before jumping to another line.</li>
<li>You can change the line and follow a technical line, or a more theoretical line, or search for use cases.</li>
</ul>
</td>
<td div style="border:2px solid black; padding-left:15px; padding-top:15px; padding-right:15px; padding-bottom:15px" style="width:20%" valign="top" >
<center><h1><b>
Follow the training charts</b></h1>
(pick training packages to follow)
<p>
<br>
<a href="https://wiki.geant.org/display/NETDEV/Training+Packages"><img src="https://wiki.geant.org/download/attachments/212303883/20211206_training_thumbnail.png?api=v2"></a>
<p><br>
<a href="https://wiki.geant.org/display/NETDEV/Deep+Dive+Training+Packages"><img src="https://wiki.geant.org/download/attachments/212303883/Deep_Dive_Chart_thumbnail.png?api=v2"></a>
</center><p>
<br>
Pick a package and focus on that topic by taking a series of classes one class at a time. Just go through the whole package list!
<p>
The following <b><a href="https://wiki.geant.org/display/NETDEV/Training+Packages">training packages</b></a> are currently available:
<ul>
<li>Open Digital Architecture</li>
<li>CI/CD</li>
<li>Modelling, Formats & Protocols</li>
<li>APIs</li>
<li>Engagement Management</li>
<li>Party Management</li>
<li>Core Commerce Management</li>
<li>Production</li>
<li>Intelligence Management</li>
<li>Architecture Deep Dive</li>
<li>Use Cases & Examples</li>
</ul>
<p>
For an even more detailed learning experience follow our <b><a href="https://wiki.geant.org/display/NETDEV/Deep+Dive+Training+Packages">deep dive packages</b></a> on
<ul>
<li>OAV Architectures</li>
<li>Virtualisation</li>
<li>Automation</li>
<li>Orchestration</li>
</ul>
<p>
<p>
<br>
<p>
<p>
<u>Please note:</u>
<p>
<img src="https://wiki.geant.org/download/attachments/212303883/GLAD_crop_image.png?api=v2" width="13" height="16">
class is available as a moodle course in the GÉANT Network Automation eAcademy
<br>
<p>
<img src="https://wiki.geant.org/download/attachments/212303883/external_link.png?api=v2" with="13" height="11">
material is available via an external link.
</td></tr>
</table>
<footer> <!-- Beginning of CoffeeCup Image Map Responsive Scripts -->
<script>
/*
* rwdImageMaps jQuery plugin v1.5
*
* Allows image maps to be used in a responsive design by recalculating the area coordinates to match the actual image size on load and window.resize
*
* Copyright (c) 2013 Matt Stow
* https://github.com/stowball/jQuery-rwdImageMaps
* http://mattstow.com
* Licensed under the MIT license
*/
;(function(a){a.fn.rwdImageMaps=function(){var c=this;var b=function(){c.each(function(){if(typeof(a(this).attr("usemap"))=="undefined"){return}var e=this,d=a(e);a("<img />").load(function(){var g="width",m="height",n=d.attr(g),j=d.attr(m);if(!n||!j){var o=new Image();o.src=d.attr("src");if(!n){n=o.width}if(!j){j=o.height}}var f=d.width()/100,k=d.height()/100,i=d.attr("usemap").replace("#",""),l="coords";a('map[name="'+i+'"]').find("area").each(function(){var r=a(this);if(!r.data(l)){r.data(l,r.attr(l))}var q=r.data(l).split(","),p=new Array(q.length);for(var h=0;h<p.length;++h){if(h%2===0){p[h]=parseInt(((q[h]/n)*100)*f)}else{p[h]=parseInt(((q[h]/j)*100)*k)}}r.attr(l,p.toString())})}).attr("src",d.attr("src"))})};a(window).resize(b).trigger("resize");return this}})(jQuery);
jQuery(document).ready(function(e) {jQuery('img[usemap]').rwdImageMaps();});
</script>
<!-- End of CoffeeCup Image Map Responsive Scripts --> </footer>
<p>
<p>
</body>
</html>
|
...