Jump to content
Stef's Coding Community
scrawny

tooltips

Recommended Posts

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?

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
/*
       =================================
       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;
       }


Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
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 before your . That fixed some of it for me. However, I've never worked with area maps so who knows...

 

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"

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...