Today I noticed that if I write [b]BEGIN[/b] in a row that row is the beginning of a collapsable section, until a row with [b]END[/b].
F.e. /* — BEGIN common tags — / as beginnning and / — END common tags — */ as end.
And I can have nested collpsable sections, even in an html file ( , f. e.)
expansible image with image-map
We managed to add an image map to the on-click expansible image.
This is the code:
<style type="text/css">
img[usemap] { zoom: 12%;}
img[usemap]:focus {zoom: 50%;}
</style>
<map name="mymap">
<area shape="rect" coords="1294,253,1420,434" title="mount" />
<area shape="rect" coords="1709,296,1835,477" title="tree" />
</map>
<img tabindex="0" src="path-to/myimage" usemap="#mymap" />
The problem is that to close the expansed image you must click either on a map area or outside the image.
on-click expansible image
We were looking for the simplest possible solution to enlarge an image on click, without javascript and with the least amount of code possible.
a first attempt
At first we found the pseudo-class focus as a solution: with this css code img:focus and in html (inside the img tag) tabindex="0".
In this way, the image expanded on click, but to make it return to the initial size, it was necessary to click outside the enlarged image. As in the following example:
an important step
Therefore we had to add other code, so that we could return to the original, small, size, clicking inside the image. We had to use the input tag.
This is the result:
This is the code:
<style type="text/css">
input:checked + label > img {max-width: 200px; transform:scale(1.0); left: 0px;}
input {display: none;}
img {
max-width: 200px;
transition: all 1s;
transition:transform 0.25s ease;
}
img:focus {
max-width: none;
transform:scale(2.8);
position: relative;
left: 5%;
outline:0;
}
</style>
<p>This the result:</p>
<input type="checkbox" checked id="myimage" />
<label for="myimage">
<img tabindex="0" src="path-to-my-image/myimage.jpg" width="200px" />
</label>fine tuning: adding an image map
We speak about this new feature in another article.
expand-collapse con css
Su Opera.developpers (dev.opera.com) si trova una soluzione interessante, o almeno curiosa: si comprime ed espande del contenuto senza ricorso a javascript, ma usando solo css.
Preferiamo chiamare curiosa piuttosto che interessante questa proposta per due motivi:
1) non è cross-browsers (IE e i webkit-based sono esclusi)
2) si parte da un testo (/contenuto) espanso, che solo poi si può comprimere (collapse), mentre dovrebbe essere il contrario: di default compresso, con possibilità di espandere.
expand-collapse: quante difficoltà
Non è facile trovare uno script (js) per una funzione pur semplice come expand/collapse.
O meglio, se ne trovano, ma non adattabili tanto facilmente alla scelta di visualizzare di default alcuni blocchi comprimibili (o uno solo), lasciando compressi e non visibili, se non dopo clic, gli altri.
Tale funzione è utile per un menu: con espanso solo il blocco di links che si riferisce alla sezione in cui ci si trova, e compressi i links alle singola pagine delle altre sezioni del sito.
Molti script naufragano sull’unico clic, ne vogliono due la prima volta e solo poi si accontentano di uno; viceversa altri sono scattanti da subito al primo clic, ma comprimono tutti i blocchi, compreso quello che dovrebbe restare espanso.
Finora non ho trovato uno script che abbia entrambi i pregi: bisogna scelgleiere l’uno, o l’altro.