|
Page 4 sur 5 Layer-to-style Editeur : yaromat, gratuite, chargement A quoi ça sert ? A déplacer le code CSS, qui se trouve dans les propriétés de vos calques lorsque vous les insérez, dans le <head> de votre page via la balise <style>.
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) {
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.
|
