In general, the higher the DPI of an image, the higher its quality. Abbreviation DPI stands for "dots per inch", and is related to the quality of your photo. When you begin to digitally process your photos, one of the first terms you'll come across is DPI. If you set it to 72DPI, the image size in centimeters will not change, but the size will change in pixels (it will be 288 * 432 pixels). For example, you had an image of 300DPI and 4*6 inches (1200*1800 pixels). Insert the coordinates in your mouseover script in the areas that say upperleftx (for upper-left x-coordinate), upperlefty (for upper-left y-coordinate, lowerrightx (for lower-right x-coordinate), and lowerrighty (for lower-right y-coordinate).DPI converter has the option to "resample the image", when this option is set, your image will change in size according to the DPI specified in it. Repeat this for the lower right corner.įind the upper-left and lower-right coordinates for all areas of menu.gif that you want two.gif, three.gif, etc. Below the x-coordinate is 70 and the y-coordinate is 50. Record the x and y coordinates (located inside the red boxes below). Move the cursor to the upper left corner of where you want the menu.gif image to change to the one.gif image. Under the File menu, select Preferences - Units & Rulers. See the next section, Specifying coordinates, to learn how to determine the coordinates of the areas where your mouseover will occur.įor this class we will be using rectangular coordinates, which can be specified by using Photoshop.įirst, open your menu.gif image in Photoshop. (In the sample mouseover, notice that the picture of James Watson only appears when you mouseover the word "Genetics." In this case the coordinates of the word genetics had to be inserted to define where the mouseover would take effect.) The underlined portions of the code require specific coordinates of where your mouseover will happen. (Once again, if you have less than five images that will mouseover your default image, delete any unnecessary lines in this code.) Now insert the following in your code where you want the mouseover to appear. For example, if you only have one.gif two.gif, and three.gif, then elimate any lines in the code that refer to four.gif and five.gif.) (If you have less than five images that will change your default image, delete any lines that do not pertain to your images. Once you've altered your images, you need to enter the following JavaĪt the top of your document, before you define the colors of text, copy Save the altered versions as two.gif, three.gif, Repeat this process for temp2.gif, temp3.gif, temp4.gif, and temp5.gif. Note that this is the only change to the picture.Ĭhange the mode of the image to Indexed color (located under the Image menu as Mode - Indexed Color), and save the image as one.gif. In this case the picture of James Watson was placed over the word "Genetics." This way when you mouseover the word "Genetics," James Watson's picture appears. Paste (Edit - Paste in the main menu) the copied portion of temp1.gif onto menu.gif.Ĭlick on the move tool in the toolbar (it's the one in the upper right box).Ĭlick on your pasted image and move it to the appropriate position on the menu.gif image. Go back to menu.gif (Window - menu.gif on the main menu). Copy this (Edit - Copy on the main menu). Use the rectangular selection tool (upper left box of the toolbar) to select the region of temp1.gif that you want to mouseover menu.gif. Next, switch back to the temp1.gif window by clicking on the Window menu and selecting temp1.gif. Now change the mode of your menu.gif image to RGB Color by selecting Image - Mode - RGB Color. Your screen should look like the following: Now you need to create the alter the images so that they're usable inįirst, open your menu.gif and temp1.gif images in Photoshop. Images that you want to appear on your default image when you mouseover specific areas as temp1.gif, temp2.gif, temp3.gif, temp4.gif, and temp5.gif. Image that appears on the page without mousing over it. You're comfortable using GraphicConverter or Photoshop, feel free toĬonstruct your own images in either of these programs (if you do this,ĭon't forget to save your images in GIF format). Images that are larger than the screen, but if you do you should probablyĬhange the size of the image in either GraphicConverter or Photoshop. Your filespace just like you've done earlier this week. To obtain images from the web, save them to This class, you should either find images on the web or make them in There are several ways that you can obtain images for a mouseover. Mouse over an area of science to view a picture of a famous scientist. Today you will be making a mouseover, which temporarily replaces an image with another image.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |