This exercise draws on JQuery, a very powerful and popular JavaScript library, to construct an interactive web experience that links your classmates’ names with their pictures. You will be asked to paste or type in a few lines of code that probably won’t make a lot of sense at this point. No worries. One of the goals of this lesson is to give you a taste of jquery to whet your appetite for later in the semester when we will learn a lot about coding. For now, just follow the instructions and enjoy the ride!
1. Enough Talk. For this exercise you need a pictures of all of your classmates. You should be able to find a link to a webpage that has pictures of everyone in your class at mynmi.net/4110. You can access these pictures by right-clicking on each one and saving it. Be aware, however, that all of those pictures are named me.jpg and you will have to rename each one appropriately. So, right-click on all of your classmates and and save each one into the mysite/images folder. As you name the images, follow best practices by avoiding capital letters or spaces. If a student is named John Brown, for example, save his picture as john.jpg or john_brown.jpg.
2. Create a new document with your text editor, and add in this text to start a webpage:
<!doctype html>
<html>
<head>
<title>My Classmates</title>
</head>
<body>
</body>
</html>
Save the document into your mysite folder as classmates.html. When prompted, select to “Replace” the previous classmates.html file.
3. As we mentioned, this exercise requires JQuery. Enable it by adding the following code:
<script src="http://code.jquery.com/jquery-latest.js"></script>
just before the </head> tag, to connect your document to the latest online version of the jquery library.
4. Insert all of the images into your web page, just after the body tag. To insert an image that is in a folder, you have to include the name of the folder as part of the path. As this screen capture shows, classmates.html, the file that you are working with, sits next to the images folder that contains all of the pictures of your classmates:
Therefore, the code for inserting an image named john.jpg that is inside of your images folder would be
<img src="images/john.jpg">
In this case your task is to insert a series of images just after the body tag as shown here:
<body> <img src="images/john.jpg"> <img src="images/mary.jpg"> <img src="images/bill.jpg"> </body>
The best strategy is to insert one image, make sure that everything works by previewing classmates.html in your browser, and then copy, paste, and modify your code to bring in all of the additional images.
5. Once all of the images are in place, you may notice a problem. The pictures more than fill up the entire page. Fortunately, there is a magic jquery solution for that problem. Just after the script that calls the jquery library, paste this line of code:
<script>$(function() { $('img' ).css("width", 15 +'%');$('img' ).css("height", 15 +'%'); }); </script>
When you preview this document in the browser, all images in this document should shrink to 15% of the browser window’s width. By the way, you can shrink or expand the images simply by changing 15 to a smaller or larger number.
6. Right below the script that you just pasted in, add this one:
<script> function whois(person){$('#thename').html(person);} </script>
This script creates a function named ‘whois’ that will display each student’s name in a div tag titled ‘thename.’
7. Now, insert the div tag titled thename just before the closing </body> tag:
<div id='thename'> </div>
8. Call the whois function. Calling the function is easy. For a student named John, you simply find his picture and add code to it that calls the function whenever a user moves his or her mouse over the picture. In the case of john,
<img src="images/john.jpg">
would become
<img src="images/john.jpg" onmouseover="whois('John')" >
Call the function for one of your classmate’s images and test it in your browser. Did it work? If so, repeat these steps for all of your classmates.
9. Even if everything is working properly, aren’t you disappointed that those names appear in such a small font size? To fix that problem, simply add a bit of ‘inline css’ to the div tag (thename) that displays the names:
<div id='thename' style="font-size:40px"> </div>
10. FINALLY… Mouseover works great with ‘mice’ but what if your user is using a tablet or smartphone? To accommodate mouseless users, add the following ‘mousedown’ function immediately after the semicolon that ends the mouseover function:
onmouseover="whois('John')" ; onmousedown="whois('John')" ;
Don’t forget those semicolons!
One last point. If you do not see all of your classmate’s names as you mouse over their pictures it may be that the div tag that displays their names is not visible because it is at the top of the page and you have scrolled past it. Try resizing your browser window to resolve this problem or (more drastically) experiment with altering the script that shrinks pictures to 15% of the browser window to a smaller percentage.