javascript - 在图库中将 "name"替换为 "id"(javascript/HTML)

Question

我在学校项目中使用这个画廊:http://html-tuts.com/html-photo-gallery-simple-javascript/ 。我让它工作，但是当我验证它时(使用: http://validator.w3.org/ )我收到一条错误消息，说我应该用“id”属性替换所有“name”属性。然而，这样做会使我的画廊无法工作。任何帮助将不胜感激。

html:

<div class="gallery">
                <h2 class="h2Fotos">Badkamers:</h2>
                <div class="thumbnails">
                    <img onmouseover="preview1.src=badkamer1.src" name="badkamer1" src="images/diensten/badkamers/badkamer_01.jpg" alt="badkamer" />
                    <img onmouseover="preview1.src=badkamer2.src" name="badkamer2" src="images/diensten/badkamers/badkamer_02.jpg" alt="badkamer" />
                    <img onmouseover="preview1.src=badkamer3.src" name="badkamer3" src="images/diensten/badkamers/badkamer_03.jpg" alt="badkamer" />
                    <img onmouseover="preview1.src=badkamer4.src" name="badkamer4" src="images/diensten/badkamers/badkamer_04.jpg" alt="badkamer" />
                    <img onmouseover="preview1.src=badkamer5.src" name="badkamer5" src="images/diensten/badkamers/badkamer_05.jpg" alt="badkamer" />
                    <img onmouseover="preview1.src=badkamer6.src" name="badkamer6" src="images/diensten/badkamers/badkamer_06.jpg" alt="badkamer" />
                    <img onmouseover="preview1.src=badkamer7.src" name="badkamer7" src="images/diensten/badkamers/badkamer_07.jpg" alt="badkamer" />
                    <img onmouseover="preview1.src=badkamer8.src" name="badkamer8" src="images/diensten/badkamers/badkamer_08.jpg" alt="badkamer" />
                    <img onmouseover="preview1.src=badkamer9.src" name="badkamer9" src="images/diensten/badkamers/badkamer_09.jpg" alt="badkamer" />
                    <img onmouseover="preview1.src=badkamer10.src" name="badkamer10" src="images/diensten/badkamers/badkamer_10.jpg" alt="badkamer" />
                    <img onmouseover="preview1.src=badkamer11.src" name="badkamer11" src="images/diensten/badkamers/badkamer_11.jpg" alt="badkamer" />
                    <img onmouseover="preview1.src=badkamer12.src" name="badkamer12" src="images/diensten/badkamers/badkamer_12.jpg" alt="badkamer" />
                    <img onmouseover="preview1.src=badkamer13.src" name="badkamer13" src="images/diensten/badkamers/badkamer_13.jpg" alt="badkamer" />
                    <img onmouseover="preview1.src=badkamer14.src" name="badkamer14" src="images/diensten/badkamers/badkamer_14.jpg" alt="badkamer" />
                </div>
                <div class="preview1">
                    <img name="preview1" src="images/diensten/badkamers/badkamer_01.jpg" alt="badkamer"/>
                </div>

Answer 1

在这种情况下无效并不构成任何语法错误，而是语义无效。您有两个选择:

1. 保留名称属性并忽略验证器，因为正如您所提到的，代码可以正常工作。

2. 满足验证器的要求并使用 ID 甚至类

The HTML 4.0 Specification did not allow a NAME attribute for a FORM or IMG element. This means that such attributes give validation errors when validating against any HTML 4.0 DTD. However, the HTML 4.01 Specification (approved 1999-12-24), which contains several changes (usually small ones) as compared with HTML 4.0, allows the NAME attribute for those FORM and for IMG elements. Thus, you can now use the following document type declaration if you use those attributes Source

In HTML5, The name attribute on the img element is obsolete. Use the id attribute instead. Source

<小时/>

编辑 这是您可以使用的 JavaScript 逻辑。 JSFiddle

<div class="gallery">
 <h2 class="h2Fotos">Thumbnails:</h2>

<div class="thumbnails">
    <img onmouseover="getElementById('preview1').src=this.src" 
    id="badkamer1" src="http://placehold.it/100x100/f56600" alt="badkamer1" />

    <img onmouseover="getElementById('preview1').src=this.src" 
    id="badkamer2" src="http://placehold.it/100x100/17c423" alt="badkamer2" />

    <img onmouseover="getElementById('preview1').src=this.src" 
    id="badkamer3" src="http://placehold.it/100x100/9800ff" alt="badkamer2" />

    <h4>Preview</h4>
    <img id="preview1" src="http://placehold.it/100x100" alt="badkamer" />
</div>