Display Text On Hover

[madscientist]

Hello there.Right, this is my first post here (well, third actually, but the first two were both at the "introduce yourself" topic, so they don't really count").. anyway, I thought I'd learn some HTML and such, and discovered the best way to learn is to actually create something.. go figure.Anywho, I know next to nothing about coding, so.. you get it. Right now my problem is to get text to appear when the mouse hovers over a picture... a black square divided in four image maps, to be specific.The four different maps/parts all link to four different pages, and I'd like text to appear when the mouse hovers over these different maps/parts.. for instance, on one part the text "About" could appear, and on another the text "Portfolio".But here's the thing: I only have a very basic knowledge of HTML and CSS coding, so no fancy Javascript-stuff.. yet.Thank you!-mad

[jlhaslip]

Add an alt="text" and a title = " text" to the images. alt = is for IE and title = is for other Browsers to use.

[thescientist]

so you want one image but to have four links "pop-up" out of it?

[madscientist]

so you want one image but to have four links "pop-up" out of it?

I have one picture (.jpg), a black square made in Photoshop. This square has been divided into 4 sections, where each section acts as a link to another webpage. I want a word to appear over each section when the mouse hovers over it, to describe the page you get to if you click on that section..Look at this terribly non-explanatory picture if confused (I even confused myself):http://img195.imageshack.us/img195/6960/nonexplanatory.jpg

[madscientist]

Anyone?

[Ingolme]

If it's just a plain black square, then you don't need any images. Just give a container a black background.Something like this might work:

<div class="links">  <a href="URL">Text</a>  <a href="URL">Text</a>  <a href="URL">Text</a>  <a href="URL">Text</a></div>

.links {  overflow: auto; width: 200px;}.links a {  display: block;  float: left;  width: 50%;  height: 100px;  font-size: 1.4em;  background-color: black;  color: black;}.links a:hover { color: white; }

[alexpnd]

No I don't think he meant just a plain black square :)Are you using an image-map? From the sounds of it you are. I wouldn't recommend them. I think your best bet is to make a container div with no padding whatsoever, and just float your 4 images in there, instead of one big one since they are squared anyway, make sure to set margins and borders to 0. You would probably have to use the float attribute to align them properly. Good luck, and please anyone make corrections if there is a better way.

[Ingolme]

No I don't think he meant just a plain black square :)Are you using an image-map? From the sounds of it you are. I wouldn't recommend them. I think your best bet is to make a container div with no padding whatsoever, and just float your 4 images in there, instead of one big one since they are squared anyway, make sure to set margins and borders to 0. You would probably have to use the float attribute to align them properly. Good luck, and please anyone make corrections if there is a better way.

According to this image, it's a plain black square with text in front of it:http://img195.imageshack.us/img195/6960/nonexplanatory.jpg