001/* 002 * Licensed to the Apache Software Foundation (ASF) under one or more 003 * contributor license agreements. See the NOTICE file distributed with 004 * this work for additional information regarding copyright ownership. 005 * The ASF licenses this file to You under the Apache License, Version 2.0 006 * (the "License"); you may not use this file except in compliance with 007 * the License. You may obtain a copy of the License at 008 * 009 * http://www.apache.org/licenses/LICENSE-2.0 010 * 011 * Unless required by applicable law or agreed to in writing, software 012 * distributed under the License is distributed on an "AS IS" BASIS, 013 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 014 * See the License for the specific language governing permissions and 015 * limitations under the License. 016 */ 017package org.apache.juneau.bean.html5; 018 019import java.net.*; 020 021import org.apache.juneau.marshall.*; 022 023/** 024 * DTO for an HTML <a class="doclink" href="https://www.w3.org/TR/html5/embedded-content-0.html#the-img-element"><img></a> 025 * element. 026 * 027 * <p> 028 * The img element represents an image in the document. It is a void element that embeds an image 029 * into the page. The alt attribute is required for accessibility, providing alternative text 030 * for screen readers and when images cannot be displayed. 031 * 032 * <h5 class='section'>Examples:</h5> 033 * <p class='bcode w800'> 034 * <jk>import static</jk> org.apache.juneau.bean.html5.HtmlBuilder.*; 035 * 036 * <jc>// Simple image with alt text</jc> 037 * Img <jv>img1</jv> = <jsm>img</jsm>() 038 * .src(<js>"photo.jpg"</js>) 039 * .alt(<js>"A beautiful sunset over the mountains"</js>); 040 * 041 * <jc>// Image with dimensions and styling</jc> 042 * Img <jv>img2</jv> = <jsm>img</jsm>() 043 * .src(<js>"logo.png"</js>) 044 * .alt(<js>"Company Logo"</js>) 045 * .width(<js>"200"</js>) 046 * .height(<js>"100"</js>) 047 * .class_(<js>"logo"</js>); 048 * 049 * <jc>// Image with CORS and image map</jc> 050 * Img <jv>img3</jv> = <jsm>img</jsm>() 051 * .src(<js>"https://example.com/image.jpg"</js>) 052 * .alt(<js>"Interactive image"</js>) 053 * .crossorigin(<js>"anonymous"</js>) 054 * .usemap(<js>"#imagemap"</js>); 055 * 056 * <jc>// Responsive image with multiple sources</jc> 057 * Img <jv>img4</jv> = <jsm>img</jsm>() 058 * .src(<js>"image-800w.jpg"</js>) 059 * .alt(<js>"Responsive image"</js>) 060 * .sizes(<js>"(max-width: 600px) 100vw, 50vw"</js>) 061 * .srcset(<js>"image-400w.jpg 400w, image-800w.jpg 800w"</js>); 062 * </p> 063 * 064 * <p> 065 * The following convenience methods are provided for constructing instances of this bean: 066 * <ul class='javatree'> 067 * <li class='jc'>{@link HtmlBuilder} 068 * <ul class='javatree'> 069 * <li class='jm'>{@link HtmlBuilder#img() img()} 070 * </ul> 071 * </ul> 072 * </p> 073 * 074 * <h5 class='section'>See Also:</h5><ul> 075 * <li class='link'><a class="doclink" href="https://juneau.apache.org/docs/topics/JuneauBeanHtml5">juneau-bean-html5</a> 076 * </ul> 077 */ 078@Marshalled(typeName = "img") 079public class Img extends HtmlElementVoid<Img> { 080 081 /** 082 * Creates an empty {@link Img} element. 083 */ 084 public Img() {} 085 086 /** 087 * Creates an {@link Img} element with the specified {@link Img#src(Object)} attribute. 088 * 089 * @param src The {@link Img#src(Object)} attribute. Can be <jk>null</jk>, in which case the attribute is stored with a <jk>null</jk> value (not removed). 090 */ 091 public Img(Object src) { 092 src(src); 093 } 094 095 /** 096 * <a class="doclink" href="https://www.w3.org/TR/html5/embedded-content-0.html#attr-img-alt">alt</a> attribute. 097 * 098 * <p> 099 * Specifies alternative text for the image. This text is displayed when the image cannot be loaded 100 * and is used by screen readers for accessibility. 101 * 102 * <p> 103 * The alt text should be descriptive and convey the same information as the image. 104 * 105 * @param value Alternative text for the image. Can be <jk>null</jk> to unset the attribute. 106 * @return This object. 107 */ 108 public Img alt(String value) { 109 attr("alt", value); 110 return this; 111 } 112 113 /** 114 * <a class="doclink" href="https://www.w3.org/TR/html5/embedded-content-0.html#attr-img-crossorigin">crossorigin</a> 115 * attribute. 116 * 117 * <p> 118 * Specifies how the element handles cross-origin requests for CORS (Cross-Origin Resource Sharing). 119 * 120 * <p> 121 * Possible values: 122 * <ul> 123 * <li><js>"anonymous"</js> - Cross-origin requests are made without credentials</li> 124 * <li><js>"use-credentials"</js> - Cross-origin requests include credentials</li> 125 * </ul> 126 * 127 * @param value How to handle cross-origin requests. Can be <jk>null</jk> to unset the attribute. 128 * @return This object. 129 */ 130 public Img crossorigin(String value) { 131 attr("crossorigin", value); 132 return this; 133 } 134 135 /** 136 * <a class="doclink" href="https://www.w3.org/TR/html5/embedded-content-0.html#attr-dim-height">height</a> 137 * attribute. 138 * 139 * <p> 140 * Vertical dimension. 141 * 142 * @param value 143 * The new value for this attribute. 144 * Typically a {@link Number} or {@link String}. 145 * Can be <jk>null</jk> to unset the attribute. 146 * @return This object. 147 */ 148 public Img height(Object value) { 149 attr("height", value); 150 return this; 151 } 152 153 /** 154 * <a class="doclink" href="https://www.w3.org/TR/html5/embedded-content-0.html#attr-img-ismap">ismap</a> attribute. 155 * 156 * <p> 157 * Whether the image is a server-side image map. 158 * 159 * <p> 160 * This attribute uses deminimized values: 161 * <ul> 162 * <li><jk>false</jk> - Attribute is not added</li> 163 * <li><jk>true</jk> - Attribute is added as <js>"ismap"</js></li> 164 * <li>Other values - Passed through as-is</li> 165 * </ul> 166 * 167 * @param value 168 * The new value for this attribute. 169 * Typically a {@link Boolean} or {@link String}. 170 * Can be <jk>null</jk> to unset the attribute. 171 * @return This object. 172 */ 173 public Img ismap(Object value) { 174 attr("ismap", deminimize(value, "ismap")); 175 return this; 176 } 177 178 /** 179 * <a class="doclink" href="https://www.w3.org/TR/html5/embedded-content-0.html#attr-img-src">src</a> attribute. 180 * 181 * <p> 182 * Address of the resource. 183 * 184 * <p> 185 * The value can be of any of the following types: {@link URI}, {@link URL}, {@link String}. 186 * Strings must be valid URIs. 187 * 188 * <p> 189 * URIs defined by {@link UriResolver} can be used for values. 190 * 191 * @param value 192 * The new value for this attribute. 193 * Typically a {@link URL} or {@link String}. 194 * Can be <jk>null</jk>, in which case the attribute is stored with a <jk>null</jk> value (not removed). 195 * @return This object. 196 */ 197 public Img src(Object value) { 198 attrUri("src", value); 199 return this; 200 } 201 202 /** 203 * <a class="doclink" href="https://www.w3.org/TR/html5/embedded-content-0.html#attr-hyperlink-usemap">usemap</a> 204 * attribute. 205 * 206 * <p> 207 * Specifies the name of an image map to use with this image. The value should correspond to 208 * the name attribute of a map element that defines clickable areas on the image. 209 * 210 * <p> 211 * The value should start with "#" followed by the name of the map element. 212 * 213 * @param value The name of the image map to use (e.g., "#mymap"). Can be <jk>null</jk> to unset the attribute. 214 * @return This object. 215 */ 216 public Img usemap(String value) { 217 attr("usemap", value); 218 return this; 219 } 220 221 /** 222 * <a class="doclink" href="https://www.w3.org/TR/html5/embedded-content-0.html#attr-dim-width">width</a> attribute. 223 * 224 * <p> 225 * Horizontal dimension. 226 * 227 * @param value 228 * The new value for this attribute. 229 * Typically a {@link Number} or {@link String}. 230 * Can be <jk>null</jk> to unset the attribute. 231 * @return This object. 232 */ 233 public Img width(Object value) { 234 attr("width", value); 235 return this; 236 } 237}