Este ejemplo es una pr\u00e1ctica y variaci\u00f3n del que he encontrado en uno de los magn\u00edficos tutoriales de la Web de Illasaron. Aqu\u00ed se han definido dos estilos para mostrar la imagen y el texto, de manera compacta al comienzo y extendida al pusar el bot\u00f3n (+). En el modo extendido la imagen ocupar\u00e1 el mayor espacio posible y el texto se colocar\u00e1 debajo, incluyendo tambi\u00e9n una parte que antes estaba oculta.<\/p>\n

$\"Bah\u00eda$ <\/p>\n

La Bah\u00eda de la Habana y la fortaleza de
\n\u00abEl Morro\u00bb<\/p><\/div>\n

( … ) Desde el lugar en el que se encontraba, la ciudad de la Habana adquir\u00eda en direcci\u00f3n a la bah\u00eda una perspectiva hel\u00e9nica de colores redivivos, con tantas columnas d\u00f3ricas, j\u00f3nicas y corintias que a cualquier buen observador le hubiera parecido exc\u00e9ntrico.<\/p>\n

A todas horas la gente acud\u00eda con diferentes fines, pero sobre todo abundaban los que pretend\u00edan abandonarse en la contemplaci\u00f3n del mar y sus meneos. Merodeaban por all\u00ed parejas mixtas en edad y sexo, madres que paseaban a sus hijos, habituales amantes del sedal y algunos silenciosos pregoneros. A escasos metros y formando un c\u00edrculo en torno a una botella de ron, cinco hombres intentaban parafrasear con sus gaznates aquella m\u00e1xima que aconseja combatir el fuego con fuego. En general era un ambiente tranquilo, turbado \u00fanicamente por alg\u00fan amago de circulaci\u00f3n del que eran responsables: bicicleteros, taxistas, boteros, un cami\u00f3n ruso que pas\u00f3 dejando una humareda… ocasionales patrulleros.<\/p><\/div>\n

\u00abLa Jinetera\u00bb, 11\/2002<\/h6>\n<\/div>\n<\/div>\n
Recuerda que s\u00f3lo los Estilos Alternativos son excluyentes, de modo que si quieres que se aplique un estilo sin incluir ning\u00fan elemento del otro, ambos deben poseer el atributo rel=\u00bbaltelnate stylesheet.\u00bb Puedes obtener m\u00e1s informaci\u00f3n sobre Hojas de Estilo Externas en los siguientes:<\/p>\n

Enlaces Relacionados<\/h5>\n
W3C<\/a> | illasaron.com<\/a> | conclase.net<\/a><\/p>\n

Mostrar \/ Ocultar el C\u00f3digo<\/h6>\n

(+\/-)<\/a><\/p>\n

\r\nScript en la Cabecera<\/h6>\r\n( ... )\r\n\r\n<link href=\"normal.css\" rel=\"stylesheet\" type=\"text\/css\" \/>\r\n<link rel=\"alternate stylesheet\" type=\"text\/css\" href=\"extendido.css\" title=\"alternativo\" \/>\r\n<script type=\"text\/javascript\" src=\"estilo_alternativo.js\"><\/script>\r\n<\/head>\r\n
Documento Javascript<\/h6>\r\n\/\/  estilos_alternativos.js\r\n\r\nfunction setActiveStyleSheet(title) {\r\nvar i, a, main;\r\nfor(i=0; (a = document.getElementsByTagName(\"link\")[i]); i++) {\r\nif(a.getAttribute(\"rel\").indexOf(\"style\") != -1 && a.getAttribute(\"title\")) {\r\na.disabled = true;\r\nif(a.getAttribute(\"title\") == title) a.disabled = false;\r\n}\r\n}\r\n}\r\n\r\nfunction getActiveStyleSheet() {\r\nvar i, a;\r\nfor(i=0; (a = document.getElementsByTagName(\"link\")[i]); i++) {\r\nif(a.getAttribute(\"rel\").indexOf(\"style\") != -1 && a.getAttribute(\"title\") && !a.disabled) return a.getAttribute(\"title\");\r\n}\r\nreturn null;\r\n}\r\n\r\nfunction getPreferredStyleSheet() {\r\nvar i, a;\r\nfor(i=0; (a = document.getElementsByTagName(\"link\")[i]); i++) {\r\nif(a.getAttribute(\"rel\").indexOf(\"style\") != -1\r\n&& a.getAttribute(\"rel\").indexOf(\"alt\") == -1\r\n&& a.getAttribute(\"title\")\r\n) return a.getAttribute(\"title\");\r\n}\r\nreturn null;\r\n}\r\n\r\nfunction createCookie(name,value,days) {\r\nif (days) {\r\nvar date = new Date();\r\ndate.setTime(date.getTime()+(days*24*60*60*1000));\r\nvar expires = \"; expires=\"+date.toGMTString();\r\n}\r\nelse expires = \"\";\r\ndocument.cookie = name+\"=\"+value+expires+\"; path=\/\";\r\n}\r\n\r\nfunction readCookie(name) {\r\nvar nameEQ = name + \"=\";\r\nvar ca = document.cookie.split(';');\r\nfor(var i=0;i < ca.length;i++) {\r\nvar c = ca[i];\r\nwhile (c.charAt(0)==' ') c = c.substring(1,c.length);\r\nif (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);\r\n}\r\nreturn null;\r\n}\r\n\r\nwindow.onload = function(e) {\r\nvar cookie = readCookie(\"style\");\r\nvar title = cookie ? cookie : getPreferredStyleSheet();\r\nsetActiveStyleSheet(title);\r\n}\r\n\r\nwindow.onunload = function(e) {\r\nvar title = getActiveStyleSheet();\r\ncreateCookie(\"style\", title, 365);\r\n}\r\n\r\nvar cookie = readCookie(\"style\");\r\nvar title = cookie ? cookie : getPreferredStyleSheet();\r\nsetActiveStyleSheet(title);\r\n
Estilos CSS<\/h6>\r\n\/*    compacto.css    *\/\r\n\r\ndiv.imagen {\r\nwidth: 40%;\r\nborder: thin silver solid;\r\nmargin-right: 1em;\r\npadding: 0.5em;\r\nfloat: left;\r\n}\r\n\r\ndiv.imagen img {\r\npadding:0!important;\r\nmargin:0!important;\r\nborder:none!important;\r\n}\r\n\r\ndiv.imagen p {\r\ntext-align: center;\r\nfont-style: italic;\r\nfont-size: smaller;\r\ntext-indent: 0;\r\n}\r\n\r\nimg.escala {\r\nwidth: 100%;\r\n}\r\ndiv.texto {\r\nwidth: 55%;\r\ntext-align:justify;\r\nvertical-align:top;\r\nfloat: left;\r\n}\r\n\r\n#contenedor {\r\nwidth:100%;\r\nmargin-right:auto;\r\nmargin-left:auto;\r\nmargin-bottom:1em;\r\noverflow:auto;\r\n}\r\n\r\nh1 {\r\nmargin:0;\r\n\r\n}\r\n\r\ndiv.texto p    {\r\nmargin:0;\r\n}\r\n\r\n.leer_mas    {\r\ndisplay:none;\r\n}\r\n\r\n#mostrar_ocultar {\r\ndisplay: none; \/\/ Este valor hace referencia a que cuando se carge la pagina se encuentre oculto\r\n}\r\n\r\n\/*  extendido.css  *\/\r\n\r\ndiv.imagen {\r\nborder:thin solid silver;\r\npadding:0.5em;\r\nwidth:100%;\r\n}\r\n\r\ndiv.imagen p {\r\ntext-align: center;\r\nfont-style: italic;\r\nfont-size: smaller;\r\ntext-indent: 0;\r\n}\r\n\r\nimg.escala {\r\nwidth: 100%;\r\n}\r\n\r\ndiv.texto {\r\nwidth: 100%;\r\npadding:0.5em;\r\ntext-align:justify;\r\nmargin:0;\r\nvertical-align:top;\r\n}\r\n\r\n#contenedor {\r\nwidth:100%;\r\nmargin-top:1em;\r\n}\r\n\r\nh1 {\r\nmargin-bottom:0.5em;\r\n}\r\n\r\ndiv.textop p    {\r\nmargin:0;\r\n}\r\n.leer_mas    {\r\ndisplay:block;\r\n}\r\n\r\ndiv.imagen img {\r\npadding:0!important;\r\nmargin:0!important;\r\nborder:none!important;\r\n}<\/pre>\n<\/div>\n","protected":false},"excerpt":{"rendered":"Una p\u00e1gina web puede disponer de varias hojas de estilo que se adapten a las diferentes necesidades o preferencias del usuario. Desde el punto de vista de la accesibilidad y la funcionalidad esto es una gran ventaja. Para alternar entre varios estilos, primero hay que confeccionar las hojas de estilos que se deseen y luego […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[15],"tags":[29,17,18],"_links":{"self":[{"href":"https:\/\/www.pcpolis.es\/blog\/wp-json\/wp\/v2\/posts\/184"}],"collection":[{"href":"https:\/\/www.pcpolis.es\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.pcpolis.es\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.pcpolis.es\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.pcpolis.es\/blog\/wp-json\/wp\/v2\/comments?post=184"}],"version-history":[{"count":10,"href":"https:\/\/www.pcpolis.es\/blog\/wp-json\/wp\/v2\/posts\/184\/revisions"}],"predecessor-version":[{"id":188,"href":"https:\/\/www.pcpolis.es\/blog\/wp-json\/wp\/v2\/posts\/184\/revisions\/188"}],"wp:attachment":[{"href":"https:\/\/www.pcpolis.es\/blog\/wp-json\/wp\/v2\/media?parent=184"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.pcpolis.es\/blog\/wp-json\/wp\/v2\/categories?post=184"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.pcpolis.es\/blog\/wp-json\/wp\/v2\/tags?post=184"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

Enlaces Relacionados<\/h5>\nW3C<\/a> | illasaron.com<\/a> | conclase.net<\/a><\/p>\n

Enlaces Relacionados<\/h5>\n
W3C<\/a> | illasaron.com<\/a> | conclase.net<\/a><\/p>\n