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?
Comments
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.
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?
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
Thanks.
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)
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.
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 :)
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?
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!
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
Just trying to help out.