As this is a lecture/lab, you will need to create a starting page. For right now, you will need a graphics software like Adobe's Photoshop or the free https://www.getpaint.net/ to create images. Don't forget to Save For Web either using the software's legacy or an online program like Tiny PNG
To begin, create or save 9 .gifs or .pngs, optimized, 100px square. Reference your images in your html page, as list items. Don't forget to add the appropriate alt attributes. Here is what my code looks like:
And here is its CSS:
The results are below:
Eliminate colors until there is 1.
A very simple kind of script could use tag attributes, and be written within your html. You can add an onclick event handler so that when a color is clicked, an alert says the color.
Of course, you know that writing inline code is messy and bad practice since it's not very manageable or reusable, and takes a lot of time to create. We could add an ID to the element and use getElementById and assign an anonymous function, or function literal, to do the same thing
You would need to add the id to your image like this:
Which gives us more or less the same effect by accessing the DOM element.
A cleaner way would be to use an addEventListener() method. This method looks alot like dot notation, but is more versatile in calling elements within elements. When you use the addEventListener() method, not only do you say the type of event and the function you want it to do, but also add a true/false value for the propagation type, discussed in the next section of this tutorial.
Any event, onClick, onLoad, onChange, etc. can be "listened" for by the computer and when that event occurs, you can tell the browser to then do something, like the alert box to give a message.
Let's just change the earlier script, to use the event listener. Save, upload and refresh and see if your results are the same.
Here, we are making a slight adjustment to how we alert the browser to "listen" for an event and then to react to it. Page 2 of this tutorial will show how you can now extend the code to interact on events that you write.
It is worth noting that for IE8 and less, you would use attachEvent. That code looks like this:
1 | 2