Html code for labeling photos

I was wondering what the html is to get text to show alongside a photo on a web page. I want to write a description of the photo I have on Nextune.com. Is this done with align tags?

Also I want to convert the top nextune into a how do I say it, menu header nav bar, with a mouse over for each letter and be able to click and go to another page. It's a gif but how would I make each letter clickable?

 

In order to make each letter clickable, you'd have to use an image map tag. Just specify the coordinates or pixels.

Code:

<map NAME="[b]NAME OF MAP[/b]">
<area SHAPE=[b]NAME OF SHAPE[/b] COORDS="91,30 186,98" HREF="[b]URL GOES HERE[/b]">
<area SHAPE=default HREF="index.html"> 
</MAP>

If you're confused on how to use it, click here. That'll take you to where I found the code.

 

if you want to make sections of the image change depending on whether you have your mouse over, then you need to use a Javascript image switch, and have a version of the image with each letter hilighted. i.e. when you put your mouse over the section, it swaps for another image where that section is hilighted.

You would add a onmouseover="" to the image map to achive that, along with some script at the top of the page.

 

So I have to make an image map? hmm I think I have some programs for that that I can't figure out. Didn't know what they meant by image map. I'll have to go try again.

 

I think I've got an easier method for making each letter clickable. You should launch your image editor and open your image. Then, slice each letter up and save them as an individual image. You can use the image swap tag.

First, you have to have this in the head.

Code:

<script language="javascript">
function swapImage(imgN,imgU){
if(document.images)document.images[imgN].src=imgU;
}
</script>

Then, put this in the body.

Code:

<a href="linkURL" onmouseover="swapImage()" onmouseout="swapImage()">
<img src="img1.jpg" border="none" name="image1"></a>

If you don't understand the code, click here.
Stay cool.

 

Wow, I'm just a little behind the eightball here. I just spent a good part of the morning trying to figure different things out. Some is becoming a little more clear.

Just to start with I want to do a client side image map I guess. I haven't tried playing with the codes in the previous responses yet, still a little unsure. First I just want to be able to place the "a href" clickable boxes (various sizes) anywere I desire in correspodence with existing graphics or text.

It's ironic, if I knew the correct terminology I probably wouldn't have to ask.

Well, I'm going to give some stuff a try and see how it works out. I also will be checking out the links provided too.

 

So I just check the link with rollover images. I viewed the source for image swapping images. Where are the images stored and how does the browser know where to fetch them. I'm used to href ing to a file on my site. How does the browser know to get a specific image as highlighted?

<a href="#0" onmouseover="swapImage( 'exImage1' , 'img2.jpg' )" onmouseout="swapImage( 'exImage1' , 'img1.jpg' )"><img src="img1.jpg" name="exImage1"></a><br>
<a href="#0" onmouseover="swapImage( 'exImage6' , 'img2.jpg' )" onmouseout="swapImage( 'exImage6' , 'img1.jpg' )"><img src="img1.jpg" name="exImage6"></a><br><br>

This looks fairly simple to write, but what type of file archive do I need on my site? Did I ask this right? Do I place all my photos and images in a special file and how does the browser or java know where to look and retrieve?

 

HTML is a very lazy language. You need to type the exact location of the file. To shorten this, you should keep all the files close. When you upload the files onto your site, the browser looks for any matching files closest to it. If you're using images, you should create a folder in the same directory and name it "images". That way, your request is shortened to just "images/image.format". When using the image rollover code, you should also use the preload images code. In your "img src" write "border=0" and there will no longer be a border around the image. Whew. Well that's my two cents (more like a dollar lol ).