Imagemap

Last week when Hugh showed us examples of hypertext essay from previous student blogs, I was curious on how the student manage to make one single image that links to different webpage. This was the example shown http://raws.adc.rmit.edu.au/~s3239750/hypertextessay/map.html.

Today I finally had some time to explore how to do it by following simple instructions from this book ‘HTML and CSS in 24 Hours’ which I borrowed from the library. See the results here.

The steps are pretty easy and I thought I should put it down as a blog entry for my group members to try it out as well.

Step 1 (Image):

- Choose an image

- Cut the image into vertical strips using Photoshop (or any image editor) and save each image separately

   ….           …..       …..       

- Place the images into the ‘Project’ folder using Cyberduck software. I randomly name my images that I’ve cut as “first”, “second” and so forth.

Step 2 (coding):

- Insert <a href /> tag to link to first image then <img src /> tag to insert image

Here’s an example of my HTML code:

<a href=”http://raws.adc.rmit.edu.au/~s3308292/blog2/”><img src=”first.jpg” alt=”Yu-Ann’s blog” title”Yu-Ann’s blog (click to view blog)” style=”border:none”/></a>

- The second part of the code with alt is just to attribute the image. I think it still works without putting that in. (I haven’t tried it out.)

- Continue doing the same code by just replacing the links and images.

That’s it! Don’t forget to save and upload the new page.

It’s really simple. I hope that I’ll be able to integrate this ‘imagemap’ into my hypertext essay project.

HTML Text Formats

This post is to test what I can do with ^{HTML text formats}. I think this will be hard FUN as you don’t have to see the same size and boring text fonts. Or is this making you _dizzy?

In Week 3′s lab, we started a few basic HTML coding and I decided to explore more on my own. Let’s see what else I have tried on my own.

<b> – Bold text
<i> – Italic text
<big> – Big text
<small> – Small text
<em> – Emphasized text
<strong> - Strong text
<sub> – This is a _{Subscripted text}
<sup> – While this is a ^{Superscripted text}
<ins> – Inserted text
<del> – Deleted text