Creating hot spots on a map

Wild_Gazebo

Hello all,

I'm trying to pretty up my wiki so I've been messing around on a test site. I think I've pretty much decided on my theme but I'm still working on some of the organization and layout.

So to cut a boring story short: I need some help. I really have no code experience and everything I've done so far has basically been cut and pasted with some trial and error thrown in for spice. I have figured out how to create an image/map that has 'hot spots' on it so that you can simply click a section and it rushes you off to what ever you linked it to...and I've figured out how to blend background images with a custom site menu...but I haven't managed to blend them together.

What I would like to do is have the capabilities of this "page":http://www.obsidianportal.com/campaign/silvertears/wikis/testmap with this "page":http://www.obsidianportal.com/campaign/silvertears/wikis/geography

So I'm using this code for the 'hot spot' page:










And I'm using this code for the background/menu page:












So I guess I'm asking is there a way to simplify or blend these two disparate ways of putting the image on the screen so that I can still line up the image at the top and have clickable hot spots on the map?

HurstGM

I have done 2 diffrent things. One is harder than the other.
One is where I Just replace the words with links and place them on the map.
The other is where I cut and paste the map into parts and then place them into the screen.
Both require the placeing of the images into the area. Something that can be tricky.

here is a sample of the code that i use for placing cutout pictures or the text.



this is the code i use to set the background. You can see where you set the hight and width of the back ground picture. until you place tag in there everything you place will be on this back ground.

Wild_Gazebo

I thought about doing it that way...and I still might. What I would do then is create text buttons with transparent backgrounds and just place them over the background image. In fact you can see that is how I created my menu.

That seems like a lot more work than just creating one background image and having these 'hot spots.' That way I could just measure the pixels of the image and place the coordinates with a radius of my choosing.

What I'm stumbling over is the actual proper way to code my background image while maintaining the alignment with the menu and being able to place these precise coordinates over it. I just can't get the right mixture of code. Unfortunately I don't even have the proper language to express my shortcomings let alone what I actually need.

How can I make the boundaries of my 'map' the same as my background so that \i can just place the coordinates accordingly?

gaaran

I've only taken a cursory glance at your code, but I think what you should be able to do what you want to do is this:

Use actual pixel values for instead of 100% for the width (i.e. 730px) and don't use that image as a background image. Instead, put your image map inside the div like so:



http://cdn.obsidianportal.com/assets/86456/map.jpg

Wild_Gazebo

Thanks gaaran! That looks like it should work. I didn't know if I should squish the background into the map or mimic a background with a map. I'm not really adding any other pictures or text so the need for the background code is actually unnecessary.

Thanks.

gaaran

Yeah, not a problem, I've had a lot of practice with creative div usage :). Just make sure that if you want the proportions to stay correct that you only set the width for the image map, it will automatically re-size the height to match. If you run into any problems, drop me a message, and I'd be willing to look at your code further.

RaseCidraen

Ugh - Gaaran and I have had too much practice with creative div usage. I had a nightmare about being trapped in a misaligned div the other night. :(

wolfhound

Gaaran and Rase Cidraen, you two are one of the reasons this is amongst the best online communities around right now. Thank you ever so much for that code snippet.

wolfhound

The tag within is still non-functional yeah? Anyone found a trick?

I remember not being able to set background colors or transparency on when I first played with them, I'm assuming that's still true? (I tried style="background:bla" and various border widths and colors and all no success)

RaseCidraen

No idea about area styles - thanks for the compliment! I would probably hack a transparent border image together - what are you trying to do?

wolfhound

No worries, I was just wanting to be lazy. I *figured* I'd have to do transparent overlays and futz with Z-Position, I was just hoping technology had found a way around.

I came up with two situations where being able to colorize the area tag would be handy.
1) debugging (turn the area into a color for final pixel positioning if needed)
2) Say you have an outline map of a region/area/etc. and you want to visually represent to the user that location A, B, or C (which are odd shaped ploygons due to being rooms, states, city borders, whatever) are different. A being red/transparent, B is blue, C is green, and so forth. With a single styling area tag, you can both set the area as clickable and colorize it all at the same time, allowing for the base image to be reused dynamically.

RaseCidraen

You mean something like "this?":http://www.obsidianportal.com/campaign/planescape-campaign/wikis/sigil

I can give you the code - then it's just a matter of resizing the images and getting them into the right position. I use transparent images as links, but change them into other pictures for purposes of debugging. You'd be best off with areas for #2, and Gaaran probably has a more elegant solution, but I hack things together a lot :)

AnthonyDluzak

I am so lost.... LOL!

You guys are good! Wish I could do fancy stuff like that! Any suggestions on which site I could go to to learn basic stuff first, then maybe the more advanced?

HurstGM

Anthony PM me and Ill help set up your code so it can be modified and I can help teach you but it might be eaiser over skype rather than the forum

RaseCidraen

The fancy stuff is just the regular stuff combined with other regular stuff. There are so many brilliant coders and fiddlers on this site it's unreal. There's not any better place to learn than here, honestly. You can pick up html tricks elsewhere, but most often they don't apply, as the portal uses slightly different rules for what we can use and what we can't.

Just a hint for anyone who's using image linking: Instead of using hard-coded images which redirect to an error when the page is created, try the following:


[[Page Name | ]]


Just define the image properties in the image tag, and you'll find yourself saved a bunch of trouble in creating that page!

GamingMegaverse

Wow, that is brilliantly simple!! Wish I had considered that before! While I tend to recode a lot of the basic textile, that is a great way to get large projects rolling.
killervp
"A God...Rebuilt":http://www.obsidianportal.com/campaigns/a-god-rebuilt
Duskreign's "COTM for November 2011":http://www.obsidianportal.com/campaigns/wyrmshadow/wiki_pages/112011

wolfhound

Sweeeeeeeeet

gaaran

Just wanted to throw in that if anyone has any coding questions they can feel free to drop me a line as well. If I know how to do it, I'd be happy to help show you how :).