title hover over image

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

ASKER CERTIFIED SOLUTION

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Should read "Class rather than an id"

ASKER

Sorry, I should have selected the previous comment ID: 36539997.

comment ID: 36539997 is just a suggestion for my solution.

ASKER

Yes it is, I'm sorry, How do i change this then?

@ comment ID: 36539997 is just a suggestion for my solution.

Actually my answer wasn't a suggestin for SSupreme: answer. In his answer he suggests using an ID, which is represented with #
EXAMPLE:
#title {visibility:hidden;}
#imagewrap:hover #title {visibility:visible;}

Should be:
.title {visibility:hidden;}
.imagewrap:hover #title {visibility:visible;}

And would be written in HTML like this:

<div class="title">

Open in new window

and

<div class="imagewrap">

Open in new window

The reason to use a class vs. an ID is that if you use an object with an ID more than once on a page it is invalid markup and is bad practice.
Regards,
Jeremy Jared

I am having issues, sorry for another correction:

The correct markup is:
Should be:
.title {visibility:hidden;}
.imagewrap:hover .title {visibility:visible;}

ASKER

Jeremy is correct, and gets the points, Class over ID for validation purposes. Thank you for your suggestion/solution though SSupreme.

Is there another easy solution to use, which will display the image title when you hover over the image ?
if solution is: used class instead of ID.

My answer will me: Obama is the 44th President of the United States.

and I am correct, but it doesn't make solution for this question.

and you can check validation it doesn't matter, what you use class or id, even id for all elements.

P.S. just to clarify which solution you use provide a link or markup.

I can't believe you'd try to argue that it's valid code to use a the same div id more than once per page. Really, that is very basic CSS knowledge. Sorry if your answer wasn't chosen, but you are very wrong about your statement. You can look it up at the W3C website. You know the ones that make the rules.

To quote their website:
7.5.2 Element identifiers: the id and class attributes

Attribute definitions

id = name [CS]

This attribute assigns a name to an element. This name must be unique in a document.

class = cdata-list [CS]

This attribute assigns a class name or set of class names to an element. Any number of elements may be assigned the same class name or names. Multiple class names must be separated by white space characters.

http://www.w3.org/TR/html4/present/styles.html

Another link you should probably read:
http://www.1stwebdesigner.com/tutorials/dos-donts-better-css-and-html/

Do a Google search. It shouldn't take you long to realize your statement is false.

I agree with you that validation will say it is already defined, but Is it solution for question?

And if so have you seen result of your solution without this?
I made this myself:
#title {visibility:hidden;}
#imagewrap:hover #title {visibility:visible;}
it wasn't provided.

Therefore your comment ID: 36539997 and corrected comment ID: 36539999 are off topic.
If you comment was to correct my comment ID: 36539809. I agree 100% if you get all points as assisted solution because without my comment yours is waste of space. With my comment is only a tip.

Here is example which proves it works with all class or all id:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content="HTML Tidy for Linux (vers 6 November 2007), see www.w3.org" />
<style type="text/css">

div.img
{
  margin: 2px;
  border: 1px solid #0000ff;
  height: auto;
  width: auto;
  float: left;
  text-align: center;
}       
div.img img
{
  display: inline;
  margin: 3px;
  border: 1px solid #ffffff;
}

div.desc
{
  text-align: center;
  font-weight: normal;
  width: 120px;
  margin: 2px;
  visibility:hidden;
}
div.img:hover div.desc {visibility:visible;}

div#img
{
  margin: 2px;
  border: 1px solid #0000ff;
  height: auto;
  width: auto;
  float: left;
  text-align: center;
}       
div#img img
{
  display: inline;
  margin: 3px;
  border: 1px solid #ffffff;
}

div#desc
{
  text-align: center;
  font-weight: normal;
  width: 120px;
  margin: 2px;
  visibility:hidden;
}
div#img:hover div#desc {visibility:visible;}
</style>
<title></title>
</head>
<body>
<div class="img"><a href="klematis_big.htm"><img src="http://www.w3schools.com/css/klematis_small.jpg" alt="Klematis" width="110" height="90" /></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img"><a href="klematis2_big.htm"><img src="http://www.w3schools.com/css/klematis2_small.jpg" alt="Klematis" width="110" height="90" /></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img"><a href="klematis3_big.htm"><img src="http://www.w3schools.com/css/klematis3_small.jpg" alt="Klematis" width="110" height="90" /></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img"><a href="klematis4_big.htm"><img src="http://www.w3schools.com/css/klematis4_small.jpg" alt="Klematis" width="110" height="90" /></a>
<div class="desc">Add a description of the image here</div></div>

<div></div>
<div id="img"><a href="klematis_big.htm"><img src="http://www.w3schools.com/css/klematis_small.jpg" alt="Klematis" width="110" height="90" /></a>
<div id="desc">Add a description of the image here</div>
</div>
<div id="img"><a href="klematis2_big.htm"><img src="http://www.w3schools.com/css/klematis2_small.jpg" alt="Klematis" width="110" height="90" /></a>
<div id="desc">Add a description of the image here</div>
</div>
<div id="img"><a href="klematis3_big.htm"><img src="http://www.w3schools.com/css/klematis3_small.jpg" alt="Klematis" width="110" height="90" /></a>
<div id="desc">Add a description of the image here</div>
</div>
<div id="img"><a href="klematis4_big.htm"><img src="http://www.w3schools.com/css/klematis4_small.jpg" alt="Klematis" width="110" height="90" /></a>
<div id="desc">Add a description of the image here</div>

</body>
</html>

Open in new window

lol, as you said "tooltip".

I never checked the solution. I simply commented that using a dive with the same ID more than once per page was invalid code. I guess I'm just a traditionalist as I believe in writing valid code when possible. My intent wasn't to start arguing with you.

As I understood the question the author had the title showing when hovered

(which my the way is called a "lol" tooltip)

. I also believe your purpose here is to gain more points. To me the points are irrelevant. If you're going to offer a solution you should think about the fact that you might be teaching someone that is trying to learn. If the web is filled with suggestion of invalid code that isn't good. I don't believe the point of Experts Exchange is to gain points

(I'm not sure if you know but points don't do anything. You can't buy things with them, you can't sell them for money. The only true value of the points is to give some type of ranking. A ranking for what? A rank is a token that says I've spent my time helping others. I have contributed to the community)

.

If you want the points I won't argue the fact. I do however suggest that you think about why you post answers in the first place. I hope it's for the same reason I do.

There was a time when I was learning the ropes. I can't tell you how much bad code and shoddy practices I've seen. If you want to provide an valuable contribution try worrying less about points and more about the effect your suggestions may have on the people that may not know different. That's all I have to say bout that.

jeremyjared74

I have a few images on a webpage, I wanted the title of the image to appear when you hover over the image. I added the title attribute, and that works fine in all browsers, but safari it has about 4 second delay for some reason.

Is there another easy solution to use, which will display the image title when you hover over the image ?

If you have more than one image per page that will have the the tooltip, consider using a class rather than a div (Should read "Class rather than an id") to avoid validation errors.

Fine with me if it's solution. I think you have double account and you are making point for yourself.
Validate this site first: http://ideatreedesignonline.com and I have few suggestions for you, my email tnce@tut.by .