I was wonder if there was a way in HTML to say, point or click to a part of an image (in this case a map) And have a bit of descriptive text pop up under it or in a popup or something.
My main concern in doing so is having to code 50 different pages for a single map, with some of the towns…
I assume you’d have to divide the image up into parts in order to do something like that.
Zepp is probably right. Take, for example, Link’s Awakening. You’d have to split the map into each individual cube, make each cube its own small picture, give each cube the text it has in the game (Sale’s house of Bananas is the shit, I so totally love that place) as the mouseover text, and reassemble the cube with a table. It’d be a lot of work but hopefully would be a logical progression.
This simplest way is really to split your image into blocks and put them in a table with a cellpadding=0 and cellspacing=0 and just put an alt in the < img > tag with the text you want to for each image
Hmm… there’s really two methods I can see to do this.
The first is a plain ol’ imagemap. HTMLGoodies (http://www.htmlgoodies.com) has an excellent article on imagemaps, and you could use the alt text to pop up a tooltip message when they hold the mouse over certain areas. I use this method in the table of contents at my website.
Unfortunately, you can’t map javascript onClick and onMouseOver handlers to imagemap regions, so if you need something more advanced you should use a table-based imagemap.
In this type of map, you break the image into chunks and then reassemble them as images located in a table. It’s a little harder to set up (and a huge pain in the rear to update) but you can do all the normal javascript tricks to the individual pieces of the image.
I think it’d be easiest to do what dark sand said and avoid using evil javascript or overly complicated imagemaps.
Sin gave me an idea earlier, but I wanted to see if there were other solutions.
Building on his, the simplest I can think of is to make an image map of said maps and then have a table with a nmini gif of each building. When you click on a building, it will take you to the particular entry on the table.
Spaz: Check this out
http://www.meyerweb.com/eric/css/edge/popups/demo.html
AFAIK it should work with IE, Moz and Opera. The downside is that you have to know where your imagemap ends - something you can only do if you have a CSS-based layout.
Edit: Oh yeah I just remembered: DON’T use the Alt image attribute for tooltips. Ever. It’s only supported by IE, Moz and Opera doesn’t support it. Instead, use “Title” for tooltips, like this:
<area shape =“rect” coords =“0,0,82,126” href =“village.shtml” alt=“Village” title=“Go here to get to the village!”>
I have no idea what you mean. I’d like to see an example of this in action…
Edit: Looking over it, that’s pretty much the desired effect. However, I would have to figure out how to implement it, considering I have no knowledge of CSS.
I find it idiotic that Opera doesn’t support the alt property considering how old it is, but if that’s the case you could just surround each < img > tag with and < acronym titile=""> < /title > tag. Or f you want to get a little more complicated you could do something like this:
function doMouseOverStatus(Text)
{
//Set status bar text to Text
window.status=Text;
}
function doMouseOutClear()
{
//Clear status bar text
window.status="";
}
function hyperlink(href)
{
//Checks to see if a link was provided
if(href.length>1)
{
//Yes, open the page.
document.location=href;
}
else
{
//No, do nothing.
}
}
If you just add the above code to your page you get two options for each block of your image:
<table>
<tr>
<td onmouseover=doMouseOverStatus(“This is row 0, cell 0.”) onmouseout=doMouseOutClear()>what ever</td>
<td onmouseover=doMouseOverStatus(“This is row 0, cell 1.”) onmouseout=doMouseOutClear()>what ever</td>
</tr>
<tr>
<td onmouseover=doMouseOverStatus(“This is row 1, cell 0.”) onmouseout=doMouseOutClear()>what ever</td>
<td onmouseover=doMouseOverStatus(“This is row 1, cell 1.”) onmouseout=doMouseOutClear()>what ever</td>
</tr>
</table>
That code works perfectly in every version of IE and netscape I’ve tried it in, opera I don’t know but it should work since this window.status property has been around since javascript 1.1 I think.
<table>
<tr>
<td onmouseclick=hyperlink(“row0cell0.html”)>what ever</td>
<td onmouseclick=hyperlink(“row0cell1.html”)>what ever</td>
</tr>
<tr>
<td onmouseclick=hyperlink(“row1cell0.html”)>what ever</td>
<td onmouseclick=hyperlink(“row1cell1.html”)>what ever</td>
</tr>
</table>
(You can actually leave the onmouseover and onmouseout options for each td, I just ook it out to make it easier to see the code, but you might actually want to have both to make it even clearer to the user)
the way the script is currently written it replaces the current page with the appropriate rowXcellX.html page, but if you want you could always just change the hyperlink function and replace the document.location with a window.open(href)
This is probably a little closer to what you had in mind at the beginning, anyway I hope this helps
Adobe ImageReady can slice up the image and do all the HTML work for you, then you just have to open up the file and c/p the table.
yeah but image maps have inherent problems with them, not all browsers can read them, nor do they all support the same geometric shapes. you’re much better off using a table than an image map.
I use Dreamweaver MX and I can select whatever part of the image I want to have a mouse-over and can make a link and alt text to just that section… maybe I can do that for you and give you the html for it? unless you have Dreamweaver then you could do it easily.
Wertigon’s area tag requries you to sort of experiment and outline/draw the map crudely with code. So if you’re into exact details, then that’s a no-no.
Originally posted by Majin Vegitto
I use Dreamweaver MX and I can select whatever part of the image I want to have a mouse-over and can make a link and alt text to just that section… maybe I can do that for you and give you the html for it? unless you have Dreamweaver then you could do it easily.
GAH! Dreamweaver bastardizes HTML. Not to mention, that’s just an automated way to make a crappy image map.
if you say so…
Originally posted by Dark Sand
I find it idiotic that Opera doesn’t support the alt property considering how old it is
Opera most definitely supports the alt attribute. It just doesn’t do the same thing that IE does with it (tooltips), since the HTML standard doesn’t specify exactly what browsers are supposed to do with it. Not that I don’t agree with you that Opera should at least give the option of interpreting alts as tooltips. 
And thanks for the “title” suggestion, Wert. I’ve been looking for a simple way to get Opera to do tooltips. Do you know what IE and NN do with it, though?
X: Actually, it’s funny you mentioned that, because I had envisioned doing exactly that (and more!) for my LA shrine. Don’t count on it happening, though… my shrine is taking too long as it is.
If you want the tooltips to show up on every browser you’ll need to include both an “alt” AND a “title” attribute. IE uses alt whereas NS, Mozilla et al use title. Yes, it’s a pain. -_-
ALT is just supposed to be what appears if the image doesn’t load, or if you’re using text browsers. IE Uses TITLE for everything else. For instance
<A HREF="/" TITLE=“The Agora Index Page”>Hover this</A>
Cid: Yep, it’s a P-A-I-N. Why won’t IE do like the rest of the world does? grmbl
Oh and Spaz, I think this in inclusion to the above link should work if you fiddle around a bit with it (yes, you have to manually set where the top left corner of the link “area” is supposed to be, but it’ll still be far more advantegous than anything else):
<code>
<div style=“background-image : url(map.png); height : 100px; width : 100px;”>
<a href=“town.html” style=“position : absolute; top : 10px; left : 10px;”>
<img src=“transparent.png” alt=“Town”><span>Visit our town for a friendly chat</span>
</a>
<a href=“lakeshore.html” style=“position : absolute; top : 50px; left : 60px;”>
<img src=“transparent.png” alt=“Lakeshore”><span>Visit the lakeshore for a refreshing walk</span>
</a>
</div>
</code>
It also has the added benefit of being accessible for text-only browsers such as Lynx. Just mail me if you’re having further problems