Help with links in CSS popup text boxes

Discussion in 'Web Design and Development' started by live4ever, May 6, 2009.

  1. live4ever macrumors 6502a

    Joined:
    Aug 13, 2003
    #1
    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
    [​IMG]
    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.
     
  2. design-is macrumors 65816

    design-is

    Joined:
    Oct 17, 2007
    Location:
    London / U.K.
    #2
    Could something like this be useful? You could then have the link as a normal hyperlink in the text in the tooltip.
     
  3. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #3
    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.
     
  4. live4ever thread starter macrumors 6502a

    Joined:
    Aug 13, 2003
    #4
    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>
     
  5. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #5
    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.
     
  6. live4ever thread starter macrumors 6502a

    Joined:
    Aug 13, 2003
    #6
    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.
     
  7. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #7
    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>
    
     

Share This Page