Celebrate National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

title hover over image

Posted on 2011-09-14
18
Medium Priority
?
358 Views
Last Modified: 2012-05-12
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 ?  
0
Comment
Question by:Jon Imms
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 6
  • 4
18 Comments
 
LVL 16

Assisted Solution

by:SSupreme
SSupreme earned 1000 total points
ID: 36539809
Yes, you can make <div id="imagewrap" > box, it might be already existed, add <p id="title"> or <span id="title"> where you want title to appear.
Style will be:
#title {visibility:hidden;}
#imagewrap:hover #title {visibility:visible;}
0
 
LVL 23

Accepted Solution

by:
jeremyjared74 earned 1000 total points
ID: 36539997
If you have more than one image per page that will have the the tooltip, consider using a class rather than a div to avoid validation errors.
0
 
LVL 23

Expert Comment

by:jeremyjared74
ID: 36539999
Should read "Class rather than an id"
0
Plesk WordPress Toolkit

Plesk's WordPress Toolkit allows server administrators, resellers and customers to manage their WordPress instances, enabling a variety of development workflows for WordPress admins of all skill levels, from beginners to pros.

See why 2/3 of Plesk servers use it.

 

Author Comment

by:Jon Imms
ID: 36540391
Sorry, I should have selected the previous comment  ID: 36539997.    
0
 
LVL 16

Expert Comment

by:SSupreme
ID: 36545650
comment  ID: 36539997 is just a suggestion for my solution.
0
 

Author Comment

by:Jon Imms
ID: 36545681
Yes it is,    I'm sorry,   How do i change this then?  
0
 
LVL 23

Expert Comment

by:jeremyjared74
ID: 36546847
@ 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
0
 
LVL 23

Expert Comment

by:jeremyjared74
ID: 36546850
I am having issues, sorry for another correction:

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

Author Comment

by:Jon Imms
ID: 36546876
Jeremy is correct, and gets the points,   Class over ID for validation purposes.   Thank you for your suggestion/solution though SSupreme.
0
 
LVL 16

Expert Comment

by:SSupreme
ID: 36547986
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.

0
 
LVL 23

Expert Comment

by:jeremyjared74
ID: 36548028
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.
0
 
LVL 16

Expert Comment

by:SSupreme
ID: 36548662
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

0
 
LVL 16

Expert Comment

by:SSupreme
ID: 36548678
lol, as you said "tooltip".
0
 
LVL 23

Expert Comment

by:jeremyjared74
ID: 36549031
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
0
 
LVL 16

Expert Comment

by:SSupreme
ID: 36549679
Q;
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 ?  
A:
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 .
0
 

Author Comment

by:Jon Imms
ID: 36549692
Can you guys settle over the points,    Being fair i would if i could split the points,  but unfortunately i cannot now.    

I just wanted some help with this,  i did not intend it to evolve into a war over points.  Thanks to you both.
0

Featured Post

Why Off-Site Backups Are The Only Way To Go

You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction This article is intended for those who are new to PHP error handling (https://www.experts-exchange.com/articles/11769/And-by-the-way-I-am-New-to-PHP.html).  It addresses one of the most common problems that plague beginning PHP develop…
This article discusses how to implement server side field validation and display customized error messages to the client.
The purpose of this video is to demonstrate how to update a WordPress Site’s version. WordPress releases new versions of its software frequently and it is important to update frequently in order to keep your site secure, and to get new WordPress…
The purpose of this video is to demonstrate how to set up basic WordPress SEO. This will be demonstrated using a Windows 8 PC. The plugin used will be WordPress SEO by Yoast. Go to your WordPress login page. This will look like the following: myw…
Suggested Courses

730 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question