Images can be resized automatically in the same process when converting.ĪppleMacSoft Graphic Converter can do the conversion work very easily in batch mode, so you can convert and/or resize all the selected source images in batch with just a few clicks. You can use it to convert multiple graphic files from different formats to desired format in one time. 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).Graphic Converter is an easy to use and powerful batch image converter and photo resizer, that supports over 50 graphic formats including JPG, PNG, GIF, BMP, TIFF, SVG, TGA, ICO, PICT, PCT, PSD, DNG, Digital Photo RAW formats and many others. 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 |