CODEWITHSUNDEEP
htmlxhtmlw3c-validation
VdesmedT
VdesmedT

Reputation: 9113

XHTML W3C Compliance, multiple information in src attribute

We are building an image carousel, it displays clickable thumbnails that when clicked, displays the actual image. We therefore need both url to appears in the Html. Since there is no "actualImageUrl" attribute defined in the img tag, we figured out that we could build the thumbnail url like this : /thumb.png?altUrl=actualImageUrl.png. The server does not care of the actualImageUrl querystring param and we can use javascript to parse the scr attribute and figure out the actualImage Url.

How W3C valid is this ?

Upvotes: 0

Views: 120

Answers (2)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201768

Anything is valid as a src attribute value, in the XHTML meaning for “valid” (a formal thing). It is also otherwise correct to have a query part in such a value and use it in client-side scripting.

But it might be unnecessarily complicated. As you are working with client-side JavaScript, you could include the URLs in a JavaScript array or object, instead of putting them anywhere in HTML markup. For example, you could use an object with thumbnail image URLs as property names and full image URLs as corresponding values, like

var fullImage = { 'thumb.png': 'actualImageUrl.png', ... }

And you would then use this object to pick up the full image URL when a thumbnail is clicked on.

For a more robust solution, which would work even when JavaScript is disabled, you would need to generate the code server-side, generating a elements around img elements.

Upvotes: 1

Manse
Manse

Reputation: 38147

Changing the URL of the src attribute is perfectly valid - But you could use the data- attribute - new with HTML5 (although that doctype is not a requirement to use them) and its purpose is exactly this, from the specs :

Custom data attributes are intended to store custom data private to the page or application, for which there are no more appropriate attributes or elements.

w3 specs for custom attributes

Note - you can test validation here

Upvotes: 2

Related Questions