PDA

View Full Version : Help with links in CSS popup text boxes



live4ever
May 6, 2009, 05:26 PM
I would like to create a link in the text when you roll over the rectangle with the pointer and be able to click on "Euclidean geometry" in the popup box and be redirected to:
http://en.wikipedia.org/wiki/Euclidean_geometry
http://i44.tinypic.com/1ewc92.png
Here's a link to the page. (http://my.tbaytel.net/crusher/index.html)
And here is the code.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Rectangle</title>
<style type="text/css">
#map {
margin:0;
padding:0;
width:640px;
height:400px;
background:url(rectangle.png) top left no-repeat #fff;
font-family:arial, helvetica, sans-serif;
font-size:13pt;
}

#map li {
margin:0;
padding:0;
list-style:none;
}

#map li a {
position:absolute;
display:block;
/*
Specifying a background image
(a 1px by 1px transparent gif)
fixes a bug in older versions of
IE that causeses the block to not
render at its full dimensions.
*/
background:url(blank.gif);
text-decoration:none;
color:#000;
}

#map li a span { display:none; }

#map li a:hover span {
position:relative;
display:block;
width:200px;
left:20px;
top:20px;
border:1px solid #000;
background:#fff;
padding:5px;
filter:alpha(opacity=95);
opacity:0.95;
}

#map a.rectangle {
top:55px;
left:71px;
width:300px;
height:123px;
}
</style>
</head>
<body>

<ul id="map">
<li><a class="rectangle" href="#" title="Rectangle"><span><b>Rectangle</b><br>
In Euclidean geometry, a rectangle is a quadrilateral with four right angles.</span></a></li>
</ul>
</body>
</html>
I tried the usual way within the text to create links but can't seem to get it to work. Thanks for your time.


design-is
May 6, 2009, 05:41 PM
Could something like this (http://trentrichardson.com/examples/csstooltips/) be useful? You could then have the link as a normal hyperlink in the text in the tooltip.
angelwatt
May 6, 2009, 06:00 PM
You can change your current link to a span tag then you can put on a link on that bit of text. The only thing I'm not sure about is IE handling the :hover selector on the span.
live4ever
May 7, 2009, 12:23 AM
You can change your current link to a span tag then you can put on a link on that bit of text. The only thing I'm not sure about is IE handling the :hover selector on the span.
Can you help with what the code should look like - I actually have a much more complex image map with many popups that would require links in the text.

Here's what I've tried so far but I'm not so familiar HTML and CSS (just following some examples on pure css popup tooltips).
<ul id="map">
<li><a class="rectangle" href="#" title="Rectangle"><span><b>Rectangle</b><br>
In <a href="http://en.wikipedia.org/wiki/Euclidean_geometry"><span>Euclidean geometry</span></a>, a rectangle is a quadrilateral with four right angles.</span></a></li>
</ul>
<ul id="map">
<li><a class="rectangle" href="#" title="Rectangle"><span><b>Rectangle</b><br>
In <span class="clickable"><a href="http://en.wikipedia.org/wiki/Euclidean_geometry">Euclidean geometry</a></span>, a rectangle is a quadrilateral with four right angles.</span></a></li>
</ul>
angelwatt
May 7, 2009, 09:40 AM
The HTML would look like,
<ul id="map">
<li><span class="rectangle" title="Rectangle"><span><b>Rectangle</b><br>
In <a href="http://en.wikipedia.org/wiki/Euclidean_geometry">Euclidean geometry</a>, a rectangle is a quadrilateral with four right angles.</span></span></li>
</ul>
and the CSS would just be updated to select the span rather than the a.
live4ever
May 22, 2009, 02:51 PM
I can't seem to get it to work, which part of the CSS would I update to select the span? Thanks for the help.
angelwatt
May 22, 2009, 05:49 PM
Here's the new CSS with updates in red bold. Worked in Firefox and Safari. Couldn't check on IE.
<style type="text/css">
#map {
margin:0;
padding:0;
width:640px;
height:400px;
background:url(popup_files/rectangle.png) top left no-repeat #fff;
font-family:arial, helvetica, sans-serif;
font-size:13pt;
}

#map li {
margin:0;
padding:0;
list-style:none;
}

#map li span {
position:absolute;
display:block;
/*
Specifying a background image
(a 1px by 1px transparent gif)
fixes a bug in older versions of
IE that causeses the block to not
render at its full dimensions.
*/
background:url(popup_files/blank.gif);
text-decoration:none;
color:#000;
}

#map li span span { display:none; }

#map li span:hover span {
position:relative;
display:block;
width:200px;
left:20px;
top:20px;
border:1px solid #000;
background:#fff;
padding:5px;
filter:alpha(opacity=95);
opacity:0.95;
}

#map span.rectangle {
top:55px;
left:71px;
width:300px;
height:123px;
}
</style>