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

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

保留name属性并忽略验证器，因为正如您所提到的，代码可以正常工作。
满足验证者并使用id或甚至是类

HTML 4.0规范不允许FORM的NAME属性   或IMG元素。这意味着此类属性会产生验证错误   验证任何HTML 4.0 DTD时。但是，HTML 4.01   规范（1999-12-24批准），其中包含若干变更   （通常是小的）与HTML 4.0相比，允许NAME   这些FORM和IMG元素的属性。因此，您现在可以使用   如果使用这些属性，则使用以下文档类型声明   Source

在HTML5中，img元素的name属性已过时。使用   而是id属性。 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>

在库中用“id”替换“name”（javascript / HTML）

1 个答案: