Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Help with links in CSS popup text boxes

L

live4ever

macrumors 6502a
Original poster
Aug 13, 2003
728
5
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:
Code: 
http://en.wikipedia.org/wiki/Euclidean_geometry
1ewc92.png

Here's a link to the page.
And here is the code.
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.
 
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.
 
angelwatt said:
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.
Click to expand...
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).
Code: 
<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>
Code: 
<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>
 
The HTML would look like,
HTML: 
<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.
 
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.
 
Here's the new CSS with updates in red bold. Worked in Firefox and Safari. Couldn't check on IE.
Code: 
	<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 [B][COLOR="Red"]span[/COLOR][/B] {
			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 [B][COLOR="Red"]span[/COLOR][/B] span { display:none; }
		
		#map li [B][COLOR="Red"]span[/COLOR][/B]: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 [B][COLOR="Red"]span[/COLOR][/B].rectangle {
			top:55px;
			left:71px;
			width:300px;
			height:123px;
		}
	</style>
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back