Hover Text Box

with an image?

[wa9578]

Hi all,

Me again (being a pain as usual), I've managed to make a hover text box (when you hover over something it comes up all nice and neat), my query is can you insert a picture into the text box that appears?

I've had a go but its just ends up writing the url of the image rather than showing the image.

(if that makes sense)

the html is like this;

<li></FONT></b></td><td width=4></td><td>
<a title='Anti Virus blah blah blah' class=body_con href="#">
Anti Virus</a> </li>

[incrediBILL]

That's because anchor tag parameter TITLE will display the text in the TITLE when you hover over it in most browsers.

I don't see anything in your HTML about an image, which I assume is in the CSS which wasn't included.

[Fotiman]

I see some invalid markup though. A list item <li> containing only closing </font> and closing </b> tags (which were never opened) and then the closing </li> tag is missing. Followed by a closing </td> which means the closing </ul> or </ol> is also missing.
There there is a closing </li> tag after the anchor, though no <li> tag is open there.

I would start by validating your markup [validator.w3.org].

If you're looking to make custom tooltips, you'll need to use JavaScript (and CSS) to do it. Some of the frameworks/libraries have this functionality, for example YUI2 has a Tooltip widget [developer.yahoo.com].

[wa9578]

I'm using a hover box I found somewhere else, I didn't know which bits was the right thing so I kept it all in and bizarly works :s

I took the image thing out as it wasn;t doing anything other than writing the link to it,

would the right thing look more like...

<li><td width=4></td>
<a title='Anti Virus blah blah blah' class=body_con href="#">
Anti Virus</a> </li> 

?

am guessing and not tried it.

When I tried the img thing I was doing the img src="imgurl" but it meerly added the imgurl to the box (if that makes sense)

[tedster]

And you shouldn't try it live. You should first use the validator link that Fotiman offered for any html idea. Nesting a table cell inside a list item is definitely not valid.

[wa9578]

Have done the validator thing but its even flagging things up which to me look right (I'm still new to this), Generally do you trust the mark up it gives back to you at the end?

[wa9578]

@tedster: I understand that it might not be usual but I'm not sure what you mean by not valid (blame my noobness as asking not arguing).

Reason am asking is because it does exactly what I want at the moment, I have a drop down box in my nav bar, and its when you hover over one of the links (will be to a download) I want the text box to appear to give people more information on it (the image which isn't working is because people often recognise logo's rather than names)

[Fotiman]

It's not valid because, per the HTML spec [w3.org] (and at a lower level, the Document Type Definition [w3.org] for HTML 4.01), a table cell (TD) can only be included within a table row (TR [w3.org]), which can only be included in a THEAD, TBODY, or TFOOT, which can only be included in a TABLE. Likewise, a list item (LI) can only be included within an OL or UL. If you put html elements within elements that they are not supposed to be in, your markup is invalid, and thus it's up to the browser to try and "guess" at what you wanted, which increases the chances that your page might look fine in one browser but horribly broken in another.

Validation is very important. If you're new to HTML development, you should make the effort to do it the right way, or you'll be setting yourself up for potential maintenance nightmares down the road.

[wa9578]

Ok I'll do my best with it, thanks for explaining though :) on the plus side my li is within a ul (I just didn't put it on the code above as didn't think was relevant)

[Fotiman]

Ok, then you should remove the <td>.

As for the tooltip, I would look at the YUI version I mentioned above.

[wa9578]

I've been having a look (in between being called to meetings) and think it needs more attention so will hopefully have an answer friday lol.

So if I move the td does the hover still work? as in the only part I need for the hover and it to be in the list (i'll include the <ul> this time lol)

<ul>
<li>
<a title='Anti Virus blah blah blah' class=body_con href="downloadurl">
Anti Virus</a>
</li>
</ul>

and as for the original question is it possible to do it without the js, like in other parts of the site i've got img src="imgurl" could that slot in there anywhere?

[Fotiman]

So if I move the td does the hover still work?

It should. The hover effect that you're seeing is browser functionality relating to link elements with a title.

is it possible to do it without the js, like in other parts of the site i've got img src="imgurl" could that slot in there anywhere?

No, it's not possible without JavaScript. You essentially need to replace the default browser behavior with a custom tooltip. Since we're talking about "behavior", that means JavaScript.

[wa9578]

As JS seems far beyond me atm I'm going to try put a little image in the <li> with the name next to it and then the hover as it is.

I can work on the JS once things at work calms down again :)