将画廊中的 "name" 替换为 "id" (javascript/HTML)

Question

我在一个学校项目中使用这个画廊：http://html-tuts.com/html-photo-gallery-simple-javascript/。我让它工作了，但是当我验证它时（使用：http://validator.w3.org/）我收到一条错误消息，提示我应该将所有 "name" 属性替换为 "id" 属性。但是，这样做会使我的画廊停止工作。任何帮助将不胜感激。

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

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

保留名称属性并忽略验证器，因为如您所述，代码有效。
满足验证器并使用 id 甚至 class

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

EDIT 这是您可以使用的 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>

将画廊中的 "name" 替换为 "id" (javascript/HTML)

replacing "name" with "id" in a gallery (javascript/HTML)

html

javascript

image

gallery

onmouseover