Jump to content

Display Text On Hover


madscientist
 Share

Recommended Posts

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

Link to comment
Share on other sites

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

Edited by jlhaslip
Link to comment
Share on other sites

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
Link to comment
Share on other sites

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; }

Link to comment
Share on other sites

  • 2 weeks later...

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.

Link to comment
Share on other sites

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
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...