The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> Hyperlink Text on Map Image, How do I put text with a hyperlink over a map image?
Mark Boucher
post Sep 21 2010, 09:25 AM
Post #1





Group: Members
Posts: 4
Joined: 21-September 10
Member No.: 12,772
I am the hydrologist for my county. I know rudimentary HTML and am new to CSS, but understand the power of CSS. My data collection PC spits out an HTML page with a table of the most recent rain data every 1/2 hour. Works very well. However, I want to take an image map of my county, put text in specific locations (last hour's rain depths where the rain gauges are for example) and allow the user to click the text and go to more detailed data.

I found this CSS code elsewhere:

.image {
position:relative;
float:left;
}
.image .text {
position:absolute;
top:10px;
left:10px;
width:300px;
}

to go with this html

<div class="image">
<img src ="c:\fcdrainmap.GIF" width="880" height="680" alt="County" usemap ="#rainmap2" />
<div class="text">
<p>text.</p>
</div>
</div>

I can't get this to place the text over the image. After that, I'll work in the hyperlink.

Any thoughts?

Mark
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Sep 21 2010, 03:15 PM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
Can you post a link to a sample page? There must be something that is different in the real page. If you try the snip you posted on its own, you'll see it works.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Mark Boucher
post Sep 21 2010, 03:55 PM
Post #3





Group: Members
Posts: 4
Joined: 21-September 10
Member No.: 12,772
QUOTE(pandy @ Sep 21 2010, 03:15 PM) *

Can you post a link to a sample page? There must be something that is different in the real page. If you try the snip you posted on its own, you'll see it works.


I don't have the page on a web server. Since you got it to work, I tried to make sure I had the right path for the css file. I have the put all the files in the same directory (html, css, jpg, gif).

Here is the HTML

<html xmlns="http://www.w3.org/1999/xhtml" version="-//W3C//DTD XHTML 1.1//EN" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Map</title>
<meta name="description" content="content" />
<link rel="stylesheet" href="map.css" type="text/css" media="screen, print" />
</head>
<body>
<div id="header">

</div>
<div id="nav">

</div>
<div id="main">
<div class="image">
<img src ="fcdrainmap.jpg" width="880" height="680" alt="County" usemap ="#rainmap2" />
<div class="text">
<p>Text</p>
</div>
</div>
</div>
<div id="footer">

</div>
<d
</body>
</html>

(Sorry this poster deletes tabs)

Here again is the css.

.image {
position:relative;
float:left; /* optional */
}
.image .text {
position:relative;
top:10px; left:10px;
width:500px;
}
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Sep 21 2010, 04:33 PM
Post #4


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
It places the text in the top left corner of the image. Isn't that what you want?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Mark Boucher
post Sep 21 2010, 05:24 PM
Post #5





Group: Members
Posts: 4
Joined: 21-September 10
Member No.: 12,772
Hmmm... that is what I want.

Mine puts the text on a line below the image.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Sep 21 2010, 05:32 PM
Post #6


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
So what you have isn't the same as the sample you posted here. smile.gif

Is the link to the style sheet correct? Add something like a red background so you can see if it's read.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Mark Boucher
post Sep 21 2010, 05:50 PM
Post #7





Group: Members
Posts: 4
Joined: 21-September 10
Member No.: 12,772
I imbedded the css in the html (see below).
I set the text background to red. I'm getting the same results: Text appears below the image not on it like I want to do.
Could it be an IE setting?

Mark

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" version="-//W3C//DTD XHTML 1.1//EN" xml:lang="en">
<head>
<title>New 4</title>
<STYLE TYPE="text/css" MEDIA=screen>
<!--
.image .text{position:relative; top:10px; left:10px; width:500px; background: red }
-->
</STYLE>
</head>
<body>
<div id="header"></div>
<div id="nav"></div>
<div id="main">
<div class="image">
<img src="fcdrainmap.jpg" width="880" height="680" alt="County" usemap="#rainmap2" />
<div class="text">
<p>Text</p>
</div>
</div>
</div>
<div id="footer"></div>
</body>
</html>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Sep 21 2010, 06:23 PM
Post #8


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
There you see. They are not the same at all. In the first sample you posted .image is positioned relative and .image .text is positioned absolute. In this example .image .text is positioned relative and .image isn't positioned at all. That's a world of difference.

By positioning a containing box (for example relative) you create a context in which you can position child boxes absolute. So position: relative for .image is the key.

If you position .image .text absolute without making .image relative, the offset will be relative the edges of the browser window, not what you want. Furthermore, with position relative the offset is relative the spot the element would have been at hadn't it been positioned. So relative and absolute are very different.

http://www.w3.org/TR/CSS2/visuren.html#positioning-scheme

Note this especially.
"absolute
The box's position (and possibly size) is specified with the 'top', 'right', 'bottom', and 'left' properties. These properties specify offsets with respect to the box's containing block.
and (following the link in that text...

"4. If the element has 'position: absolute', the containing block is established by the nearest ancestor with a 'position' of 'absolute', 'relative' or 'fixed' [...]"
http://www.w3.org/TR/CSS2/visudet.html#con...g-block-details

That is, making .image relative makes absolute boxes inside it be positioned relative the edges of .image instead of the edges of the browser window. I'm lying a little here when I say the browser window. It's really the "root element", but it will look like the box is positioned relative the browser window and it's easier to fathom than the esoteric root element.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Cascading Style Sheets · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 16th April 2024 - 10:38 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC