tooltips

[scrawny]

I found a script to accomplish this but the javascript needs to be attached to image maps which are already going to a link, using the Homepage When I put the this after my first link in the source code, I get a tooltip appearing already but instead of the text I want to appear, I get the URL from my first link appearing as the tooltip.

I'm not sure this script is right in the first place. I'd be happy to hire someone to do this for me! Anybody out there interested?

[falkencreative]

Hiring somebody probably isn't necessary... it's just a matter of adjusting the Javascript source code. What is the code you are using?

[scrawny]

I didn't get an email you answered--sorry. This is where I downloaded the code; you can see it for yourself

[LSW]

Why use Javascript?

 

If they are images just use the alt attribute and if needed the title attribute.

 

The imagemap itself can be CSS to rather than over complicate it with JS and make it useless for people using the keyboard to navigate or do not support JS.

 

Night of the Imagemap

[scrawny]

I forgot to send the url to the script I'm using. http://www.walterzorn.com/tooltip/tooltip_e.htm

I already have a list of names on my page which is made in Photoshop. So I've used image maps to link the names to their videos. Now my client wants flyouts with a small jpg of each person as well as a bit of text. What's happening is that my flyout is showing the link to the video instead of the descriptive text. The link to the video is

[jlhaslip]

try this

[scrawny]

Thank you--I have high hopes for this method. I'm sure I don't have it quite right yet tho'. Can you please check it out for me? Ive tried putting the CSS code both before and after my image map link which goes to a video. Since you can't see the tooltip (doesn't work), to see the code, go to the very end of the source code and you'll see a list of video links, towards the end you'll see where I've put the CSS I picked up that you sent me, then a link to Alexander McCall Smith's video interview. Here's the page: http://writetv.okstate.edu/hovertest2.html

[jlhaslip]

Where is the CSS for the tooltip?

[scrawny]

that was actually a question I wanted to ask you. I have to make something up for it, a class called "info"? Do you think that's my only problem?

[jlhaslip]

go to the link in post 6 and do a view source to snag the CSS for the tooltip.

[jlhaslip]

/*
       =================================
       start of Tooltip css code here
       ================================= */

       a.info{
       position:relative;           /*this is the key*/
       z-index:24;
       background-color:#e0e0e0;    /* background colour of display text */
       color:#000000;               /* colour of display text */
       border:1px dotted #999;    /* border colour */
       text-decoration:none;
       font-style:italic;
       }

       a.info:hover {
       z-index:25;
       background-color:#ffff66;

       }

       a.info span{
       display: none;  /* hide the span text using this css */
       }

       a.info:hover span{ /*the span will display just on :hover state*/
       display:block;
       position:absolute;
       top: 1.5em;
       left: 3em;
       width:15em;
       border:1px solid #ff0000; /* border colour */
       background-color:#ffff99; /* background colour here */
       color:#000000;         /* text colour */
       text-align: center;
       font-size: .8em;
       font-style:italic;
       z-index:30;
       }

       .images {
       vertical-align:bottom;
       }

[scrawny]

You are very kind. I already put in a class called .info and applied it to the text I want in the tooltip. But now I've somehow lost all my image maps links and the tooltip info instead of appearing as a tooltip, appears at the bottom of the page.

I'll keep trying later, I have to go out. Thank you

you can see my CSS and the way I put it in

http://writetv.okstate.edu/hovertest2.html

[PicnicTutorials]

You are very kind. I already put in a class called .info and applied it to the text I want in the tooltip. But now I've somehow lost all my image maps links and the tooltip info instead of appearing as a tooltip, appears at the bottom of the page.

I'll keep trying later, I have to go out. Thank you

you can see my CSS and the way I put it in

http://writetv.okstate.edu/hovertest2.html

 

I believe you mistakenly deleted

 

And I don't even know if you can add CSS tooltips to the image map? You could easily add the title tag like so though - that works!

 

title="tooltip"

[scrawny]

I made a page with a link to my video that's just plain text, not an image map. Then I picked up the CSS code from Post 6 and tried it before, then after the code to my video link...you'll see what happens if you go here http://writetv.okstate.edu/test.html and I obviously am completely clueless.

[jlhaslip]

you missed a bunch of the css code. The code for the span, etc needs to also be in the CSS.

Untitled Page
<!--<br />/*<br />        =================================<br />        start of Tooltip css code here<br />        ================================= */<br /><br />        a.info{<br />        position:relative;           /*this is the key*/<br />        z-index:24;<br />        background-color:#e0e0e0;    /* background colour of display text */<br />        color:#000000;               /* colour of display text */<br />        border:1px dotted #999;    /* border colour */<br />        text-decoration:none;<br />        font-style:italic;<br />        }<br /><br />        a.info:hover {<br />        z-index:25;<br />        background-color:#ffff66;<br /><br />        }<br /><br />        a.info span{<br />        display: none;  /* hide the span text using this css */<br />        }<br /><br />        a.info:hover span{ /*the span will display just on :hover state*/<br />        display:block;<br />        position:absolute;<br />        top: 1.5em;<br />        left: 3em;<br />        width:15em;<br />        border:1px solid #ff0000; /* border colour */<br />        background-color:#ffff99; /* background colour here */<br />        color:#000000;         /* text colour */<br />        text-align: center;<br />        font-size: .8em;<br />        font-style:italic;<br />        z-index:30;<br />        }<br /><br />        .images {<br />        vertical-align:bottom;<br />        }<br />-->




display textTool Tip Text Here

code is based on your Demo page, but I removed the second link.

check it out.