Miksi HTML-kuvan vaihtoehtoinen teksti ei näy hiiren päällä

Toisin kuin Microsoft Internet Explorer -selain, Mozilla Firefox, Google Chrome ja muut selaimet eivät näytä alt-attribuutissa käytettyä tekstiä vietäessä hiiren osoitinta kuvan päälle. Vaihtoehtoinen teksti on suunniteltu näytettäväksi, kun kuva ei lataudu, kun taas otsikkoteksti on suunniteltu näyttämään ilmapalloteksti kuville, jotka latautuvat. Firefox, Chrome ja muut selaimet (paitsi Internet Explorer) noudattavat W3C:n HTML-standardeja, joiden mukaan kuvassa tulee olla otsikko-attribuutti ilmapallotekstiä varten. Tästä syystä nämä selaimet eivät näytä vaihtoehtoista tekstiä vietäessä hiiren osoitinta kuvan päälle.

Jos haluat ilmapallotekstin näkyvän, kun hiiri vie hiiren kuvan päälle, lisää “otsikko” img-HTML-tunnisteeseen alla olevan esimerkkikoodin mukaisesti.

Miksi HTML-kuvan vaihtoehtoinen teksti ei näy hiiren päällä
Kuva, jossa on vain alt-attribuutti.
(Ei näytä ilmapallotekstiä.)

<img alt="Example of alt text" src="https://www.computerhope.com/cdn/media/logo-200-gray.png">

Miksi HTML-kuvan vaihtoehtoinen teksti ei näy hiiren päällä
Kuva sekä alt- että title-määritteillä.
(Näyttää ilmapallotekstin hiiren osoitin.)

<img alt="Example of alt text" title="Example of title text" src="https://www.computerhope.com/cdn/media/logo-200-gray.png">

Jos käytät Mozilla Firefoxia tai Google Chromea, ensimmäisessä esimerkissä ei näy ilmapallotekstiä, vaan koodissa on vain alt-attribuutti. Kuitenkin otsikko-attribuutin lisääminen, kuten toisessa esimerkissä näkyy, näyttää ilmapallotekstiä, kun hiiri vie hiiren kuvan päälle.

Recent Articles

spot_img

Related Stories

Stay on op - Ge the daily news in your inbox

[tdn_block_newsletter_subscribe input_placeholder="Email address" btn_text="Subscribe" tds_newsletter2-image="730" tds_newsletter2-image_bg_color="#c3ecff" tds_newsletter3-input_bar_display="" tds_newsletter4-image="731" tds_newsletter4-image_bg_color="#fffbcf" tds_newsletter4-btn_bg_color="#f3b700" tds_newsletter4-check_accent="#f3b700" tds_newsletter5-tdicon="tdc-font-fa tdc-font-fa-envelope-o" tds_newsletter5-btn_bg_color="#000000" tds_newsletter5-btn_bg_color_hover="#4db2ec" tds_newsletter5-check_accent="#000000" tds_newsletter6-input_bar_display="row" tds_newsletter6-btn_bg_color="#da1414" tds_newsletter6-check_accent="#da1414" tds_newsletter7-image="732" tds_newsletter7-btn_bg_color="#1c69ad" tds_newsletter7-check_accent="#1c69ad" tds_newsletter7-f_title_font_size="20" tds_newsletter7-f_title_font_line_height="28px" tds_newsletter8-input_bar_display="row" tds_newsletter8-btn_bg_color="#00649e" tds_newsletter8-btn_bg_color_hover="#21709e" tds_newsletter8-check_accent="#00649e" embedded_form_code="YWN0aW9uJTNEJTIybGlzdC1tYW5hZ2UuY29tJTJGc3Vic2NyaWJlJTIy" tds_newsletter="tds_newsletter1" tds_newsletter3-all_border_width="2" tds_newsletter3-all_border_color="#e6e6e6" tdc_css="eyJhbGwiOnsibWFyZ2luLWJvdHRvbSI6IjAiLCJib3JkZXItY29sb3IiOiIjZTZlNmU2IiwiZGlzcGxheSI6IiJ9fQ==" tds_newsletter1-btn_bg_color="#0d42a2" tds_newsletter1-f_btn_font_family="406" tds_newsletter1-f_btn_font_transform="uppercase" tds_newsletter1-f_btn_font_weight="800" tds_newsletter1-f_btn_font_spacing="1" tds_newsletter1-f_input_font_line_height="eyJhbGwiOiIzIiwicG9ydHJhaXQiOiIyLjYiLCJsYW5kc2NhcGUiOiIyLjgifQ==" tds_newsletter1-f_input_font_family="406" tds_newsletter1-f_input_font_size="eyJhbGwiOiIxMyIsImxhbmRzY2FwZSI6IjEyIiwicG9ydHJhaXQiOiIxMSIsInBob25lIjoiMTMifQ==" tds_newsletter1-input_bg_color="#fcfcfc" tds_newsletter1-input_border_size="0" tds_newsletter1-f_btn_font_size="eyJsYW5kc2NhcGUiOiIxMiIsInBvcnRyYWl0IjoiMTEiLCJhbGwiOiIxMyJ9" content_align_horizontal="content-horiz-center"]