Search code examples
javascripthtmlimagegalleryonmouseover

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

I'm using this gallery in a schoolproject: http://html-tuts.com/html-photo-gallery-simple-javascript/. I got it to work, but when I validate it (using: http://validator.w3.org/) I get an error saying i should replace all "name" attributes with "id" attributes. However doing so stops my gallery from working. Any help would be greatly appreciated.

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>
Solution

  • Invalid in this case does not constitute any syntax error, but rather a semantic invalidity. You have two choice:

    1. Keep the name attribute and disregard the validator because as you mentioned, the code works.

    2. Satisfy the validator and go with an id or even a 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 Here is the javascript logic you can use. 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>