Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Let's go ahead and open this in the browser, and you'll notice we've got these lines of text from our HTML. So the way this works is you can basically embed any data that you want in any tag that you want, using data- and whatever you want to call it as the name of the attribute, and then putting whatever you want to in the value of the attribute. So in this case I've got data-aka, and The White Album is the data in the attribute. And this is all wrapped around in an a element, a link, that says The Beatles.
So as you can imagine, you can do all kinds of things with this. Like for example, I have this other one, and this is on a button as opposed to an anchor element. It could really be on a span if I wanted to be and it would work just fine, and I'll show you that in a minute. But here I've got data-missile-type, data-missile-payload, data-missile-sound and onclick=fire, so click here to fire the missile and when I click here, I get Firing the rocket with photon torpedo payload Ka-Boom! And you see its rocket is the type, and payload is photon torpedo, and the sound is Ka-Boom.
It's not a button any more. And you'll notice that my cursor is not even changing to the pointy cursor; it is just remaining the text cursor. But still, if I click on it, I still get that alert box, because in HTML5, the onclick attribute works for anything. It doesn't actually have to be a button element or a link element or anything like that. And so I still get this Firing the rocket with a photon torpedo payload Ka-Boom! So it takes perhaps a little bit of imagination, but this is obviously a very useful feature, and it's currently supported by the latest versions of all the major browsers.
You'll want to have a fallback in case it's not supported by legacy browsers that may be visiting your site. But this could be an exciting feature to experiment with and to implement.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 105484 Viewers
56 Video lessons · 117150 Viewers
71 Video lessons · 86382 Viewers
131 Video lessons · 41287 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.