Solved

title hover over image

Posted on 2011-09-14
18
336 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:jonathan1978
  • 6
  • 6
  • 4
18 Comments
 
LVL 16

Assisted Solution

by:SSupreme
SSupreme earned 250 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 250 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
 

Author Comment

by:jonathan1978
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:jonathan1978
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
Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

 

Author Comment

by:jonathan1978
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:jonathan1978
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

Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

Join & Write a Comment

When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn how to count occurrences of each item in an array.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

744 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

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now