Jump to content

CSS links on image maps


scrawny

Recommended Posts

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;

}

-->

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

writetvbnr2.jpg
about.gif FILMSTRIP.jpg
bestofWOL.gif
Ken

Center.gif

Featured Interview

 

tracy.jpg
OSU.gif
An Interview with

 

Pulitzer Winner

 

Tracy Letts

 

September, 2008
home.gif

 

August.jpg
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.

 

Sponsors

 

hille.gif
ambasshotel.gif
oeta.gif
kaiser.gif
plug.gif

mccall_smith.jog

 

Alexander McCall Smith visits with Teresa about his famous series, The No. 1 Ladies' Detective Agency. 9/2006

 

 

Link to comment
Share on other sites

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 :o - all that work and not even a thank you? That's irritating!

Link to comment
Share on other sites

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 by lm
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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;

}

 

bestofWOL.gif
Ken

Edited by Eric
Link to comment
Share on other sites

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.

Link to comment
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...