How do you rotate images in HTML?

Answer 1

The concept of a rollover image is you display an image on your webpage and when a viewer puts his or her mouse over the image, the image interacts, usually by inverting colors etc.. The advantage to using this technique is that it makes your site more interactive, and more fun to browse.

The first step is to create two images. One as the default image that is displayed, and one that will replace it when the user's mouse moves over it. See related link for an example.

Once you create your images it is time for the code:

Open up your web page in the desired text editor (e.i. notepad). Insert the code below into the location you want your rollover image to appear in.

Note: all the bolded italicized text below is meant to define what data should go in that location and should be replaced with the actual parameters of the image in question. See related link for example of how it should be filled out.

Note: make sure you copy everything exactly as it is - syntax is very important with this code. Especially, make sure you don't leave out the apostrophes!

Answer 2

An image map is made of two primary bits of code - a map declaration and an image tag.

The image tag is the standard <img src="blah.jpg">, but including the usemap parameter. Like so:

<img src="blah.jpg" usemap="imgmap">

It can also have alt, size specifications, and all the other normal parameters you may wish to use.

The map declaration is a code block similar to the one that follows this paragraph. The map tag has a name corresponding to that identified in the usemap parameter for the image, above, and each link is described by an area tag between the map and /map tags.

<map name="imgmap">

<area shape="rect" coords="0,0,82,126" href="link1.htm" alt="Link 1" />

....

</map>

For each area, you define a shape - the shape of the link, coords - the coordinates of the top left and bottom right corners of the link (each coordinate is an x-y position - horizontal then vertical position), href - the page referred to, and other link based data.

For more detailed information, see the related links.

Answer 3

To add an image into a HTML document, use the <img> tag. Here's an example of a completed image tag:

<img src="example.png" alt="An example image" />

There are multiple attributes to this tag. The "src" attribute tells the HTML document where to find the image file. In this case, the image is in the same directory as the HTML document.

The "alt" attribute is meant to contain a short description of what is in the image so that blind users and screen-readers can interpret the image.