{"id":1763,"date":"2014-06-13T11:50:19","date_gmt":"2014-06-13T09:50:19","guid":{"rendered":"http:\/\/descartesjs.org\/documentacion\/?p=1763"},"modified":"2021-08-07T17:27:07","modified_gmt":"2021-08-07T16:27:07","slug":"imagenes-en-controles-tipo-boton","status":"publish","type":"post","link":"https:\/\/reddescartes.org\/documentacion\/imagenes-en-controles-tipo-boton\/","title":{"rendered":"Im\u00e1genes en controles num\u00e9ricos tipo bot\u00f3n"},"content":{"rendered":"<p style=\"text-align: left;\"><span style=\"line-height: 1.5em;\">Descartes ofrece las opciones color para decorar los botones que vamos a utilizar en una escena; sin embargo, tambi\u00e9n tenemos la posibilidad de asociar una imagen a este tipo de control. En la siguiente imagen se observa como se puede asociar una imagen a un bot\u00f3n (en la ruta imagenes\/btn1.png). Es importante definir el tama\u00f1o del bot\u00f3n en la casilla <\/span><strong style=\"line-height: 1.5em;\">pos<\/strong><span style=\"line-height: 1.5em;\"> que, para el ejemplo, es 129&#215;30.<\/span><\/p>\n<div style=\"text-align: left;\"><a href=\"https:\/\/descartesjs.org\/documentacion\/wp-content\/uploads\/2014\/04\/boton1.png\"><img class=\" wp-image-1364 aligncenter\" src=\"https:\/\/descartesjs.org\/documentacion\/wp-content\/uploads\/2014\/04\/boton1.png\" alt=\"boton1\" width=\"1084\" height=\"414\" srcset=\"https:\/\/reddescartes.org\/documentacion\/wp-content\/uploads\/2014\/04\/boton1.png 1505w, https:\/\/reddescartes.org\/documentacion\/wp-content\/uploads\/2014\/04\/boton1-300x114.png 300w, https:\/\/reddescartes.org\/documentacion\/wp-content\/uploads\/2014\/04\/boton1-1024x390.png 1024w\" sizes=\"(max-width: 1084px) 100vw, 1084px\" \/><\/a><\/div>\n<div style=\"text-align: left;\"><\/div>\n<div style=\"text-align: left;\"><a href=\"https:\/\/descartesjs.org\/documentacion\/wp-content\/uploads\/2014\/04\/boton2.png\"><img class=\"alignright\" src=\"https:\/\/descartesjs.org\/documentacion\/wp-content\/uploads\/2014\/04\/boton2.png\" alt=\"boton2\" width=\"157\" height=\"232\" \/><\/a><\/div>\n<div style=\"text-align: left;\"><\/div>\n<div style=\"text-align: left;\"><\/div>\n<div style=\"text-align: left;\"><span style=\"line-height: 1.5em;\">En la siguiente escena, se emplean varias im\u00e1genes para un bot\u00f3n como las que se muestran en la imagen de la derecha. Descartes, tambi\u00e9n, reconoce la imagen asociada al bot\u00f3n con el sufijo _over; es decir, si el tenemos el bot\u00f3n con nombre btn1.png y su asociado btn1_over.png, esta \u00faltima se visiona cuando pasamos el puntero del rat\u00f3n sobre el bot\u00f3n. Y an\u00e1logamente con el sufijo _down al pulsar dicho bot\u00f3n.<\/span><\/div>\n<div style=\"text-align: left;\"><\/div>\n<div style=\"text-align: left;\">En la escena, haz clic varias veces sobre el bot\u00f3n para que observes algunos de los dise\u00f1os utilizados que son<a href=\"https:\/\/www.freebuttons.com\/index.php\"> im\u00e1genes de dominio p\u00fablico<\/a>. Por otra parte, hemos incluido unos marcos adicionales en la opci\u00f3n gr\u00e1ficos del editor, como una muestra m\u00e1s de lo que podemos hacer con las im\u00e1genes.<\/div>\n<div style=\"text-align: left;\"><\/div>\n<div style=\"text-align: left;\">Practica, entonces, con la siguiente escena, para que observes las diferentes opciones que permiten incorporar im\u00e1genes en un espacio:\u00a0<a href=\"https:\/\/descartesjs.org\/documentacion\/?p=1358\">fondo<\/a>, botones y <a href=\"https:\/\/descartesjs.org\/documentacion\/?cat=41\">gr\u00e1ficos 2D<\/a><\/div>\n<div style=\"text-align: left;\"><\/div>\n<div style=\"text-align: left;\"><strong><span style=\"color: #339966; font-size: 1.5em; line-height: 1.5em;\">Escena interactiva<\/span><\/strong><\/div>\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\/ejemplo3.html\" width=\"650\" height=\"440\" 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","protected":false},"excerpt":{"rendered":"<p>Descartes ofrece las opciones color para decorar los botones que vamos a utilizar en una escena; sin embargo, tambi\u00e9n tenemos la posibilidad de asociar una imagen a este tipo de control. En la siguiente imagen se observa como se puede asociar una imagen a un bot\u00f3n (en la ruta imagenes\/btn1.png). Es importante definir el tama\u00f1o del bot\u00f3n en la casilla pos que, para el ejemplo, es 129&#215;30. En la siguiente escena, se emplean varias im\u00e1genes para un bot\u00f3n como las que se muestran en la imagen de la derecha. Descartes, tambi\u00e9n, reconoce la imagen asociada al bot\u00f3n con el sufijo<\/p>\n<a class=\"more-link\" rel=\"nofollow\" href=\"https:\/\/reddescartes.org\/documentacion\/imagenes-en-controles-tipo-boton\/\">[Leer m\u00e1s...]<\/a>","protected":false},"author":9,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[28,35,41],"tags":[],"_links":{"self":[{"href":"https:\/\/reddescartes.org\/documentacion\/wp-json\/wp\/v2\/posts\/1763"}],"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\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/reddescartes.org\/documentacion\/wp-json\/wp\/v2\/comments?post=1763"}],"version-history":[{"count":6,"href":"https:\/\/reddescartes.org\/documentacion\/wp-json\/wp\/v2\/posts\/1763\/revisions"}],"predecessor-version":[{"id":3531,"href":"https:\/\/reddescartes.org\/documentacion\/wp-json\/wp\/v2\/posts\/1763\/revisions\/3531"}],"wp:attachment":[{"href":"https:\/\/reddescartes.org\/documentacion\/wp-json\/wp\/v2\/media?parent=1763"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/reddescartes.org\/documentacion\/wp-json\/wp\/v2\/categories?post=1763"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/reddescartes.org\/documentacion\/wp-json\/wp\/v2\/tags?post=1763"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}