Jump to content
Sign in to follow this  
madscientist

Display Text On Hover

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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
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

Share this post


Link to post
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; }

Share this post


Link to post
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.

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...