{"id":1358,"date":"2014-04-11T04:39:53","date_gmt":"2014-04-11T02:39:53","guid":{"rendered":"http:\/\/descartesjs.org\/documentacion\/?p=1358"},"modified":"2021-08-07T16:09:17","modified_gmt":"2021-08-07T15:09:17","slug":"imagenes-en-espacios-y-controles-tipo-boton","status":"publish","type":"post","link":"https:\/\/reddescartes.org\/documentacion\/imagenes-en-espacios-y-controles-tipo-boton\/","title":{"rendered":"Im\u00e1genes de fondo en espacios"},"content":{"rendered":"<p><span style=\"line-height: 1.5em;\">En algunas escenas es conveniente utilizar una imagen de fondo. Algunas veces, porque obedecen a un patr\u00f3n de dise\u00f1o en un proyecto espec\u00edfico, como el que se observa en la siguiente imagen:<\/span><\/p>\n<p style=\"text-align: center;\"><a href=\"https:\/\/descartesjs.org\/documentacion\/wp-content\/uploads\/2014\/04\/fondo3.png\"><img class=\" wp-image-1359 aligncenter\" src=\"https:\/\/descartesjs.org\/documentacion\/wp-content\/uploads\/2014\/04\/fondo3.png\" alt=\"fondo3\" width=\"834\" height=\"498\" srcset=\"https:\/\/reddescartes.org\/documentacion\/wp-content\/uploads\/2014\/04\/fondo3.png 1043w, https:\/\/reddescartes.org\/documentacion\/wp-content\/uploads\/2014\/04\/fondo3-300x179.png 300w, https:\/\/reddescartes.org\/documentacion\/wp-content\/uploads\/2014\/04\/fondo3-1024x611.png 1024w\" sizes=\"(max-width: 834px) 100vw, 834px\" \/><\/a><\/p>\n<p style=\"text-align: left;\">La imagen de fondo se define en el campo de texto etiquetado como imagen, escribiendo la ruta donde se encuentra la misma.<\/p>\n<p style=\"text-align: center;\"><a href=\"https:\/\/descartesjs.org\/documentacion\/wp-content\/uploads\/2014\/04\/fondo2.png\"><img class=\" wp-image-1360 aligncenter\" src=\"https:\/\/descartesjs.org\/documentacion\/wp-content\/uploads\/2014\/04\/fondo2.png\" alt=\"fondo2\" width=\"811\" height=\"303\" srcset=\"https:\/\/reddescartes.org\/documentacion\/wp-content\/uploads\/2014\/04\/fondo2.png 901w, https:\/\/reddescartes.org\/documentacion\/wp-content\/uploads\/2014\/04\/fondo2-300x112.png 300w\" sizes=\"(max-width: 811px) 100vw, 811px\" \/><\/a><\/p>\n<p>Su posicionamiento queda indicado mediante el selector despl_imagen que puede tomar cuatro valores:<\/p>\n<p><img class=\"size-full wp-image-1361 aligncenter\" src=\"https:\/\/descartesjs.org\/documentacion\/wp-content\/uploads\/2014\/04\/fondo0.png\" alt=\"fondo0\" width=\"295\" height=\"179\" \/><\/p>\n<ul>\n<li>arr-izq: posiciona la imagen arriba a la izquierda.<\/li>\n<li>expand.: escala la imagen para que ocupe completamente el tama\u00f1o del espacio, obviamente dependiendo de la imagen este cambio de escala puede puede influir en la calidad de la misma.<\/li>\n<li>mosaico: que reproduce la imagen tantas veces como sea necesario para teselar completamente el fondo del espacio.<\/li>\n<li>centrada: la ubica en el centro del espacio.<\/li>\n<\/ul>\n<p>Si el peso de la imagen es muy elevado puede tardar en reflejarse en la escena. Como alternativa para evitar el uso de im\u00e1genes muy pesadas se dispone de la opci\u00f3n <strong>mosaico<\/strong>\u00a0indicada antes.\u00a0Esta opci\u00f3n permite que usemos im\u00e1genes muy peque\u00f1as, que se desplegar\u00e1n en todo el fondo del espacio. En la siguiente escena, se han empleado varios fondos usando im\u00e1genes de <a href=\" https:\/\/www.allfreebackgrounds.com\/background_select.html\">dominio p\u00fablico<\/a> cuyo tama\u00f1o no es superior a los 10 KB.<\/p>\n<table border=\"0\">\n<tbody>\n<tr>\n<td><img class=\"aligncenter size-full wp-image-1770\" src=\"https:\/\/descartesjs.org\/documentacion\/wp-content\/uploads\/2014\/04\/fondo1.jpg\" alt=\"fondo1\" width=\"250\" height=\"130\" \/><\/td>\n<td><img class=\"aligncenter size-large wp-image-1771\" src=\"https:\/\/descartesjs.org\/documentacion\/wp-content\/uploads\/2014\/04\/fondo2.jpg\" alt=\"fondo2\" width=\"90\" height=\"98\" \/><\/td>\n<td><img class=\"aligncenter size-large wp-image-1772\" src=\"https:\/\/descartesjs.org\/documentacion\/wp-content\/uploads\/2014\/04\/fondo3.jpg\" alt=\"fondo3\" width=\"96\" height=\"96\" \/><\/td>\n<td><img class=\"aligncenter size-large wp-image-1773\" src=\"https:\/\/descartesjs.org\/documentacion\/wp-content\/uploads\/2014\/04\/fondo4.jpg\" alt=\"fondo4\" width=\"256\" height=\"128\" \/><\/td>\n<\/tr>\n<tr>\n<td><img class=\"aligncenter size-large wp-image-1774\" src=\"https:\/\/descartesjs.org\/documentacion\/wp-content\/uploads\/2014\/04\/fondo5.jpg\" alt=\"fondo5\" width=\"159\" height=\"159\" srcset=\"https:\/\/reddescartes.org\/documentacion\/wp-content\/uploads\/2014\/04\/fondo5.jpg 159w, https:\/\/reddescartes.org\/documentacion\/wp-content\/uploads\/2014\/04\/fondo5-150x150.jpg 150w\" sizes=\"(max-width: 159px) 100vw, 159px\" \/><\/td>\n<td><img class=\"aligncenter size-large wp-image-1775\" src=\"https:\/\/descartesjs.org\/documentacion\/wp-content\/uploads\/2014\/04\/fondo6.jpg\" alt=\"fondo6\" width=\"128\" height=\"128\" \/><\/td>\n<td><img class=\"aligncenter size-large wp-image-1776\" src=\"https:\/\/descartesjs.org\/documentacion\/wp-content\/uploads\/2014\/04\/fondo7.jpg\" alt=\"fondo7\" width=\"128\" height=\"128\" \/><\/td>\n<td><img class=\"aligncenter size-large wp-image-1777\" src=\"https:\/\/descartesjs.org\/documentacion\/wp-content\/uploads\/2014\/04\/fondo8.gif\" alt=\"fondo8\" width=\"128\" height=\"128\" \/><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h2 style=\"text-align: left;\"><span style=\"color: #339966;\">Escena interactiva<\/span><\/h2>\n<h2 style=\"text-align: center;\"><span style=\"font-size: 14px; line-height: 1.5em;\">\n<!-- iframe plugin v.4.5 wordpress.org\/plugins\/iframe\/ -->\n<iframe src=\"https:\/\/descartesjs.org\/repositorio\/documentacion_4D\/Imagenes_JS\/ejemplo4.html\" width=\"620\" height=\"420\" scrolling=\"yes\" class=\"iframe-class\" frameborder=\"0\"><\/iframe>\n<\/span><\/h2>\n<p style=\"text-align: center;\">(Puede descargar la escena anterior desde <a href=\"https:\/\/descartesjs.org\/repositorio\/documentacion_4D\/Imagenes_JS.zip\">este enlace<\/a>)<\/p>\n<div style=\"text-align: center;\"><\/div>\n","protected":false},"excerpt":{"rendered":"<p>En algunas escenas es conveniente utilizar una imagen de fondo. Algunas veces, porque obedecen a un patr\u00f3n de dise\u00f1o en un proyecto espec\u00edfico, como el que se observa en la siguiente imagen: La imagen de fondo se define en el campo de texto etiquetado como imagen, escribiendo la ruta donde se encuentra la misma. Su posicionamiento queda indicado mediante el selector despl_imagen que puede tomar cuatro valores: arr-izq: posiciona la imagen arriba a la izquierda. expand.: escala la imagen para que ocupe completamente el tama\u00f1o del espacio, obviamente dependiendo de la imagen este cambio de escala puede puede influir en<\/p>\n<a class=\"more-link\" rel=\"nofollow\" href=\"https:\/\/reddescartes.org\/documentacion\/imagenes-en-espacios-y-controles-tipo-boton\/\">[Leer m\u00e1s...]<\/a>","protected":false},"author":6,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[41],"tags":[],"_links":{"self":[{"href":"https:\/\/reddescartes.org\/documentacion\/wp-json\/wp\/v2\/posts\/1358"}],"collection":[{"href":"https:\/\/reddescartes.org\/documentacion\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/reddescartes.org\/documentacion\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/reddescartes.org\/documentacion\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/reddescartes.org\/documentacion\/wp-json\/wp\/v2\/comments?post=1358"}],"version-history":[{"count":17,"href":"https:\/\/reddescartes.org\/documentacion\/wp-json\/wp\/v2\/posts\/1358\/revisions"}],"predecessor-version":[{"id":3497,"href":"https:\/\/reddescartes.org\/documentacion\/wp-json\/wp\/v2\/posts\/1358\/revisions\/3497"}],"wp:attachment":[{"href":"https:\/\/reddescartes.org\/documentacion\/wp-json\/wp\/v2\/media?parent=1358"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/reddescartes.org\/documentacion\/wp-json\/wp\/v2\/categories?post=1358"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/reddescartes.org\/documentacion\/wp-json\/wp\/v2\/tags?post=1358"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}