Remember I talked about using the slicing tool in Photoshop as the method for linking the different images on our webpage? That didn’t happen. But I’m not whining, at least I know that it can be an option.
Instead we decided to create a map image code, which means finding the location of the image we want to link from within the full image (I think this sentence is a product of my poor english and my lack of html language, but bear with me). We did this in Photoshop by opening the Information button on the left hand side, then holdind the arrow over the image to find the x and y properties. When it comes to the code used in the image map we had to provide the x and y properties plus the size of the image (I use image here for the piece within the main image that we are going to link from).
This is the code for it:
<img src=”imagemap.gif” usemap=”#mymap” width=”your width” height=”your height” alt=”your description” border=”0″
<map name=”mymap”>
<area shape=”rect” coords=”0,0,50,50” href=”frames.shtml” alt=”frames”>
<area shape=”rect” coords=”50,0,100,50” href=”tables.shtml” alt=”tables”>
<area shape=”rect” coords=”100,0,150,50” href=”postcards.shtml” alt=”postcards”>
<area shape=”rect” coords=”0,50,50,100” href=”index.shtml” alt=”index”>
<area shape=”rect” coords=”50,50,100,100” href=”javascript.shtml” alt=”javascript”>
<area shape=”rect” coords=”100,50,150,100” href=”css.shtml” alt=”css”>
</map>
Rosa, who is the proud owner of Adobe Flash, have been playing around and has made an AMAZING cloudbook. From her blog:
“What each bubble was linking to was a cloud book – this was managed by making a flipping book animation flash file, made in InDesign, exported to flash, then finding a code to embed the flash file within the website. That was easy enough, then it was just positioning with <DIV STYLE=”position: absolute; top:__px; left:__px;”> tag to put it infront of the cloud made in photoshop and putting it in the <body> of the html file.”
Oh, and I’ve been sneaking around to get inspiration from other students blogs. Cinzia Sammassimo had a couple of links to very helpful youtube videos, and I decided to save them here so I can revisit them if I need them.
http://www.youtube.com/watch?v=k6U-i4gXkLM
http://www.youtube.com/watch?v=Pij6J0HsYFA&feature=channel
http://www.youtube.com/watch?v=X6ilT3uUOBo&feature=channel
http://www.youtube.com/watch?v=SXR9CDof7qw&feature=channel
It did when I previewed it, here’s proof!
