Où la trouver dans DMX ? Une fois installée, vous la trouverez dans Commandes/Layer2style.

Do it for all Layers : Le fait de cocher cette option indique que l'extension va s'appliquer à tous les calques figurant dans la page.

Affected Layers : tous les calques de votre page apparaissent. Si vous n'avez pas coché la première option, vous pouvez sélectionner ici le calque qui sera concerné.

Moving direction :

  • Layer to style : les propriétés CSS des calques seront exportées dans l'entête de votre page, dans les balises <style>.
  • Style to layer : les propriétés CSS figurant entre les balises <style> vont être dispatchées dans la page dans les balises auxquelles elles s'appliquent.

Un p'tit exemple : J'insère deux calques dans une page, je leur attribue quelques propriétés dans le panneau Propriétés et cela donne ceci dans le code :

<html>
<head>
<title>Layer to style</title>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</head>
<body>
<div id="calque1" style="position:absolute; width:200px; height:115px; z-index:1; background-color:#0099FF; layer-background-color:#0099FF; border:1px none #000000; overflow:scroll">lololololo
</div>
<div id="calque2" style="position:absolute; width:200px; height:115px; z-index:2; left:399px; top:127px; background-color:#FF3300; layer-background-color:#FF3300; border:1px none #000000">lalalalala</div>
</body>
</html>

J'applique l'extension Layer to style en sélectionnant Layer-to-style, j'obtiens ceci :

<html>
<head>
<title>Layer to style</title>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
<style>
<!--
#calque1{position:absolute; width:200px; height:115px; z-index:1; background-color:#0099FF; layer-background-color:#0099FF; border:1px none #000000; overflow:scroll;}
#calque2{position:absolute; width:200px; height:115px; z-index:2; left:399px; top:127px; background-color:#FF3300; layer-background-color:#FF3300; border:1px none #000000;}
-->
</style>
</head>
<body>
<div id="calque1">lololololo</div>
<div id="calque2">lalalalala</div>
</body>
</html>

Et voilà, à vous maintenant :) voici un exemple de son utilisation.