scrawny Posted January 31, 2009 Report Share Posted January 31, 2009 I'm trying to put a tooltip link on an image map but not sure if that's possible. Has anyone had success with that? Quote Link to comment Share on other sites More sharing options...
PicnicTutorials Posted January 31, 2009 Report Share Posted January 31, 2009 You "might" be able to do an overlay on top of the image map and put the tooltips in that. I'll try an work on it tommorrow morning... Quote Link to comment Share on other sites More sharing options...
shelfimage Posted January 31, 2009 Report Share Posted January 31, 2009 I'm trying to put a tooltip link on an image map but not sure if that's possible. Has anyone had success with that? Tool tips are generated by using alt="" for IE browsers and title="" in all other browsers. So in your try adding one of each. Quote Link to comment Share on other sites More sharing options...
PicnicTutorials Posted January 31, 2009 Report Share Posted January 31, 2009 Morning, You obviously didn't see it, but did I tell him that in his last post about the same problem. Quote Link to comment Share on other sites More sharing options...
PicnicTutorials Posted January 31, 2009 Report Share Posted January 31, 2009 I worked on it some. I gave the image map an absolute positioned overlay. Although, I can only get it to work in FX/Chrome/Safari. IE will only recognize the anchor if you give the #absolute div a background color. If anyone wants to pick up on this where I left off feel free. That said, if you really want the CSS tooltips, your probably going to be better off slicing each text image out of there and making each a link. That way it would work (most likely). Write TV .info { color: black; font-size: x-small; background-color: InfoBackground } .tooltip { position:relative; display:block; height:40px; text-decoration:none; } .tooltip span { position:absolute; left:-999em; } .tooltip:hover span, .tooltip:focus span { left:210px; color:#000; padding:5px 10px; border:2px solid #000; background:#cfe5df; } #relative { position:relative; } #absolute { position:absolute; top:0;left:0; height:360px; width:180px; margin:55px 10px 0 30px; } --> Ken Featured Interview An Interview with Pulitzer Winner Tracy Letts September, 2008 Writing Out Loud Blog Beginning, March 2nd, we'll be posting a new episode of Writing Out Loud the 1st and 3rd Monday of every month. We'll also be continuing to build our archives and hope to have 50 classic author interviews available by the end of the year. The programs are in Flash video format. Simply right click your mouse on the player console to view them full-screen. Left click to go into the pause mode. N.Y. Times Review Sponsors Alexander McCall Smith visits with Teresa about his famous series, The No. 1 Ladies' Detective Agency. 9/2006 Quote Link to comment Share on other sites More sharing options...
lm Posted January 31, 2009 Report Share Posted January 31, 2009 oh dear me, tables, spacers again. Partying like its 90's or something? Quote Link to comment Share on other sites More sharing options...
scrawny Posted January 31, 2009 Author Report Share Posted January 31, 2009 Tables, spacers, created by Adobe GoLive--I'm unfortunately a WYSIWYG person which explains why I'm having such a difficult time with this tooltip on top of a link in an image map thing. I have to go back to my basic CSS book and bone up. Quote Link to comment Share on other sites More sharing options...
PicnicTutorials Posted January 31, 2009 Report Share Posted January 31, 2009 Tables, spacers, created by Adobe GoLive--I'm unfortunately a WYSIWYG person which explains why I'm having such a difficult time with this tooltip on top of a link in an image map thing. I have to go back to my basic CSS book and bone up. whaaa - all that work and not even a thank you? That's irritating! Quote Link to comment Share on other sites More sharing options...
lm Posted January 31, 2009 Report Share Posted January 31, 2009 (edited) I have to go back to my basic CSS book and bone up. Book is fine but better go through w3schools tutorials and practice CSS as you read. Then take simple CSS template and make a masterpiece of CSS layout. It would be a short cut to modern coding. As for tooltips: try loadaveragezero or Stu website - make there search on image map or tooltips( this is one of examples from there. Edited January 31, 2009 by lm Quote Link to comment Share on other sites More sharing options...
PicnicTutorials Posted January 31, 2009 Report Share Posted January 31, 2009 I should note. My example above works just fine in all browsers if you place text in the anchor (or a black box like stus). But with his image map he already has the text in place and obviously does not want a black box. You "could" just color the text the same green so that it disappears and place it between the white image text. That would work. And here is all the CSS tooltips a man could ever need. http://www.visibilityinherit.com/code/tooltip.php Quote Link to comment Share on other sites More sharing options...
PicnicTutorials Posted February 1, 2009 Report Share Posted February 1, 2009 (edited) I am the bug squasher!!! I did this for me - not for mr. rude! This works in all now - is this on stus site? Overlay image map tooltips! (i.e. Hover over "Ken Burns"!) You can add tooltips to the rest easy enough... Time to go make a tut... The key ingredients are here a:hover { visibility:visible; /* ie6 */ } .tooltip { position:relative; display:block; height:40px; text-decoration:none; background:url(fake.jpg); /* IE6, IE7, Opera */ } .tooltip span { position:absolute; left:-999em; } .tooltip:hover span, .tooltip:focus span { left:210px; color:#000; padding:5px 10px; border:2px solid #000; background:#cfe5df; } #relative { position:relative; } #absolute { position:absolute; top:0;left:0; height:360px; width:180px; margin:55px 10px 0 30px; } Ken Edited February 1, 2009 by Eric Quote Link to comment Share on other sites More sharing options...
scrawny Posted February 1, 2009 Author Report Share Posted February 1, 2009 I'm sorry I didn't thank you right away--I've been away from my computer. Unfortunately for me I have to do about a week's worth of ads for print now and won't have time to apply myself to trying to finally get the tooltip working for awhile--I appreciate all the help and input much more than a simple thank you can express--but Thank You! will have to do. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.