{"id":389,"date":"2018-01-04T13:30:56","date_gmt":"2018-01-04T13:30:56","guid":{"rendered":"http:\/\/www.josejavierfm.es\/blog\/?p=389"},"modified":"2018-01-04T13:30:56","modified_gmt":"2018-01-04T13:30:56","slug":"jugando-con-imagenes-en-jquery-anadir-texto-y-reemplazar-texto","status":"publish","type":"post","link":"https:\/\/www.josejavierfm.es\/blog\/2018\/01\/04\/jugando-con-imagenes-en-jquery-anadir-texto-y-reemplazar-texto\/","title":{"rendered":"Jugando con imagenes en jquery (a\u00f1adir texto y reemplazar texto )"},"content":{"rendered":"<p>A\u00f1adir automaticamente una leyenda a una imagen con su texto alternativo o poder cambiar las imagenes por un div con el mismo tama\u00f1o que la imagen y como contenido el texto alternativo.<\/p>\n<p>Para ello nos hace falta JQuery y estilo css<\/p>\n<p>Dada una imagen<br \/>\n<img decoding=\"async\" src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/1\/19\/Bachs_Familiy.jpg\" \/><br \/>\nLo que obtenemos es la misma imagen pero con una leyenda inferior<\/p>\n<p> <a href=\"http:\/\/www.josejavierfm.es\/blog\/wp-content\/uploads\/2018\/01\/blog-jugando-con-imagenes-en-jquery-anadir-texto-y-reemplazar-texto-2018-01-04-14-29-16-create-a-new-fiddle-jsfiddle.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-391\" src=\"http:\/\/www.josejavierfm.es\/blog\/wp-content\/uploads\/2018\/01\/blog-jugando-con-imagenes-en-jquery-anadir-texto-y-reemplazar-texto-2018-01-04-14-29-16-create-a-new-fiddle-jsfiddle-300x244.png\" alt=\"\" width=\"300\" height=\"244\" srcset=\"https:\/\/www.josejavierfm.es\/blog\/wp-content\/uploads\/2018\/01\/blog-jugando-con-imagenes-en-jquery-anadir-texto-y-reemplazar-texto-2018-01-04-14-29-16-create-a-new-fiddle-jsfiddle-300x244.png 300w, https:\/\/www.josejavierfm.es\/blog\/wp-content\/uploads\/2018\/01\/blog-jugando-con-imagenes-en-jquery-anadir-texto-y-reemplazar-texto-2018-01-04-14-29-16-create-a-new-fiddle-jsfiddle.png 400w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>La otra variante oculta la imagen y en su lugar muestra un hueco del mismo tama\u00f1o pero con el texto alternativo como contenido.<br \/>\n<a href=\"http:\/\/www.josejavierfm.es\/blog\/wp-content\/uploads\/2018\/01\/blog-jugando-con-imagenes-en-jquery-anadir-texto-y-reemplazar-texto-2018-01-04-14-29-49-create-a-new-fiddle-jsfiddle.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-390\" src=\"http:\/\/www.josejavierfm.es\/blog\/wp-content\/uploads\/2018\/01\/blog-jugando-con-imagenes-en-jquery-anadir-texto-y-reemplazar-texto-2018-01-04-14-29-49-create-a-new-fiddle-jsfiddle-300x223.png\" alt=\"\" width=\"300\" height=\"223\" srcset=\"https:\/\/www.josejavierfm.es\/blog\/wp-content\/uploads\/2018\/01\/blog-jugando-con-imagenes-en-jquery-anadir-texto-y-reemplazar-texto-2018-01-04-14-29-49-create-a-new-fiddle-jsfiddle-300x223.png 300w, https:\/\/www.josejavierfm.es\/blog\/wp-content\/uploads\/2018\/01\/blog-jugando-con-imagenes-en-jquery-anadir-texto-y-reemplazar-texto-2018-01-04-14-29-49-create-a-new-fiddle-jsfiddle.png 413w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>El ejemplo completo se puede ver <a href=\"https:\/\/jsfiddle.net\/7ayd63pd\/\" target=\"_blank\" rel=\"noopener noreferrer\">aqu\u00ed<\/a><\/p>\n\n<div class=\"twitter-share\"><a href=\"https:\/\/twitter.com\/intent\/tweet?via=josejavierfm\" class=\"twitter-share-button\">Twittear<\/a><\/div>\n","protected":false},"excerpt":{"rendered":"<p>A\u00f1adir automaticamente una leyenda a una imagen con su texto alternativo o poder cambiar las imagenes por un div con el mismo tama\u00f1o que la imagen y como contenido el texto alternativo. Para ello nos hace falta JQuery y estilo css Dada una imagen Lo que obtenemos es la misma imagen pero con una leyenda [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[13,14,10],"tags":[],"_links":{"self":[{"href":"https:\/\/www.josejavierfm.es\/blog\/wp-json\/wp\/v2\/posts\/389"}],"collection":[{"href":"https:\/\/www.josejavierfm.es\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.josejavierfm.es\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.josejavierfm.es\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.josejavierfm.es\/blog\/wp-json\/wp\/v2\/comments?post=389"}],"version-history":[{"count":1,"href":"https:\/\/www.josejavierfm.es\/blog\/wp-json\/wp\/v2\/posts\/389\/revisions"}],"predecessor-version":[{"id":392,"href":"https:\/\/www.josejavierfm.es\/blog\/wp-json\/wp\/v2\/posts\/389\/revisions\/392"}],"wp:attachment":[{"href":"https:\/\/www.josejavierfm.es\/blog\/wp-json\/wp\/v2\/media?parent=389"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.josejavierfm.es\/blog\/wp-json\/wp\/v2\/categories?post=389"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.josejavierfm.es\/blog\/wp-json\/wp\/v2\/tags?post=389"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}